안드로이드(Android) OS는 다양한 기기에 포팅될 수 있다. 그리고 다양한 기기는 자신만의 화면 크기를 가지는 경우가 많다. 이렇다 보니 애플리케이션을 개발하다 보면 기기의 고유 해상도로 인해서 문제가 생길 수 있다.
안드로이드는 허니콤 버전부터 태블릿을 지원하기 시작해서, 아이스크림부터는 모바일과 태블릿을 같이 지원하기 시작했다. 이런 상황이다 보니, 구글에서는 해상도에 어울리게 UI를 구성(XML 파일로 구성)하도록 가이드(Supporting Multiple Screens) 하고 있다. 이 가이드를 보면 다양한 해상도를 지원하려면 /res/layout-sw600dp/layout.xml 과 같은 파일을 화면에 적합하게 여러 개 만들어서 개발하라는 것이다.
화면에 적당한 UI로 앱의 퀄리티를 유지하는 방향으로는 좋겠지만, 그만큼 개발비용(iOS에 비해)을 증가시킬 게 분명하다. 물론, 이 방법으로 한 바이너리로 모바일/태블릿/TV를 지원할 수 있어서 좋긴 하다. 하지만 가이드 대로 개발해 보니, 이렇게 분리해서 개별 UI(모바일/태블릿/TV)의 장점을 살릴 수 있을까? 라는 질문에는 잘 만들면(?) 된다는 생각이다. 한 바이너리로 여러 화면에 적합한 UI를 서비스 할 수 있다는 것은 역시나 매력적이고 앞으로도 이 방향으로 서비스를 개발하는 것이 좋겠다.
앱을 개발하면서 화면별(모바일, 태블릿 그리고 TV) UI 구성은 어떻게 할 수 있을까? 에 대한 대답은 layout_weight 속성으로 해결한다는 것이다.
아래 예제에서 <LinearLayout>의 layout_weight 속성을 가지는 요소는 자신의 UI가 차지하는 %를 숫자(6 -> 60%)로 표현한 것이고, weightSum은 없으면 알아서 배열하지만, 아래 예에서는 10으로 입력해 놓았다. 그리고 가로(horizontal) 또는 세로(vertical)의 비율로 크기를 맞추는 방법은, 가로를 맞추기 위해서는 layout_width, 세로로 맞추기 위해서는 layout_height을 ‘0dp’로 입력하면 된다.
아래는 위에서 설명한 화면의 구성을 비율로 구성한 예이다.
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/linearLayout”
android:orientation=”horizontal”
android:layout_width=”fill_parent”
android:background=”#568dfb”
android:weightSum=”10.0″
android:layout_gravity=”center_vertical”
android:layout_height=”40dp”>
<TextView android:id=”@+id/textView”
android:text=” “
android:visibility=”visible”
android:paddingLeft=”8dp”
android:layout_width=”0dp”
android:layout_weight=”6″
android:textColor=”@android:color/white”
android:layout_height=”40dp”
android:textAppearance=”?android:attr/textAppearanceMedium”/>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/linear_container”
android:orientation=”horizontal”
android:layout_width=”0dp”
android:layout_height=”40dp”
android:layout_weight=”4″
android:background=”#568dfb”
android:gravity=”right”
android:layout_gravity=”center_vertical”>
<ProgressBar
android:layout_gravity=”right|center_vertical”
android:background=”#568dfb”
android:layout_width=”30dp”
android:layout_height=”30dp” />
<TextView
android:id=”@+id/loadingTextView”
android:layout_width=”wrap_content”
android:layout_height=”40dp”
android:layout_gravity=”right”
android:background=”#568dfb”
android:gravity=”center_vertical”
android:paddingLeft=”4dp”
android:paddingRight=”4dp”
android:text=”Loading…”
android:textAppearance=”?android:attr/textAppearanceMedium”
android:textColor=”@android:color/white”/>
</LinearLayout>
</LinearLayout>