appybuilder - 5.APP만들기 (3) Layout에 대하여

안녕하세요.

 

오늘도 실제 app을 만들기 전에 제가 중요하다고 생각하는 Layout에 대해서 정리하려고 합니다.

이게 왜 중요할까요 ?

일반적으로 화면을 사용자와 스마트폰 사이에 대화를 하는데 있어서 얼굴 역할을 하는데요.

이 화면을 구성하는데 있어서 중요한 구성 요소가 Layout 이기 때문입니다.

 

1. Layout

  : appybuilder에서는 총 5개의 Layout 폼을 제공합니다.

  - HorizontalArrangement : 가로 방향으로 컴포넌트 배치 할 수 있는 Layout

  - HorizontalScrollArrangement : 가로로 컴포넌트 배치 할 수 있는 ScrollLayout

  - TableArrangement : 컴포넌트를 테이블(바둑판) 모양으로 배치 할 수 있는 Layout

  - VerticalArrangement : 세로 방향으로 컴포넌트 배치 할 수 있는 Layout

  - VerticalScrollArrangement : 세로 방향으로 컴포넌트 배치 할 수 있는 ScrollLayout

 

2. 공통 속성 값들...

  - AlignHorizontal : 배치된 컴포넌트들의 가로 정렬 방식 결정 (좌측/중앙/우측)

  - AlignVertical : 배치된 컴포넌트들의 세로 정렬 방식 결정 (위쪽/중앙/아래)

  - Height / Width

    -> Automatic : Layout에 배치된 컴포넌트들의 값에 따라서 자동으로 결정

    -> Fill Parent : 해당 Layout의 부모값의 최대 값

        ===> 부모 값이란 나의 상위 컴포넌트의 최대값을 의미함

          예) Screen1 -> Layout1 : Layout1의 Width값이 [Fill parent]이면 Screen1의 width값임.

    -> ___ pixcels : 절대 픽셀 지정 값

    -> ___ percent : Screen 기준의 percent 지정 값

  - Visible : true/false 의 논리값으로 해당 Layout 보이고 안보이고 지정

  - 특성 : Layout안에 또 다른 Layout이 들어 갈 수 있다.

 

3. Layout 안에 컴포넌트 배치한 화면

  : 이것 외에 더 많은 컴포넌트가 들어 갈 수 있으며,

    Layout 안에 Layout을 넣어서 배치함으로써 우리가 원하는 모양을 만들어 낼 수 있습니다.

   - 응용하기 : 두개의 버튼 균등배분으로 구현하기

        -> Layout 3개 사용해서 두개의 버튼을 균등정렬로 구현

            : Layout1 (가로/세로 가운데) -> Layout_left (가로/세로 가운데) -> 버튼1 배치

                                                -> Layout_right (가로/세로 가운데) -> 버튼2 배치

 

 

4. 관련 블럭들...

   - Click / LongClick : 사용자가 Layout을 클릭/길게클릭 했을때 발생하는 이벤트

      단, Layout있는 다른 컴포넌트들이 있을때 그 컴포넌트를 클릭/길게클릭 했다면 발생 안함.

   - Image : 블럭을 통해서 백그라운드 이미지를 정의하거나, 정의된 값을 가져 올 수 있음.

   - BackgroundColor : 블럭을 통해서 백그라운드 컬러 속성값을 정의하거나, 정의된 값을 가져 올 수 있음.

   - Visible : 블럭을 통해서 해당 Layout의 속성값을 정의하거나 상태값을 가져 올 수 있음.

 

5. 기타.

  - Layout에 정렬 관련해서 배분 정렬이 없다.

    즉 버튼 2개 넣고 좌측/우측/가운데 밖에 위치가 안되며,

    균등한 배분 정렬이 추후 생겼을면 좋겠습니다.

  - TableArrangement에서 가로/세로의 갯수를 정하는데,

    추후 큰값에서 작은 값으로 변경될때 기존에 배치된 컴포넌트들이 안보이게 됩니다.

    즉 3x3에서 2x2 로 변경했다면, 미리 2x2 밖에 있는 것은 빼놓고 다시 배치해야 합니다.