[Android] 화면 전환에 따라 UI 대응

 

안드로이드에서 가로화면 일때, 세로화면 일때 각각 UI가 다르다면 어떻게 대응을 할까요? 이번 포스팅에서는 안드로이드에서 화면전환에 따른 UI 대응을 하는 법에 대해 알아 보겠습니다. 

 

예제는 다음과 같습니다. 세로화면 에서는 이미지가 보이지만 가로화면으로 전환 되었을 때는 이미지가 보이지 않도록 해보겠습니다.

 

 

Android Resource Directory를 만들 때, Available Qualifiers에서 "Orientation"을 설정 할 수 있습니다.

 

 

 Available Qualifiers에서 "Orientation"을 선택한 뒤,  ">>" 버튼을 눌러줍니다. 그리고 Resource type을 drawable로 바꾸어 줍니다. 이 예제에서는 이미지 노출 여부를 화면전화에 따라 결정 할 것이기 때문입니다. 그 다음 Screen orientation을 Landscape와 portarit 둘 다 만들어 줍니다.

 

 

Project단위로 파일들을 보시면, drawable-land와 drawable-port 폴더가 생성된 것을 확인 할 수 있습니다. 그러면 아까 사용하려는 이미지를 drawable-port에만 넣어 주면, landscape모드에서는 이미지가 보이지 않게 됩니다.

 

 

아래와 같이 ImageView에 src로 이미지가 적용되어 있는 상태 임에도, landscape상태에서는 drawable-land에 해당 이미지가 없으므로 보이지 않습니다.

 

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon">
    </ImageView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="30dp"
        android:text="@string/txt_intro_main"
        android:textSize="20sp"
        android:textStyle="bold"
        android:gravity="center">
    </TextView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="30dp"
        android:layout_marginTop="20dp"
        android:text="@string/txt_intro_sub"
        android:gravity="center">
    </TextView>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="확인">
    </Button>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="설정">
    </Button>

</LinearLayout>