[Android Dev.] 화면 회전에 대응하는 UI 구성하기

안드로이드 기기를 보통 사용하는 세로(portrait) 방향 화면에서 가로(landscape) 방향 화면으로 전환하는 것에 대응 하기 위해 서는 서로 다른 Layout 을 구성하는 리소스(xml)를 만들어야 한다.

아주 단순한 layout 구성으로 기본적인 TextView 와 버튼 두개로 구성된 UI 이다. 파일 이름은 main.xml 이다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center_vertical|center_horizontal"    
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
<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>

위의 layout 구성은 아래와 같은 화면이다.

이 화면을 가로(Landscape)로 변경(에뮬레이터에서 Ctrl+F11)을 하면 아래와 같은 화면이 된다. UI 구성이 변하지 않은 화면이 나온다.

세로 방향 구성과는 다르게 가로 방향의 UI 구성을 새로 하기 위해서는 res 폴더에 layout-land 폴더를 만들고 layout 폴더에 있는 구성 파일과 동일한 UI 구성 파일(xml)을 만들어 작성을 하면 화면의 회전에 따라 각각의 UI 구성이 출력 된다.

아래는 layout-land 폴더에 작성한 main.xml 파일 이다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center_vertical|center_horizontal"    
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center_vertical|center_horizontal"        
    >    
<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>

이 소스를 실행 시켜서 화면 전환을 해 보면 아래와 같은 변화된 UI 의 화면을 볼 수 있다.

<

Original Post : http://neodreamer-dev.tistory.com/458