레이아웃

1. 레이아웃

- ViewGroup 클래스로부터 상속받으며 내부에 무엇을 담는 용도로 사용된다.

- LinearLayout이 주로 쓰이지만 LinearLayout으로 커버가 불가능한 것은 다른 레이아울을 사용하여야 한다.

 

1) 레이아웃의 종류

 [1] LinearLayout = 위젯을 위에서 아래 또는 왼쪽에서 오른쪽으로 차례로 배치한다.

 [2] RelativeLayout = 위젯이 속한 레이아웃의 상하좌우의 위치를 지정하여 배치한다.

  - 즉, 상대방을 보고 결정한다.

 [3] TableLayout = 위젯을 행렬의 형태로 배치한다.

 [4] GridLayout = TableLayout과 비슷하지만 영역 내에서 다양하게 배치할 때 효율적이다.

 [5] FrameLayout = 위젯을 겹쳐서 배치한다.

  - 즉, 위젯 위에 위젯을 포개는 방식이다.

 

2) 레이아웃의 속성

 [1] orientation = 레이아웃 내에서 배치할 위젯의 방향(가로, 세로)을 결정한다.

  - Horizontal : 가로로 배치

  - Vertical : 세로로 배치

 [2] gravity = 레이아웃 내에서 배치할 위젯의 정렬 방향(위, 아래, 좌, 우, 중앙)을 결정한다.

 [3] layout_gravity = 레이아웃 밖에서 자신(위젯)을 어디에 배치할지 결정한다.

 [4] padding = 레이아웃 내 배치할 위젯의 여백을 결정한다.

 [5] layout_weight = 레이아웃이 전체화면에서 차지하는 비율을 설정한다.

 

2. LinearLayout

1) 사용방법

 [1] 기본형태

 

 - 위 그림이 기본 텍스트모드 시 보여지는 코드이다.

 

 [2] gravity속성

 

 - 위 그림은 6번라인에 그래비티 속성을 추가하여 오른쪽과 아래쪽 정렬을 하는 코드이다.

 

 

 - 정렬했음에도 불구하고 우측정렬은 되지만 아래쪽으로 정렬되지는 않는다.

 - 현재 선택된 3개버튼의 layout_weight의 속성은 1이다. (1:1:1 비율로 사용하겠다는 말이다.)

 

 - 정렬이 되지 않는 이유는 버튼이 아닌 LinearLayout의 layout_height속성이 wrap_content로 전체가 선택되지 않았다.

 - 그래서 파란라인 선택된 영역 중에서 가장 아래이기 때문에 겉으로보면 아래정렬이 되지 않은 것처럼 보인다.

 

- 위 그림과 같이 layout_height의 속성을 부모의 전체영역인 match_parent로 변경해준다.

 

 [3] gravity와 layout_gravity 차이

- 위 그림은 첫 번째 버튼의 gravity속성을 right로 선택한 화면이다.

- 버튼 내의 글자가 오른쪽으로 이동한 것을 볼 수 있다.

 

- 위 그림은 첫 번째 버튼의 layout_gravity속성을 right로 선택한 화면이다.

- 버튼 위젯의 위치가 레이아웃에서 오른쪽에 위치한 것을 볼 수 있다.

 

- 첫 번째 버튼의 layout_gravity속성은 right로 지정했다.

- 두 번째 버튼의 layout_gravity속성은 center_horizontal로 지정했다.

- 세 번째 버튼의 layout_gravity속성은 left로 지정했다.

 

- 첫 번째 버튼은 gravity속성에 top과 right를 지정했고, layout_gravity속성은 center_horizontal을 지정했다.

- 두 번째 버튼은 gravity속성에 center와 left를 지정했고, layout_gravity속성은 left를 지정했다.

- 세 번째 버튼은 gravity속성에 bottom과 right를 지정했고, layout_gravity속성은 right를 지정했다.

 

2) 시연

[1] 먼저 레이아웃 하나를 만들고 그 안에 3개의 레이아웃을 추가한다.

[2] 추가한 3개의 레이아웃 내에 각각 2개의 버튼위젯을 만든다.

[3] 3개의 레이아웃 중 첫 번째, 세 번째 레이아웃은 orientation속성을 vertical로 설정한다.

[4] 3개의 레이아웃 중 두 번째, orientation속성을 horizontal로 설정한다.

[5] 3개의 레이아웃 전체를 선택하여 layout_weight속성을 1로 부여하여 레이아웃 별 화면비율을 1:1:1로 맞춘다.

[6] 가장 바깥쪽의 레이아웃의 layout_height속성을 match_parent로 설정한다.

 

[7] 3개의 레이아웃 전체를 선택하여 gravity속성을 center로 설정한다.

 

[8] 가장 바깥쪽의 레이아웃의 layout_width속성을 100dp로 설정한다.

[9] 가장 바깥쪽의 레이아웃의 layout_gravity속성을 center로 설정한다.

 

3) 시연

[1] 큰 테두리의 레이아웃 두 개는 layout_height속성은 0dp, layout_weight속성은 1로 설정한다.

[2] 이렇게 설정하는 이유는 길이가 아닌 비율로 맞추기 위해서이다.

 

[3] 빨간색 레이아웃에 포함된 두 개는 layout_width속성은 0dp, layout_weight속성은 1로 설정한다.

 

[4] 노란색 레이아웃, 검정색 레이아웃은 layout_height속성을 0dp, layout_weight속성은 1로 설정한다.

 

3. RelativeLayout

1) 기본형태

 

2) 배치방법

 - 한 가지 속성이 아닌 두 가지 속성(가로, 세로)이 있어야 한다.

 - 단 center속성을 주려면 한 가지 속성만 있어도 가능하다.

 - 위 그림에 맞게 속성을 부여하면 그에 맞는 배치를 할 수 있다.

 

 

 

4. 기타 레이아웃

- 위 형태에 맞춰서 기준 위젯을 중심으로 배치를 할 수 있다.

 

- 위 그림은 기준 위젯을 중심으로 나머지 버튼을 배치한 모습이다.

 

- 위 그림은 하나만 기준으로 삼으면 안되기 때문에 2개의 기준을 두고 배치한 모습이다.

 

5. TableLayout

1) 속성

 - layout_column = 현재 위젯을 지정한 열에 맞춰서 표시한다.

 - layout_span = 가로의 길이를 늘린다.

 

 [1] layout_span속성을 2로 주면 위젯 2개만큼의 크기로 확장한다.

 

 

 [2] layout_column속성을 1로 주면 2번째 위젯의 위치부터 시작한다.

 

 

 [3] stretchColumns속성을 *로 주면 비율에 맞춰서 크기만큼 채워준다.

 [4] 가로는 layout_width속성을 0으로 잡고 비율(layout_weight=1)을 1로 주면 비율에 따라 크기가 맞춰진다.

 [5] 세로는 layout_height속성을 0으로 잡고 비율(layout_weight=1)을 1로 주면 비율에 따라 크기가 맞춰진다.