이번에는 위젯들을 화면에 배치 하는데 필요한 container에 관한 내용입니다.

다음과 같이 3부분으로 나누어서 포스팅 하려고 합니다.


Part 1. LinearLayout

Part 2. RelativeLayout

Part 3. TableLayout  + ScrollView


그중 Part 1. LinearLayout에 대한 정리 입니다.

-------------------------------------------------------------------------



 

 

 

1. LinearLayout (Box Model)

LinearLayout의 상속 구조는 다음과 같다.

 

LinearLayout은 Box Model이라는 개념의 컨테이너를 추상화 한 것이다.

여러 크기의 사각형 (내부에 어떤 것들이 들어 있는지에 따라 크기/모양 결정) 컨테이너를 화면에 배치하며,

컨테이너 내부에는 필요한 만큼의 위젯, 서브-컨테이너가 들어갈 수 있다.

 

다음은 LinearLayout을 이용해 화면을 구성한 예로, 여러 박스 들이 모여 전체 View가 완성 되었다.

그래서 Box Model이라고도 한다.

 

위와 같은 화면을 구성하기 위해서는 다음 5가지 layout관련 XML attribute나 class method를 LinearLayout 컨테이너와 child element에 적절히 사용해야 한다.



1. LinearLayout 내 Child의 수평/수직 정렬: orientation

  • LinearLayout 엘리먼트의 android:orientation 속성을 "horizontal" (수평) 또는 "vertical" (수직) 로 지정.
  • Java 코드 상에서는 LinearLayout인스턴스.setOrientation(LinearLayout.HORIZONTAL 또는 LinearLayout.VERTICAL) 사용.


수평/수직 정렬 예 (main.xml)

소스 펼치기


다음 그림은 두 개의 TextView 위젯이 LinearLayout 내부에서 vertical(수직), horizontal(수평)으로 정렬된 모습이다.





2. 컨테이너와 컨테이너 내 Child의 크기: layout_width, layout_height

컨테이너나 컨테이너 내부의 child 엘레먼트 속성 android:layout_width (가로 크기)과 android:layout_height (세로 크기)을 다음과 같은 값으로 지정.

  • "상수 + 단위": 위젯의 크기를 직접 지정함.  (ex. "50px", "123in" 등)
  • "wrap_content": 자신(컨테이너/위젯)이 포함하는 내용(content)에 딱 맞을 만큼의 크기로 자기 자신을 설정. 
  • "fill_parent": 자신을 포함하는 부모 컨테이너를 꽉 채우도록 설정에 꽉 차도록 설정.


크기 설정 예 (main.xml)

소스 펼치기


다음 그림은 하얀 영역으로 표시되는 TextView들을 각기 다른 크기로 표현한 예이다.




3. 컨테이너 내부에서 child 끼리의 크기 비율: layout_weight

  • 2개 이상의 child 엘레먼트가 자신이 속한 부모 컨테이너의 공간을 분할해서 차지할 때 각 child가 차지할 공간의 비율을 지정.

    주의: Child 중 android:layout_width/height 속성이 "fill_parent"로 지정 된 것들만 weight 속성이 정상적으로 적용됨

  • 비율을 지정하려는 child들의 android:layout_weight 속성을 원하는 비율(숫자)로 지정.

    예를 들어 2개의 child 위젯 A, B의 android:layout_height 속성이 fill parent로 지정되어 있고,

    두 위젯을 담고 있는 부모 컨테이너의 height가 100 pixel이라고 한다면,

    위젯 A의 android:layout_weight="1"로, 위젯 B의 android:layout_weight="3"로 설정했을 때

    A가 75 pixel을 B가 25 pixel을 할당 받는다.



layout_weight 속성 예제 (main.xml)

소스 펼치기


실행결과는 다음과 같다.

 



4. Gravity

Gravity관련 속성은 android:gravityandroid:layout_gravity로 구별되는데

android:gravity는 자기 내부에서 자신의 content의 위치를 지정한다. 예를 들어 밑의 그림에서 보면 TextView A의 위젯 영역이 흰색으로 표시되고 있고, 그 영역에서 자신의 content인 "Text A" 문자열이 오른쪽으로 쏠려있는것을 볼 수 있다. 이는 TextView A의 android_gravity 속성이 "right"로 설정되어 있기 때문이다. (참고로 TextView의 android:gravity속성을 설정해서 text의 왼쪽, 중앙, 오른쪽, 상/하, 중앙 정렬을 세팅할 수 있다)

반면에 android:layout_gravity 속성은 자신을 담고있는 부모 컨테이너 내부에서 자기자신의 위치를 지정한다. 예를 들어 밑에 그림에서 TextView B의 전체 영역이 녹색으로 표시되고 있고, 부모 컨테이너 P에서 B의 위치를 보면 오른쪽으로 쏠려 있음을 볼 수 있다. 이는 TextView B의 android:layout_gravity 속성이 "right"로 설정 되어 있기 때문이다.

 

 

Gravity test 예제 (main.xml)

소스 펼치기

 

결과는 다음과 같다.

 

android:gravity 또는 android:layout_gravity 속성은 다음과 같은 값으로 설정이 가능하다. 복수의 값을 설정할 시 | 사용. (ex. right|bottom)

  • top: 객체를 컨테이너 위쪽 한계로 밀기. 객체의 사이즈 변동 없음.
  • bottom: 개체를 컨테이너 밑 한계로 밀기. 객체의 사이즈 변동 없음.
  • left: 객체를 컨테이너 왼쪽 한계로 밀기. 객체 사이즈 변동 없음.
  • right: 객체를 컨테이너 오른쪽 한계로 밀기. 객체 사이즈 변동 없음.
  • center_vertical: 객체를 컨테이너의 수직 중심에 배치. 사이즈 변동 없음.
  • fill_vertical: 객체를 컨테이너 높이만큼 상하 확대해 상하로 꽉 차게 배치.
  • center_horizontal: 객체를 컨테이너의 수평 중심에 배치. 사이즈 변동 없음.
  • fill_horizontal: 객체를 컨테이너 넓이만큼 좌우 확대하여 좌우로 꽉 차게 배치.
  • center: 객체를 컨테이너의 수직/수평 중심에 배치. 사이즈 변동 없음.
  • fill: 객체를 컨테이너의 크기만큼 수직/수평 확대하여 컨테이너를 완전히 꽉 채우도록 함.
  • clip_vertical: 객체의 상하 길이가 컨테이너보다 클 경우. 위아래로 튀어나오는 부분을 잘라냄. top|clip_vertical의 경우 아래쪽에 튀어나오는 객체가 잘려짐. bottom|clip_vertical의 경우 위쪽에 튀어나오 객체가 잘려짐. center_vertical|clip_vertical의 경우 위, 아래 튀어나온 부분 모두 잘림.
  • clip_horizontal: 객체가 좌우 길이가 컨테이너보다 클 경우, 좌우로 튀어나오는 부분을 잘라냄. right|clip_horizontal의 경우 왼쪽으로 튀어나온 부분이 잘리며, left|clip_horizontal의경우 오른쪽으로 튀어나온 부분이 잘린다. center_horizontal|clip_horizontal의 경우 컨테이너 좌우로 튀어나온 부분 모두 잘라냄.

 

 



5. Padding 

  • 모든 위젯은 위젯 셀(cell)이라는 타 위젯이 침범할 수 없는 독립된 공간을 가지며, 위젯 셀의 내부 벽으로부터 실제 위젯까지의 길이를 padding이라고 한다.
  • 위젯과 위젯 사이의 여유공간 설정하는데 사용됨.
  • 예를 들어 위젯 A, B의 padding이 모두 5px라면 둘을 나란히 배치 했을 때 두 위젯간의 거리는 10px가 됨.
  • padding을 그림으로 설명하면 다음과 같다.


  • android:padding은 상하좌우 여백에 대해 모두 같은 padding값을 설정 함. 설정 값은 "상수 + 단위". (ex. "5px", "6dp" 등)
  • android:paddingTop(Bottom/Left/Right)는 해당 위치의 여백을 '상수 + 단위' 로 설정.


Padding 예제 (main.xml)

소스 펼치기


실행화면은 다음과 같다.


 

LinearLayout에 대해 자세한 사항은 다음 API Reference 링크 참조.

LinearLayout API Reference 링크

 





2. Java Code 에서 LinearLayout 속성의 변경

위에서 소계된 5가지의 LinearLayout element 속성 중 Java code 내부에서 method로 제어 할 수 있는 속성은 다음과 같다.

  • setOrientation(int):  LinearLayout.HORIZONTAL 또는 LinearLayout.VERTICAL 을 인자로 전달해서 LinearLayout의 orientation 속성을 제어.
  • setGravity(int): Gravity.LEFT/Gravity.CENTER/Gravity.RIGHT 등 Gravity class에 정의된 상수를 인자로 전달하여 LinearLayout의 gravity속성을 제어.
  • setPadding(int, int, int, int): left, top, right, bottom 순 (left부터 시계방향)으로 int형 값(단위는 픽셀)을 인자로 전달해 widget cell의 padding 속성을 제어.

Java code내부에서의 LinearLayout 속성 사용 예제 (main.xml)

소스 펼치기


Java code내부에서의 LinearLayout 속성 사용 예제 (MyLinearLayout.java)

소스 펼치기



다음은 실행결과이다. RadioButton선택에 따라 orientation과 gravity가 변하는것을 볼 수 있다.








저작자 표시 비영리 변경 금지
신고
Posted by 무한만족 i티거