[안드로이드 스튜디오 강좌 #9]리니어 레이아웃(Linear Layout)-4 뷰의 마진과 패딩 설정하기/layout_weight

! 목표

1. 위젯의 내부공간인 마진과, 뷰의 내부공간인 패딩을 알아보고, 설정해보자

2. 뷰를 여유 공간을 정해진 비율로 나눠 크기를 설정해주는 layout_weight에 대해서도 알아보자.

 

 

 

1. 마진, 패딩

뷰의 내부공간을 너무 띄우지 않으면 보기가 불편하고 깔끔하지 않을 수 있다.

깔끔하게 어플을 만들 수 있도록, 공백 공간를 설정하는 마진, 패딩에 대해서 알아보자

 

-셀(cell) : 뷰의 테두리 안, 바깥을 포함한 뷰의 공간, 버튼이나 텍스트뷰를 위젯이라고 하기 떄문에 이 공간을 위젯 셀(Widget Cell)이라고도한다.

 

-마진(margin) : 테두리선을 기준으로 바깥쪽 공간을 마진이라고 한다.

layout_margin 속성으로 간격을 조절할 수 있다.

 

-패딩(padding) : 테두리선 안쪽 공간을 패딩이라고 한다. 뷰의 테두리와 텍스트나 이미지의 간격이라고도 할 수 있다.

padding 속성으로 간격을 조절할 수 있다.

 

 

 

-XML 코드 수정

코드에 padding, layout_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">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="#ff0000"
        android:textSize="40sp"
        android:background="#fff000"
        android:padding="15dp"/>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="#00ff00"
        android:textSize="24sp"
        android:background="#ff0ff0"
        android:layout_margin="10dp"/>

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="TextView"
        android:textColor="#0000ff"
        android:padding="10dp"
        android:background="#0ff00f"
        android:layout_margin="5dp"/>
</LinearLayout>

*android:padding="(num)dp"*으로 패딩값을 설정해주었고,

*android:layout_margin="(num)dp"*으로 마진을 설정해주었다

 

결과를 확인하기 쉽게

*android:background="#색상"*으로 배경을 설정해주었다.

 

 

결과를 확인해보면,

 

처음 패딩만 설정했던 텍스트뷰는 부모레이아웃과 붙어있는 모습을 볼 수 있다. 안의 텍스트 내용과 뷰의 테두리에 패딩이 되어 있다.

두번째 텍스트 뷰는 패딩 값을 설정하지 않고 마진값만 설정했다. 텍스트 크기가 뷰의 테두리에 딱 맞게 있고, 옆의 텍스트뷰와 마진만큼의 거리를 가지고 있다.

세번쨰 텍스트 뷰는 패딩값과 마진 값이 모두 설정되어 있는데, 안의 텍스트와 테두리가 패딩이 되어있고, 테두리 바깥의 공간도 마진이 있는 것을 확인할 수 있다.

 

 

처음 텍스트뷰의 패딩을 40dp으로 변경해보자

 

맨 마지막 텍스트뷰의 모양이 이상하게 변형된 것을 볼 수 있다.

맨 마지막 텍스트뷰의 여유공간이 부족해 아래쪽으로 밀리는 현상이 발생되었다.

모양이 밀리지 않게 하기 위해, Padding이나 Layout_Margin 속성을 지정할 때 남은 공간이 충분한지를 꼭 고려해줘야 한다.

 

 

 

 

 

2. 여유 공간을 분할하는 layout_weight 속성

 

부모 컨테이너에 추가된 뷰들을 제외한 여유 공간은 layout_weight 속성으로 분할이 가능하다.

남은 여유 공간을 분할 비율 만큼 나누어서 해당 뷰한테 할당한다.

(ex) 1:2 비율이면 여유공간을 1/3, 2/3 만큼 여유공간을 분할하여 나눠 갖는다.

 

layout_width나 layout_height로 지정하는 뷰의 크기는 wrap_content나 숫자값으로 지정되야한다.

 

 

-layout_weight 속성을 실습해보자

/app/res/layout 폴더 안에 weight.xml 파일을 만들자.

최상위 레이아웃은 LinearLayout(vertical)로 지정하고

추가하는 레이아웃은 LinearLayout(horizontal)로 지정해보자.

(디자인 화면 : Palette-Layouts-LinearLayout(horizontal))

 

XML 코드

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#ff0000"
            android:text="TextView" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#00ff00"
            android:text="TextView" />

    </LinearLayout>
</LinearLayout>

 

그 후에 2개의 textview를 추가하고,

보기 쉽도록 배경색도 설정해보자.

layout_weight 가중치를 모두 1로 설정하자.

 

 

TextView가 일대일로 나눠진 것을 확인할 수 있다.

 

 

LinearLayout(horizontal)을 하나 추가해준뒤 textview를 2개 추가하고, layout_weight 가중치를 2:1로 설정해보자

서로 2/3씩, 1/3씩 분할된 것을 확인할 수 있다.

 

 

하지만 길이가 완전히 2/3, 1/3이 아닌것을 확인할 수 있다.

남은 공간을 분할한 것이기 때문에 그렇다.

 

만약 완전히 2/3, 1/3의 크기를 가지고 싶으면,

android:layout_width="0dp"

로 설정하면 된다.

밑에가 실제 2:1로 분할된 모습

 

이제 리니어 레이아웃 부분이 끝났다.

앞으로 상대 레이아웃, 테이블 레이아웃, 프레임 레이아웃에 대해서 더 공부해보자.

 

 

## 이 글은 허락을 받아 Do it 안드로이드 앱 프로그래밍을 참고해서 작성되었습니다.

공부를 하며 개인용으로 정리하는 것이기 때문에 틀린 부분이 있을 수도 있습니다.

도서에는 더 자세하고 알기 쉽게 설명이 되어 있어 도서를 참고하면서 공부하는 것을 추천드립니다.

도서 정보 : http://www.yes24.com/Product/Goods/15789466

Do it! 안드로이드 앱 프로그래밍

유투브 강의 : https://www.youtube.com/watch?v=nN4xnEcnjE8