[Kotlin] LinearLayout

[Kotlin] LinearLayout

뷰는 위젯이라고 하기도 한다.

 

< LinearLayout 배치 규칙 >

LinearLayout은 뷰를 가로나 세로 방향으로 나열하는 레이아웃이다. 위젯의 배치 방향을 어떻게 정할지 설정해준다. orientation 속성에 horizontal(수평)이나 vertical(수직) 값으로 방향을 지정한다. LinearLayout을 중첩시킬 수 있다.

 

android:orientation="vertical"

 

 

< 숫자 다이얼 만들기 >

루트 LinearLayout 방향과 다른 방식으로 다이얼을 배치하려면 또다른 LinearLayout을 설정하면 된다.

 

1) [개별적 배치] vertical LinearLayout 1개에  horizontal LinearLayout을 3개씩 묶어 배치시킬 수 있다.

2) [표배치] GridLayout 테이블 형식으로 배치해 더 이쁘게 표현 가능하다.

 

 

< 여백을 채우는 layout_weight 속성 >

뷰 1개로 전체 여백 채우기

여백을 뷰로 채우려면 layout_weight 속성을 사용해야한다.

 

뷰 여러 개로 여백을 나누어 채우기

- layout_weight 속성에 지정한 숫자는 가중치이다.

 

 

1. Linearlayout 하위 뷰에 layout_weight 속성이 하나만 설정되어 있을 때

나머지 뷰들은 원래대로 배치하고, 1로 설정한 뷰만 나머지 너비를 다 차지한다.

android:layout_weight="1"

 

2. Linearlayout 하위 뷰에 layout_weight 속성이 여러개 설정되어 있을 때

layout_weight 값을 각각 1과 3으로 선언했다면 가로 여백을 각각 1/4만큼, 3/4만큼 나누어 차지한다.

<LinearLayout
	android:orientation="horizontal">
    <Button
        android:layout_weight="1"/>
    <Button
        android:layout_weight="3"/>
</LinearLayout>

 

3. 여러 TextView가 묶여있는 Linearlayout에 layout_weight를 설정

폰 화면에 남아있는 공백을 해당 Linearlayout이 모두 차지하게 된다.

폰 화면에 여백이 남지 않도록 한다.

<Linearlayout
   android:layout_weight="1"
   <TextView />
   <TextView />
   <TextView />
</Linearlayout>

 

4. 여러 TextView가 묶여있는 여러 Linearlayout에 layout_weight를 설정

폰 화면에 남아있는 공백을 여러 Linearlayout이 나눠서 차지하게 된다.

아래 예제에서는 50:50 비율로 나눠 갖는다. 폰 화면에 여백이 남지 않도록 한다.

<Linearlayout
   android:layout_weight="1"
   <TextView />
   <TextView />
   <TextView />
</Linearlayout>
<Linearlayout
   android:layout_weight="1"
   <TextView />
   <TextView />
   <TextView />
</Linearlayout>

 

 

< 뷰를 정렬하는 gravity, layout_gravity 속성 >

gravity : 콘텐츠를 정렬하는 속성

layout_gravity : 뷰 자체 정렬하는 속성

<TextView
   android:gravity="right|bottom"
   android:layout_gravity="center_horizontal" />

 

 

LinearLayout에 있는 모든 콘텐츠를 중앙 정렬 시키기

<LinearLayout
   android:grabity="center_horizontal"
</LinearLayout>