2_안드로이드UI

Size: px

Start display at page:

Download "2_안드로이드UI"

도연 창
5 years ago
Views:

1 03 Layouts

2 레이아웃 (Layout) u ViewGroup의파생클래스로서, 포함된 View를정렬하는기능 u 종류 LinearLayout 컨테이너에포함된뷰들을수평또는수직으로일렬배치하는레이아웃 RelativeLayout 뷰를서로간의위치관계나컨테이너와의위치관계를지정하여배치하는레이아웃 TableLayout 표형식으로차일드를배치하는레이아웃 FrameLayout 컨테이너에포함된뷰들을전부좌상단에배치하는레이아웃

3 LinearLayout u 자식뷰를수평, 수직으로일렬배치하는레이아웃으로, 가장단순하고직관적이며사용빈도가높다. u Attributes orientation vertical : 차일드를위에서아래로수직으로배열 horizontal : 차일드를왼쪽에서오른쪽으로수평배열 버튼 1 버튼 1 버튼 2 버튼 3 버튼 2 버튼 3 [ vertical ] [ horizontal ]

LinearLayout u Attributes layout_weight 자식뷰들을배치하고남은공간을 layout_weight 값을기준으로공간을할당 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical

4 LinearLayout u Attributes layout_weight 자식뷰들을배치하고남은공간을 layout_weight 값을기준으로공간을할당 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical android:background="#aa00ff"> android:text="button 1" android:id="@+id/button1"/> android:text="button 2"/> android:text="button 3"/> </LinearLayout>

<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:orientation="vertical" android:background="#aa00ff">

5 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:orientation="vertical" android:background="#aa00ff"> android:text="button 1"/> android:text="button 2"/> android:text="button 3"/> </LinearLayout> <LinearLayout android:orientation="horizontal" android:background="#00aaff"> android:text="button 4"/> android:text="button 5"/> android:text="button 6"/> </LinearLayout> </LinearLayout>

6 RelativeLayout u 위젯끼리의관계를지정하거나위젯과 parent(container) 와의관계지정하여자식뷰를배치 u Attributes 상수 설명 anchor_view 의 id 를지정 위젯끼리의관계지정 Parent 와의관계지정 layout_alignbaseline anchor view와 baseline을맞춘다. layout_alignbottom/top anchor view와아래쪽 / 위쪽가장자리를맞춘다. layout_alignleft/right anchor view와왼쪽 / 오른쪽가장자리를맞춘다. layout_above/below anchor view의위쪽 / 아래쪽에배치 layout_toleft/rightof anchor view의왼쪽 / 오른쪽에배치 layout_centerhorizontal/veritcal 수평 ( 혹은수직 ) 방향으로컨테이너의가운데배치 layout_centerinparent 컨테이너의가운데배치 layout_alignparentleft/right 컨테이너와왼쪽 ( 혹은오른쪽 ) 가장자리를맞춘다. layout_alignparentbottom/top 컨테이너와아래쪽 ( 혹은위쪽 ) 가장자리를맞춘다.

7 RelativeLayout <RelativeLayout android:layout_width="match_parent" android:layout_height="0dp" android:background="#aa00ff"> android:text="button 1" android:layout_alignparenttop="true" android:layout_alignparentright="true" android:text="button 2"/> android:layout_alignparentright="true" android:text="button 3"/> </RelativeLayout>

8 TableLayout u 표형식으로차일드를배치하는레이아웃 u TableLayout 표를구성하는행의개수만큼 TableRow 를포함하고, TableRow 는각행에포함된셀 (View) 을포함한다. Attributes stretchcolumns: 늘릴열을지정 ( 인텍스는 0 부터시작됨 ) - * : 모든열을늘여서배치한다. - 1, 2 : 1 열 ( 왼쪽에서 2 번째 ) 과 2 열 ( 왼쪽에서 3 번째 ) 을늘여서배치한다 u TableRow 정해진규칙에따라크기가결정되므로, layout_width/height 를지정할필요가없다. layout_height 는항상 wrap_content layout_width 는항상 match_parent

TableLayout <TableLayout android:layout_width="match_parent" android:layout_height="0dp" android:stretchcolumns="0" android:background="#00aaff"> <TableRow> android:text="button 4"/>

9 TableLayout <TableLayout android:layout_width="match_parent" android:layout_height="0dp" android:stretchcolumns="0" android:background="#00aaff"> <TableRow> android:text="button 4"/> android:text="button 5"/> </TableRow> <TableRow> android:text="button 6"/> </TableRow> </TableLayout>

10 FrameLayout u 모든자식 View는좌상단에배치되며, 여러개의자식View를포함하는경우나열된순서대로겹쳐져서표시됨 <FrameLayout android:layout_width="match_parent" android:layout_height="0dp" android:background="#ff0000"> android:layout_width="100dp" android:text="button 7" /> android:layout_width="100dp" android:text="button 8" /> android:layout_width="100dp" android:text="button 9" /> </FrameLayout> - L58-L78

리니어레이아웃 - 2 -

4 차시레이아웃 1 학습목표 레이아웃의개념을이해한다. 중복리니어레이아웃의개념이해한다. 2 확인해볼까? 3 레이아웃개념익히기 1) 학습하기 [ 그림 4-1] ViewGroup 클래스계층도 리니어레이아웃 - 2 - [ 예제 4-1]orientation 속성-horizontal 1