안드로이드 스튜디오 레이아웃 LinearLayout과 RelativeLayout

xml에서 LinearLayout과 RelativeLayout을 알아보겠습니다.

 

편의를 위해 RealativeLayout먼저 설명하자면 RelativeLayout은 요소들의 관계를 지정해 줘야합니다.

이게 무슨말이냐면

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        android:textSize="30sp"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        android:textSize="40sp"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        android:textSize="50sp"
 
        />
 
</RelativeLayout>
 

위와 같이 RelativeLayout에 TextView를 세개 넣어보면 다음과 같이 나옵니다.

요소들간의 관계를 지정해주지 않으면 각각 요소는 다른 요소들은 신경도 쓰지 않습니다.

 

관계를 지정하려면 요소에 id를 지정해 줍시다.

두번째 TextView에 android:id="@+id/text_2" 를 넣어줍니다

 

 

2가 정 가운데로가고 1과 3이 그 옆에 있도록 해보겠습니다.

 

먼저 두번째 TextView에 android:layout_centerInParent="true" 를 넣어서 정 가운데로 가게합니다.

이는 이 요소의 부모 즉, LinearLayout에서 가운데로 레이아웃 시킬 것을 의미합니다.

 

1과 3이 옆에 있도록 하는 것은 layout_toLeftOf와 layout_toRigthOf를 이용하면 되는데 이들은 id를 받아서 해당 요소의 왼쪽과 오른쪽에 레이아웃 시키는걸 의미합니다.

 

그래서 각각 android:layout_toLeftOf="@id/text_2" 와 android:layout_toRightOf="@id/text_2" 을 넣어주면

왼쪽과 오른쪽으로 가긴했는데 생각했던 것과는 조금 다릅니다.

저렇게 코드를 입력하면 우리가 생각하는 것처럼 바로 옆이 아닌 그냥 가운데를 갈라놓고 봤을때 왼쪽 오른쪽이게끔 레이아웃 됩니다.

 

이를 해결하기 위해 1과 3에 android:layout_centerVertical="true" 를 넣어줍니다.

이는 요소가 수직의 가운데에 위치하도록 합니다.

이렇게 해주면 생각 했던데로 요소들이 레이아웃 됩니다.

 

1과 3을 2의 위아래로 레이아웃 하려면 같은 방식에서 android:layout_above="@id/text_2" android:layout_below="@id/text_2" 를 사용하면 됩니다.

 

LinearLayout은 요소들의 관계를 지정할 수 없고 각각 요소가 다른 요소들을 무시하지 않습니다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        android:textSize="30sp"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        android:textSize="40sp"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        android:textSize="50sp"
 
        />
 
</LinearLayout>

RelativeLayout만 LinearLayout으로 바꿔봤습니다.

Relative에선 겹쳐 보였는데 Linear에선 나란히 정렬됩니다.

 

LinearLayout에선 android:orientation="vertical"로 정렬이 수직으로 되게 할 수 있습니다.

 

그리고 화면 분할을 할 수 있는데

LinearLayout에 android:weightSum="9"을 넣고

각 요소에 android:layout_weight="3"을 넣어 봅시다.

이는 전체 너비를 9로보고 각요소에게 3씩 공간을 준다는 의미입니다.

분할이 수직으로 된 것은 아까 orientation을 vertical로 해줬기 때문이죠.

 

틀린 부분 지적해주시면 감사하겠습니다.

이 글은 유튜브 센치한 개발자님의 안드로이드 스튜디오 기초강의를 공부한 내용입니다.

https://youtu.be/epFRtZ17yow