안드로이드 독학 4일차 : Layout

내 개인적으로 xml에서 가장 알아야 할 부분이 이 부분이 아닐까 싶다.

 

레이아웃은 뷰들을 담는 뷰 그룹이다.

그래서 레이아웃의 설정을 어떻게 하느냐에 따라서 각각의 뷰들의 위치가 바뀔 수도 있다.

 

html로 따지자면 약간 div 개념인 거 같다.

 

레이아웃에는 아래 표처럼 여러 가지가 있다.

LinearLayout	자식들을 수직이나 수평으로 배치
TableLayout	자식을을 테이블 형태로 배치
GridLayout	자식들을 바둑판 모양으로 배치
RelativeLayout	자식들을 부모나 다른 자식에 상대적으로 배치
ConstraintLayout	자식들을 부모나 다른 자식에 상대적으로 배치
TabLayout	탭을 ㅣ용하여서 겹쳐진 자식중에서 하나를 선택
AbsoluteLayout	절대 위치로 배치
FrameLayout	모든 자식들을 겹치게 배치

이 중에서 나는 LinearLayout과 TableLayout 그리고 RelativeLayout에 대해서 얘기해주겠다.

 

1. LinearLayout

LinearLayout이 제공하는 속성들은 크게 3가지이다.

속성	설정 메소드	설명
orientation	setOrientation(int)	자식들을 수직 아님 수평을 배치할지 결정 짓는 요소
gravity	setGravity(int)	안의 자식들을 어떻게 배치할지 지정하는 요소
baselineAligned	setBaselineAligned(boolean)	자식 뷰들의 기준선을 정렬하는 부분

 

gravity속성에는 여러 가지가 있다.

나는 gravity 속성과 관련해서는 아래 블로그를 참조했다

freehoon.tistory.com/24

[안드로이드] gravity 속성

선형 레이아웃에는 이밖에도 layout_weight라는 속성을 가지고 있다.

이건 이제 해당 레이아웃에서 자식 뷰를 어느 정도 크기를 줄지 지정하는 부분 인대 

layout_weight의 값이 크면 클수록 해당 레이아웃에서 자식의 크기가 커진다.

 

아래 예제를 통해서 한번 보자

 

       <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="">
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@color/colorAccent"
                android:gravity="center"
                android:text="가중치 1" />
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#CDDC39"
                android:gravity="center"
                android:text="가중치 2" />
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#FF5722"
                android:text="가중치 3" />
 
        </LinearLayout>

이렇게 layout_weight의 값을 똑같이 1로 주면 

이렇게 자식 3개가 일정한 크기로 나누어진다. 이 중 하나라도 값이 컸다면 큰 거는 큰 거대로 크게 나왔을 것이다.

 

 

2. TableLayout

테이블 레이아웃은 레이아웃 안의 자식들을 테이블 형태로 배치한다는 것이다.

html에서 <tr> 안에 <td>가 있었듯이 이것도 마찬가지로 

<TableRow>라는 행안에 뷰들을 집어넣으면 열 형식으로 들어가게 된다

 

아래 예제를 통해서 한번 보자

       <TableLayout
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:gravity="center">
 
            <TableRow android:gravity="center">
 
                <Button android:text="버튼1" />
 
                <Button android:text="버튼2" />
 
                <Button android:text="버튼3" />
            </TableRow>
 
            <TableRow android:gravity="center">
 
                <Button android:text="버튼4" />
 
                <Button android:text="버튼5" />
 
                <Button android:text="버튼6" />
            </TableRow>
 
            <TableRow android:gravity="center">
 
                <Button android:text="버튼7" />
 
                <Button android:text="버튼8" />
 
                <Button android:text="버튼9" />
            </TableRow>
        </TableLayout>

이렇게 만들게 되면 

이런 형식으로 나오게 된다.

 

3. RelativeLayout

상대적 레이아웃은 레이아웃 안에서의 자식의 위치들은 자식의 위치에 따라서 지정할 수 있게 만드는 부분이다.

 

상대적 레이아웃의 속성은 

 

blowmj.tistory.com/entry/Android-RelativeLayout-%EC%86%8D%EC%84%B1

[Android] RelativeLayout 속성

위의 블로그를 참조해서 보면 된다. 

내가 직접 해본 예제는 아래와 같다. 

 

      <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
 
            <Button
                android:id="@+id/cancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/editAdd"
                android:layout_alignParentRight="true"
                android:text="취소" />
 
            <Button
                android:id="@+id/confirm"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignTop="@id/cancel"
                android:layout_toLeftOf="@id/cancel"
                android:text="확인" />
 
            <EditText
                android:id="@+id/editAdd"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/addTitle" />
 
            <TextView
                android:id="@+id/addTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="주소를 입력하세요" />
        </RelativeLayout>

각자의 ID에 맞게 위치를 지정해서 나온 결과는 아래와 같다.

이걸 보면 상대적 레이아웃이 어떤 식으로 되는지 감이 올 것이다.