리니어 레이아웃

- XML 레이아웃 파일의 가장 위쪽에는 xmlns:android 속성이 들어가 있음.

→ 한 파일에 한 번만 들어가면 되는 속성으로 안드로이드 API에서 정의한 요소들을 사용한다는 의미.

→ 하나의 XML 레이아웃 파일에 한 번씩 들어간다고 생각하면 쉬움.

 

1) 방향 설정하기

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical" // 방향설정 (가로방향 : horizontal)
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <Button  
        android:id="@+id/button01"
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:text="Button01"
        />
    <Button  
        android:id="@+id/button02"
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:text="Button02"
        />
    <Button  
        android:id="@+id/button03"
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:text="Button03"
        />
</LinearLayout>
 

 

2) 자바 코드에서 화면 구성하기

 

package org.androidtown.ui.linearlayout;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.LinearLayout;
 
public class SampleLayoutCodeActivity extends Activity {
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        LinearLayout mainLayout = new LinearLayout(this);
        
        mainLayout.setOrientation(LinearLayout.VERTICAL); 
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT);
        
        Button button01 = new Button(this);
        button01.setText("Button 01");
        button01.setLayoutParams(params);
        mainLayout.addView(button01);
        
        setContentView(mainLayout);
    }
 
}
 

 

- 안드로이드는 XML 레이아웃에서 정의할 수 있는 대부분의 속성들을 자바 코드에서 객체를 만들거나 객체의 메소드를 호출하여 설정할 수 있도록 지원.

- new LinearLayout()을 통해 만들어진 리니어 레이아웃 개체는 setOrientation() 메소드를 사용할 수 있으며, setOrientation(LinearLayout.VERTICAL)과 같이 방향 속성을 정의한 상수를 파라미터로 전달하면 세로 방향 또는 가로 방향으로 뷰를 추가할 수 있음.

- 뷰 객체를 코드에서 만들 때 뷰의 생성자에는 항상 Context 객체가 전달되어야 하는데 액티비티는 컨텍스트(Context)를 상속하므로 액티비티 클래스 안에는 this를 Context 객체로 사용할 수 있음.

- 자바 코드 상에서 뷰를 만들어 뷰그룹에 추가할 때는 뷰의 배치를 위한 속성을 설정할 수 있는 LayoutParams 객체를 사용함.

- LayoutParams 객체를 새로 만들 경우에는 반드시 뷰가 추가될 영역에 대한 기본 채우기(fill) 속성을 지정해야 하며, 이 때 사용하는 두 가지 상수인 LayoutParams.MATCH_PARENT와 LayoutParams.WRAP_CONTENT 중 하나가 사용됨. 필요한 경우에는 이 두 가지 상수가 아닌 가로와 세로의 크기값을 직접 설정할 수도 있음.

- 뷰그룹에 뷰를 추가하기 위해서는 addView() 메소드를 사용함.

- addView() 메소드에는 추가할 뷰를 파라미터로 전달할 수 있으며, 필요한 경우 부모 컨테이너에서 사용할 레이아웃 파라미터인 LayoutParams 객체를 같이 전달할 수도 있음.

 

3) 정렬 방향 설정하기

 

*레이아웃에서 정렬 기능이 필요한 경우

정렬 속성	설명
layout_gravity	부모 컨테이너의 여유 공간에 뷰가 모두 채워지지 않아 여유 공간 안에서 뷰를 정렬할 때
gravity	뷰에서 화면에 표시하는 내용물을 정렬할 때(텍스트뷰의 경우, 내용물은 글자가 되고 이미지 뷰의 경우 내용물은 이미지가 됨)

 

- layout_gravity는 뷰의 layout_width나 layout_height 속성을 wrap_content로 할 경우에 같이 사용할 수 있음.

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <Button  
        android:id="@+id/button01"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="left"
        android:text="left"
        />
    <Button  
        android:id="@+id/button02"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center"
        android:text="center"
        />
    <Button  
        android:id="@+id/button03"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="right"
        android:text="right"
        />
</LinearLayout>
 

 

- gravity 속성은 뷰에 보이는 내용물을 정렬하는 경우에 사용

- 예) 텍스트뷰 안에 표시되는 텍스트나 이미지뷰에 표시되는 이미지

- gravity 속성에 넣을 수 있는 값들은 layout_gravity와 같음

- 필요한 경우에는 '|' 연산자를 이용해 여러 개의 값을 같이 설정할 수 있음. ('|' 연산자 양쪽에 공백이 있어야한다는 점에 주의!)

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TextView  
        android:id="@+id/button01"
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:gravity="left|top"
        android:text="left|top"
        android:textColor="#ffff0000"
        android:textSize="32dp"
        />
</LinearLayout>
 

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TextView  
        android:id="@+id/button01"
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:gravity="center_vertical|center_horizontal"
        android:text="center"
        android:textColor="#ffff0000"
        android:textSize="32dp"
        />
</LinearLayout>
 

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TextView  
        android:id="@+id/button01"
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:gravity="right|bottom"
        android:text="right|bottom"
        android:textColor="#ffff0000"
        android:textSize="32dp"
        />
</LinearLayout>
 

 

*정렬을 위해 gravity 속성에 저장할 수 있도록 정의된 값

 

정렬 속성값	설명
top	대상 객체를 위쪽 끝에 배치하기
bottom	대상 객체를 아래쪽 끝에 배치하기
left	대상 객체를 왼쪽 끝에 배치하기
right	대상 객체를 오른쪽 끝에 배치하기
center_vertical	대상 객체를 수직 방향의 중앙에 배치하기
center_horizontal	대상 객체를 수평 방향의 중앙에 배치하기
fill_vertical	대상 객체를 수직 방향으로 여유 공간만큼 확대하여 채우기
fill_horizontal	대상 객체를 수평 방향으로 여유 공간만큼 확대하여 채우기
center	대상 객체를 수직 방향과 수평 방향의 중앙에 배치하기
fill	대상 객체를 수직 방향과 수평 방향으로 여유 공간만큼 확대하여 채우기
clip_vertical	대상 객체의 상하 길이가 여유 공간보다 클 경우에 남는 부분을 잘라내기 top|clip_vertical로 설정한 경우 아래쪽에 남는 부분 잘라내기 bottom|clip_vertical로 설정한 경우 위쪽에 남ㄴ는 부분 잘라내기 center_vertical|clip_vertical로 설정한 경우 위쪽과 아래쪽에 남는 부분 잘라내기
clip_horizontal	대상 객체의 좌우 길이가 여유 공간보다 클 경우에 남는 부분을 잘라내기 right|clip_horizontal로 설정한 경우 왼쪽에 남는 부분 잘라내기 left|clip_horizontal로 설정한 경우 오른쪽에 남는 부분 잘라내기 center_horizontal|clip_horizontal로 설정한 경우 왼쪽과 오른쪽에 남는 부분 잘라내기

 

- 텍스트뷰를 이용해 화면을 구성하다 보면 텍스트가 옆의 텍스트뷰나 버튼에 들어 있는 텍스트와 높이가 맞지 않는 경우를 종종 볼 수 있음.

- 이 때, baselineAligned 속성을 사용할 수 있음.

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:baselineAligned="true"
    >
    <TextView  
        android:id="@+id/button01"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:gravity="right|bottom"
        android:text="큰 글씨"
        android:textColor="#ffff0000"
        android:textSize="32dp"
        />
    <TextView 
        android:id="@+id/button02"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="중간 글씨" 
        android:textColor="#ff00ff00"
        android:textSize="22dp" 
        /> 
    <Button 
        android:id="@+id/button03"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="작은 글씨" 
        android:textColor="#ff0000ff"
        android:textSize="12dp" 
        /> 
</LinearLayout>
 

 

4) 여유 공간 설정하기

 

- 부모 컨테이너의 여유 공간과 뷰 사이의 여백을 줄 수 있는 속성은 "layout_margin"이며 뷰 안의 내용물인 텍스트나 이미지와 뷰 외곽선 사이의 여백을 줄 수 있는 속성은 "padding".

- paddingTop, paddingBottom, paddingLeft, paddingRIght

- layout_marginLeft, layout_marginRIght, layout_marginTop, layout_marginBottom

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
    <TextView  
        android:id="@+id/button01"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="#ffffff00"
        android:text="텍스트"
        android:textColor="#ffff0000"
        android:textSize="24dp"
        android:padding="20dp"
        />
    <TextView  
        android:id="@+id/button02"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="#ff00ffff"
        android:text="텍스트"
        android:textColor="#ffff0000"
        android:textSize="24dp"
        android:layout_margin="10dp"
        />
    <Button  
        android:id="@+id/button03"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="#ffff00ff"
        android:text="텍스트"
        android:textColor="#ffff0000"
        android:textSize="24dp"
        android:padding="20dp"
        />
</LinearLayout>

 

5) 공간가중치 설정하기

 

- 공간가중치는 부모 컨테이너에서 남아 있는 여유 공간을 여러 개의 뷰들에게 어떻게 분할할 것인가를 결정.

- 공간가중치는 layout_weight 속성으로 지정.

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffffff"
        >
        <TextView  
            android:id="@+id/button01"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:background="#ffffff00"
            android:text="텍스트"
            android:textColor="#ffff0000"
            android:textSize="16dp"
            android:layout_weight="1"
            />
        <TextView  
            android:id="@+id/button02"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:background="#ff00ffff"
            android:text="텍스트"
            android:textColor="#ffff0000"
            android:textSize="16dp"
            android:layout_weight="1"
            />
        <Button  
            android:id="@+id/button03"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:background="#ffff00ff"
            android:text="텍스트"
            android:textColor="#ffff0000"
            android:textSize="16dp"
            android:layout_weight="1"
            />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffffff"
        >
        <Button  
            android:id="@+id/button04"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:background="#ff00ffff"
            android:text="텍스트"
            android:textColor="#ffff0000"
            android:textSize="24dp"
            android:layout_weight="2"
            />
        <Button  
            android:id="@+id/button05"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:background="#ffff00ff"
            android:text="텍스트"
            android:textColor="#ffff0000"
            android:textSize="24dp"
            android:layout_weight="1"
            />
    </LinearLayout>
</LinearLayout>
 

 

출처 : Do It! 안드로이드 앱 프로그래밍 (정재곤 지음, 이지스퍼블리싱)