[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 의 화면을 볼 수 있다.