#7 안드로이드 스튜디오로 안드로이드 앱 만들기 - 레이아웃(Layout)을 활용한 다양한 뷰(View) 배치 : LinearLayout편

#1 안드로이드 스튜디오로 안드로이드 앱 만들기 - 개발 환경 구축

#2 안드로이드 스튜디오로 안드로이드 앱 만들기 - 개발 디렉토리와 파일 구조

#3 안드로이드 스튜디오로 안드로이드 앱 만들기 - 액티비티(Activity) 뷰(View) 구조

#4 안드로이드 스튜디오로 안드로이드 앱 만들기 - UI 작성 방법 : 자바코드 VS 레이아웃 XML

#5 안드로이드 스튜디오로 안드로이드 앱 만들기 - 뷰(View)의 기초 속성

#6 안드로이드 스튜디오로 안드로이드 앱 만들기 - 뷰(View)의 계층구조

안드로이드 UI 프로그램에서는 화면 구성을 위한 Button, TextView, ImageView 등의 뷰 클래스들도 중요하지만, 해당 뷰들을 화면에 어떻게 배치할 것인가도 중요하다. 

화면을 하나의 뷰로 구성하지 않고 다양한 뷰를 조합하여 구성하므로 뷰 배치는 UI 프로그램에서 중요한 부분이다. 따라서 레이아웃 클래스를 얼마나 잘 이해하고 사용할 수 있는지가 UI 프로그램을 작성할 때 얼마나 쉽게 가느냐, 고생하면서 가느냐에 영향을 미치게 된다.

레이아웃 클래스는 다음과 같다. 특히 활용빈도가 높은 LinearLayout과 RelativeLayout은 아주 중요하다. 또한, FrameLayout에서 탭 화면을 구성하는 TabHost도 중요하다.

■ LinearLayout

■ RealtiveLayout

■ FrameLayout

■ TableLayout

■ GridLayout

■ ContraintLayout

레이아웃 클래스가 여러 개 있는데, 어느 화면에 어떤 레이아웃 클래스를 이용해야하는지는 대부분 개발자 선택이다. 같은 화면이라도 개발자에 따라 선택하는 레이아웃이 다르다. 결국, 어떤 레이아웃을 이용해 뷰를 배치하는 것이 가장 편한지는 개발자가 선택해서 이용하면 된다.

LinearLayout 소개

가장 많이 이용되는 레이아웃 중 하나가 LinearLayout이다. LinearLayout은 해당 레이아웃에 포함된 뷰를 순서대로 가로나 세로 방향으로 나열해준다. 따라서 다른 레이아웃에는 없는 방향을 지정하는 orientation 속성을 제공한다.

<?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_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1"/>
 
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2"/>
 
</LinearLayout>
 

LinearLayout에 Button 두 개를 포함하였고, orientation 속성을 "vertical"로 지정하였으므로 두 버튼은 세로 방향으로 나열된다. 만약 orientation 속성을 "horizontal"로 바꾸어 테스트하면 버튼 두개가 바로 방향으로 나열 된다.

LinearLayout 중첩

이번에는 다음같이 카카오톡과 비슷한 레이아웃을 구성한다고 치자.

이와 같이 항목을 구성해야 한다면 프로필 사진을 위한 ImageView와 이름, 내용, 날짜를 위한 TextView 3개가 필요하다. 위 화면을 LinearLayout으로 구현 할 수 있을까 ? 여기서 중요한 것은 이름과 내용이 위아래로 나열되어있다는 점이다. 간단하게 생각하면 전체 뷰를 가로 방향으로 나열하고, 내용 TextView가 자동 개행되어 아래 방향으로 흐르면 될 것처럼 보인다.

하지만 LinearLayout은 자동 개행을 제공하지 않는다. 즉, 한번 가로 방향으로 지정하면 화면을 벗어나더라도 계속 가로로 나열된다. 그렇다면 LinearLayout만으로는 위와 같은 화면을 구성할 수 없는 걸까 ? LinearLayout을 하나만 사용하면 불가능하지만, 중첩하면 가능하다. 즉 레이아웃 클래스 하위에 다른 레이아웃 클래스를 배치하는 것이다.

목록 화면을 구성하기 위해 전체 LinearLayout을 가로 방향으로 설정하고, 그 하위에 ImageView, LinearLayout, TextView를 배치한다. 그리고 하위 LinearLayout은 세로 방향으로 설정하여 TextView 두 개를 배치하면 된다. 이처럼 레이아웃 클래스에 레이아웃 클래스를 중첩하는 식으로 화면을 구성하면 위의 예보다 더 복잡한 화면도 구현 할 수 있다.

LinearLayout 속성

■ gravity, layout_gravity

이 속성들은 LinearLayout에서 중요 속성이며 이용빈도도 높다.  gravity, layout_gravity 속성은 뷰의 정렬과 관련된 속성이다.

gravity, layout_gravity 두 속성은 모두 left, right, top, bottom 속성값 등을 설정할 수 있지만, 적용되는 대상은 다르다. gravity 속성은 뷰의 내용(content)을 뷰 영역 내에서 어디에 나타낼지를 설정하고 layout_gravity 속성은 뷰를 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"
    android:orientation="vertical">
 
    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:text="hello world !"
        android:background="#f00"
        android:textColor="#fff"
        android:layout_gravity="center_vertical|center_horizontal"
        android:gravity="bottom|right"/>
 
</LinearLayout>
 

위 화면을 보면 gravity="bottom|right" 속성에 따라 TextView 영역 내에서 문자열이 오른쪽 아래에 잘 나온다. 

그런데 layout_gravity="center_vertical|center_horizontal" 코드는 원하는 대로 정렬되지 않았다. 즉, TextView가 Linearlayout 영역 내에서 가로 방향으로는 가운데 정렬되었지만 세로 방향으로는 가운데 정렬되지 않았다.

이유는 LinearLayout은 방향에 따라 포함된 뷰를 차례대로 나열하므로 orientation 속성이 "vertical"이면, 세로 방향으로는 뷰가 포함된 순서대로 나열되어 세로 방향의 layout_gravity가 적용되지 않는다. 반대로 orientation속성이 "horizontal"이면 가로 방향의 latout_gravity가 적용되지 않는다.

그렇다면 위 화면에서 LinearLayout을 사용하면 TextView를 화면 웅앙에 나오게는 못할까 ? 물론 RelativeLayout으로 배치하는게 가장 편하지만, LinearLayout으로도 가능하다. TextView의 layout_gravity 속성을 이용하지 않고 LinearLayout의 gravity 속성을 이용하면 된다. gravity 속성은 뷰 내부에서 내용(content)을 정렬하는 목적으로 사용되는데, LinearLayout에 적용하면 레이아웃에 포함된 뷰가 내용이 된다.

■ weight

weight 속성도 마찬가지로 중요 속성이며 이용빈도도 높으며 weight 속성은 여백과 관련이 있다.

레이아웃에 뷰를 배치하다 보면 가로나 세로 방향으로 여백이 발생 할 수 있다. 이 여백을 화면에 배치된 뷰들이 확장해서 차지하게 할 때 이용된다.

<?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">
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#ff0"
        android:layout_weight="1"/>
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#0a9"
        android:layout_weight="2"/>
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#00f"
        android:layout_weight="1"/>
 
</LinearLayout>
 

위 코드는 LinearLayout에 세로 방향으로 TextView 세 개를 나타낸 예다. 그런데 각 TextView의 layout_height를 보면 모두 0dp로 지정되어있다. 크기를 0으로 지정하면 뷰는 영역을 차지하지 못하여 화면에서 안보인다. 결국, 모두 0dp로 지정하였으므로 화면 전체가 여백이된다. 그런데 세 개의 TextView 모두 layout_weight를 설정하여 여백을 확장하였다.

각 뷰의 layout_weight 값을 1, 2, 1로 지정하였는데, layout_weight 값은 절대적 수치가 아닌 상대적으로 계산되는 값이다. 모든 weight 값은 더해서 등분으로 계산된다. 즉, 1, 2, 1로 지정하였으므로 전체를 더하면 4가되고, 첫 번째 TextView가 1/4, 두번째가 2/4, 세번째가 1/4의 여백을 차지하게 된다.