[Android] 안드로이드 디바이스 해상도별 레이아웃 대응 라이브러리(ScalableLayout)

안드로이드 개발을 하다보면 가장 신경쓰이는 부분 중 하나는 바로 해상도 별 레이아웃 대처 방안일 것이다.

처음 개발을 하면서 비율을 맞출때는 weight를 주어 비율을 맞추었다. 그러나 비율은 맞아도 텍스트 크기가 문제가 되고는 했다.

다음 방법으로는 손가락을 부지런히 움직이며 해상도 별 dimens를 따로 주는 방법도 사용해 보았으나 더 간단한 방법을 찾기를 원했다.

그렇게 구글링을 통해 알게된 해상도 사이즈별로 자동으로 크기를 조정해 주는 ScalableLayout라이브러리를 찾게 되었다.

우선 Github 주소는 https://github.com/ssomai/ScalableLayout

코드를 읽어보면 설명이 영어로 되어 있지만 전혀 어렵지 않게 되어있다.

영어가 어렵다면 https://github.com/ssomai/ScalableLayout/blob/master/README_ko.md 한국어 다큐먼트이다.

기본적인 사용법은 아래와 같다.

<com.ssomai.android.scalablelayout.ScalableLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@android:color/darker_gray"
  android:layout_above="@+id/main_textview"
  sl:scale_base_width="400"
  sl:scale_base_height="200">
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    sl:scale_left="20"
    sl:scale_top="40"
    sl:scale_width="100"
    sl:scale_height="30"
    sl:scale_textsize="20"
    android:text="@string/hello_world"
    android:textColor="@android:color/white"
    android:background="@android:color/black" />
  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    sl:scale_left="200"
    sl:scale_top="30"
    sl:scale_width="50"
    sl:scale_height="50"
    android:src="@drawable/ic_launcher" />
</com.ssomai.android.scalablelayout.ScalableLayout>

위 레이아웃에서 굵게 표시해 둔 사항만 본다면 라이브러리 사용 끝!!

1. ScalableLayout으로 뷰 그룹을 만든다.

2. 그 안에 원하는 뷰를 구성하고 크기, 위치를 맞춘다.

끝이다. 이거면 해상도 별로 자동으로 크기를 줄이고 늘려주는 라이브러리다.

* 여기서 유의할점은 ScalableLayout을 전체 뷰 그룹으로 가져가지 말고 가로를 기준으로 잡고 원하는 부분 부분 별 나누는 것이 좋다는 것이다.

보통 디자이너분들께서 1080x1920을 기준으로 레이아웃을 만들어 주었다고 한다면!!

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">
<com.ssomai.android.scalablelayout.ScalableLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@android:color/darker_gray"
  android:layout_above="@+id/main_textview"
  sl:scale_base_width="1080"
  sl:scale_base_height="500">
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    sl:scale_left="20"
    sl:scale_top="40"
    sl:scale_width="100"
    sl:scale_height="30"
    sl:scale_textsize="20"
    android:text="@string/hello_world"
    android:textColor="@android:color/white"
    android:background="@android:color/black" />
</com.ssomai.android.scalablelayout.ScalableLayout>

<com.ssomai.android.scalablelayout.ScalableLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@android:color/darker_gray"
  android:layout_above="@+id/main_textview"
  sl:scale_base_width="1080"
  sl:scale_base_height="500">
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    sl:scale_left="20"
    sl:scale_top="40"
    sl:scale_width="100"
    sl:scale_height="30"
    sl:scale_textsize="20"
    android:text="@string/hello_world"
    android:textColor="@android:color/white"
    android:background="@android:color/black" />
</com.ssomai.android.scalablelayout.ScalableLayout>

</LinearLayout>

위 코드와 같이 가로를 기준으로 잡고 세로는 원하는 크기만큼 짤라서 사용하는 것이 좋다고 한다.

그렇다면 ScalableLayout 라이브러리를 사용하여 레이아웃을 열심히 만들어 보자!!