선형 레이아웃 Linear Layout

부모 뷰가 될 수 있는 View Component 중 하나인 Layout 중에서 Linear Layout에 대해 알아봅니다.

 

우선 해당 코드를 먼저 확인합니다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="만나서 반갑습니다"
        android:textSize="20dp" />

    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="right"
        android:gravity="left|center"
        android:text="환영합니다" />

</LinearLayout>

에뮬레이터 실행 결과

전체적인 레이아웃을 LinearLayout으로 잡아주고, 안에 자식 뷰인 TextView를 사용했습니다.

안드로이드에서 위치/방향을 움직이기 위해서는 Gravity라는 속성을 이용합니다.

여기서 Gravity와 Layout_Gravity 두 종류가 있습니다.

반응형

Gravity는 부모 뷰 안에 있는 객체들을 움직일 수 있으며, Layout_Gravity는 해당 속성을 가진 자식 뷰에만 적용됩니다.

부모 뷰에서 전체적인 레이아웃을 잡을 때, Gravity 속성을 Center로 잡았습니다. 이는 모든 자식 뷰의 위치를 센터로 설정하는 것과 같습니다.  하지만, '환영합니다' 문구와 같이, 자식 뷰에 Layout_Gravity 속성을 넣어주면, 해당 속성이 우선하게 됩니다. 자식 뷰의 문구가 Right, 즉 오른쪽 방향으로 변경된 것을 확인할 수 있습니다.

 

자식 뷰 내에서 Gravity와 Layout_Gravity를 동시에 잡아도 Layout_Gravity 속성이 우선 적용됩니다. 어떤 속성값을 모두 적용하고 싶을 때는 Vertical Bar( | ) 키워드를 사용해서 속성값 두 가지를 넣어 줄 수 있습니다.

 

다음의 예를 또 살펴 봅니다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">   
   
   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:weightSum="10"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:background="#FFEB3B"
            android:text="바나나"
            android:textSize="20dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#FF5722"
            android:text="오렌지"
            android:textSize="20dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#E91E63"
            android:text="딸기"
            android:textSize="20dp" />

    </LinearLayout>

</LinearLayout>

에뮬레이터 실행 결과

위의 예문과 같이, LinerLayout 안에 또 LinearLayout을 잡아줄 수 있습니다.

해당 예문에서 알아야 할 부분은 Weight 속성입니다. 해당 속성은 값을 할당해주는 비율로 이해하면 쉽습니다.

부모 뷰의 LinearLayout에서 WeightSum을 지정할 수도/지정하지 않을 수도 있는데, 지정한 경우라면 지정된 숫자(10) 내에서 자식 뷰들의 Layout_Weight이 어느 정도 차지할지 계산됩니다. 여기서 바나나는 3, 오렌지, 딸기는 각각 10 전체 중에 1의 비율씩 차지하고 있습니다. 부모의 전체 비율 차체가 10이기에 나머지는 흰색 빈 공간으로 되어 있습니다.

 

만약 부모 뷰에서 WeightSum을 지정하지 않았다면, 자식 뷰가 차지하는 비율은 다음과 같습니다.

부모의 비율 전체에서 바나나 3, 오렌지와 딸기가 각각 1의 비율씩 차지하도록 할당됩니다.