[번역글] Supporting Different Screen Sizes #1 - 최소너비 식별자(Smallest-width Qualifier) 사용하기

Smallest-width Qualifier(최소너비 식별자) 사용하기

개발자가 안드로이드 3.2 이전 OS에서 가장 힘들었던 것 중의 하나가 "large" 화면사이즈 폴더였다. 여기에는 Dell Streak(5인치), 최초 갤럭시탭, 7인치 태블릿 등이 해당된다.

많은 앱들은 디바이스에 따라 서로 다른 레이아웃을 구성하기를 원했지만, 5인치든 7인치든 모두 "large" 스크린으로 처리됐다. 이런 문제를 해결하기 위해 안드로이드 3.2부터 "Smallest-width" qualifier(최소너비 식별자)를 추가했다.

최소너비 식별자를 이용하면 특정 가로사이즈(dp)의 화면을 구분지을 수 있다. 예를들어 대부분의 7인치 태블릿은 600dp의 너비값을 갖고 있는데, 한 페이지에 두개의 판(pane)을 동시에 보여주고 싶다면(반면 화면이 작은 디바이스에서는 한개의 판만...), 아래와 같이 두 개의 레이아웃을 구성하면 된다.

• res/layout/main.xml, single-pane (default) layout:

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  
      <fragment android:id="@+id/headlines"
                android:layout_height="fill_parent"
                android:name="com.example.android.newsreader.HeadlinesFragment"
                android:layout_width="match_parent" />
  </LinearLayout>

• res/layout-large/main.xml, two-pane layout:

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="horizontal">
      <fragment android:id="@+id/headlines"
                android:layout_height="fill_parent"
                android:name="com.example.android.newsreader.HeadlinesFragment"
                android:layout_width="400dp"
                android:layout_marginRight="10dp"/>
      <fragment android:id="@+id/article"
                android:layout_height="fill_parent"
                android:name="com.example.android.newsreader.ArticleFragment"
                android:layout_width="fill_parent" />
  </LinearLayout>

그러나, 두 판을 보여주는 레이아웃의 최소너비가 600dp임을  지정하고 싶다면 "large"식별자를 사용하는 대신, "sw600dp" 식별자를 사용하면된다.

• res/layout/main.xml, single-pane (default) layout:

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  
      <fragment android:id="@+id/headlines"
                android:layout_height="fill_parent"
                android:name="com.example.android.newsreader.HeadlinesFragment"
                android:layout_width="match_parent" />
  </LinearLayout>

• res/layout-sw600dp/main.xml, two-pane layout:

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="horizontal">
      <fragment android:id="@+id/headlines"
                android:layout_height="fill_parent"
                android:name="com.example.android.newsreader.HeadlinesFragment"
                android:layout_width="400dp"
                android:layout_marginRight="10dp"/>
      <fragment android:id="@+id/article"
                android:layout_height="fill_parent"
                android:name="com.example.android.newsreader.ArticleFragment"
                android:layout_width="fill_parent" />
  </LinearLayout>

이것은 최소너비가 600dp이거나 그보다 큰 디바이스에서는 layout-sw600dp/main.xml (two-pane) 레이아웃을 사용하고, 600dp보다 작은 디바이스에서는 layout/main.xml (single-pane) 레이아웃을 사용한다는 것을 의미한다.

여기서 주의할 점이 있다. 안드로이드 3.2 미만의 디바이스에서는 "sw600dp"라는 식별자를 인식할 수 없기 때문에 원하는 대로 동작하지 않는다. 이런 이유로 이전에 사용하던 "large"식별자를 계속 유지시켜줘야 한다. 즉, res/layout-sw600dp/main.xml 과 똑같이 res/layout-large/main.xml 을 구성해주면 이 문제를 해결할 수 있다.

다음 섹션에서는 이 방법을 사용했을 때, 레이아웃파일이 중복되지 않게하는 방법에 대해 배울 수 있다.

[원문보기]

원문바로가기

(발번역, 오역에 대한 내용이 있다면 댓글로 항의해주세요 ^^)