[안드로이드] 레이아웃(1) - LinearLayout(리니어 레이아웃)

안녕하세요 ! 초보개발자 입니다. 

이 블로그는 개인 공부 정리용 블로그 입니다. 

혹 잘못된 내용이 있다면 지적 부탁드리겠습니다.

그리고 질문주신다면 최대한 아는선에서 답변드리도록 하겠습니다.

그럼 시작하도록 하겠습니다.

---

레이아웃을 설명 하기 위해서는 뷰와 뷰그룹이 무엇인지 알아야 합니다. 

먼저 뷰는 위젯이라는 이름으로 불리는 UI 요소입니다. 즉 눈에 보이는 화면의 구성 요소들을 뜻 합니다. 그리고 뷰그룹은 앞에서 설명한 여러개의 뷰들을 포함한 것을 말합니다. 그렇다면 레이아웃이란 무었일까요 ? 

레이아웃은 뷰그룹 중에서 자주 사용하는 뷰의 배치 방식을 정의한 것이라고 할 수 있습니다. 안드로이드에서 제공하는 레이아웃은 리니어 레이아웃,상대 레이아웃, 프레임 레이아웃, 테이블 레이아웃, 스크롤 뷰 , 그리고 안드로이드 스튜디오 2.2에서 새롭게 선보인 제약 레이아웃으로 나눌 수 있습니다. 그 중에서 먼저 리니어 레이아웃에 대해서 알아보겠습니다.

LinearLayout (리니어 레이아웃)

리니어 레이아웃의 기본 속성은 다음과 같습니다. android:layout_width 속성과 android:layout_height 속성, android:orientation 의 속성은 기본으로 지정 해 주어야 합니다.

layout_width, layout_height 의 값은 match_parent 와 wrap_parent 중 하나의 값을 가집니다. match_parent는 무조건 남아 있는 여유공간을 채우고

wrap_content는 뷰에 들어 있는 내용물의 크기에 따라 뷰의 크기를 정합니다.

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

android:orientation 속성은 리니어 레이아웃에서 없어서는 안될 속성입니다. orientation 의 값은 vertical 값과 horizontal 값이 있습니다. vertical 값은 세로로 정렬 하는 것이고 horizontal 은 가로로 정렬한다는 뜻입니다.

예제를 통하여 보도록 하겠습니다.

<?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"
    android:orientation="vertical">
 
 
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />
 
    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />
 
    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

위의 예제에서 리니어 레이아웃의 width와 height의 값이 match_parent 값입니다. 그렇다면 화면 전체를 LinearLayout으로 채운다는 뜻입니다. 방향은 vertical 값이기 때문에 세로로 설정한 것을 알 수 있습니다. 그렇다면 위의 결과는 어떻게 나올까요 ?

예상한대로 나오시나요 ? 그렇다면 LinearLayout의 orientation 속성을 horizontal로 바꾸어 보겠습니다. 바꾸고 나서 결과값을 살펴보면 

분명히 세개의 버튼을 넣었는데 하나만 나온 것을 알 수 있습니다. 그 이유는 버튼의 width 의 값을 match_parent로 하였기 때문입니다.3개의 버튼의 width속성이 모두 match_parent 이기 떄문에 첫번째 버튼이 부모 컨테이너의 공간을 모두 차지하여 여유공간이 없어서 두개의 버튼이 공간을 차지하지 못하게 된 것입니다. 그래서 버튼의 width값을 wrap_parent값으로 바꾸어서 보겠습니다.

width의 값을 wrap_parent 값으로 바꾸었더니 정상적으로 화면에 나타난 것을 볼 수 있습니다. 버튼이 가로로 나타난 것의 이유는 무엇일까요? 그 이유는 LinearLayout의 orientation 값이 horizontal 이기 때문입니다. vertical 이었다면 저 3개의 버튼이 세로로 나타났을 것입니다. 다음은 layout_gravity 속성과 gravity 속성을 알아보도록 하겠습니다.layout_gravity 는 부모컨테이너의 여유 공간에 뷰가 모두 채워지지 않아 여유공간안에서 뷰를 정렬할 때 사용하는 속성입니다. gravity속성은 뷰에서 화면에 표시하는 내용물을 정렬할 때 사용되는 속성 입니다. 예제를 한번 살펴 보도록 하겠습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<?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"     android:orientation="vertical" >         <Button         android:id="@+id/button"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="left"         android:text="Button" />       <Button         android:id="@+id/button2"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:text="Button" />       <Button         android:id="@+id/button3"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="right"         android:text="Button" /> </LinearLayout>

먼저 LinearLayout의 orientation 속성이 vertical 이므로 3개의 버튼을 세로로 정렬 할 것입니다. 그리고 세개의 버튼 width와 height 속성이 모두 wrap_content 이므로 부모 컨테이너의 여유공간에 모두 채워지지 않는것을 알 수 있습니다.

그리고 첫번째 버튼의 layout_gravity 은 left값 두번째 버튼은 center 세번째 버튼은 right 값입니다. 한번 어떻게 화면에 출력 될지 예상해보세요.

예상하던데로 나오셨나요 ? 그렇다면 이제 gravity 속성에 대해서 알아보도록 하겠습니다.

gravity속성은 뷰에 보이는 내용물을 정렬하는데 사용 됩니다. 예를 들면 바로 위의 결과 값의 버튼안에 text를 의미합니다. 버튼안의 text는 button이라고 되어 있습니다.

예제를 살펴 보겠습니다.

<?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"
    android:orientation="vertical"
>
 
 
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:text="Button" />
 
 
</LinearLayout>
 

버튼의 width값을 match_parent 이기 때문에 버튼은 가로로 가득 채워 질 것입니다. 버튼의 gravity 속성이 letf입니다. 그렇다면 위에서 설명한대로 text 값이 왼쪽으로 정렬이 될 것입니다. 결과를 확인해 보겠습니다.

예상대로 나온 것을 확인해 볼 수 있습니다. 그렇다면 직접 gravity 속성을 바꾸어서 결과를 확인해 보시기 바랍니다.

다음은 margin 속성과 padding 속성에 대해서 알아 보도록 하겠습니다.

먼저 margin 이란 위젯과 부모 컨테이너의 여유공간에서 위젯이 차지하는 공간과 간격을 지정하는데 사용 됩니다. 예제를 보겠습니다.

<?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"
    android:orientation="vertical"
>
 
 
    <Button
        android:layout_marginTop="30dp"
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
 
 
</LinearLayout>
 

버튼의 marginTop 의 값을 30dp로 설정해 주었습니다. margin은 위젯과 부모 컨테이너의 간격을 설정한다고 하였습니다. marginTop는 영어그대로 위쪽의 간격을 30dp 만큼 준다는 뜻입니다. 그렇다면 margin과 부모컨테이너인 LinearLayout과의 위쪽 간격이 30dp 만큼 떨어 질 것 입니다.

결과를 보도록 하겠습니다.

예상한 것과 같이 위쪽과 30dp 만큼 띄워진 것을 알 수 있습니다. 왼쪽을 띄우고 싶으면 marginLetf, 아래는 marginBotton, 오른쪽은 marginRight 속성을 이용 하시면 됩니다.

다음은 padding속성에 대해서 알아보겠습니다. padding 속성은 뷰안의 내용물의 간격을 설정하는데 사용 됩니다. 예제를 보도록 하겠습니다.

<?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"
    android:orientation="vertical"
>
 
 
    <Button
        android:paddingTop="30dp"
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
 
 
</LinearLayout>
 

버튼의 paddingTop 값을 30dp로 주었습니다. 그렇다면 버튼 안의 텍스트가 버튼 외각선의 위쪽과 30dp만큼 간격이 벌어진 것을 예상 할 수 있을 것입니다.

예상대로 나온것을 알 수 있습니다. padding 속성도 margin과 마찬가지로 paddingTop,paddingLeft,paddingRight,paddingBotton 속성으로 지정 할 수 있습니다.

이상으로 LinearLayout에 대해서 알아 보았습니다. 

오늘 배운 내용을 바탕으로 직접 소스를 바꿔가며 연습해 보시면 좋을 것 같습니다. 

수고하셨습니다.