기기별 크기가 다를때 대처법

Android를 하다보면 각자 자신의 기기나 에뮬레이션 크기에 맞춰서 작업을 한다. 그러다보면 내 화면에는 맞지만 다른 사람들의 화면에는 크기가 맞지 않는 경우가 종종 발생한다. 그럼 어떻게 대처해야 모든 사용자들의 화면에 내 UI를 정확히 적용시킬 수 있을까?

이 문제의 가장 편한 라이브러리가 있다. ScalableLayout 라이브러리다. https://github.com/ssomai/ScalableLayout

ScalableLayout은 android에서 widget을 감싸는 용도로 쓰이는 FrameLayout 이나 LinearLayout 대신 이용될 수 있는 Layout 입니다. UI를 구성하는 TextView나 ImageView 같은 view 들은 ScalableLayout 안에서 상대적인 (x,y) 좌표와 (width, height) 값을 부여받은 뒤, ScalableLayout 의 크기가 변함에 따라 비율에 맞춰 위치와 크기가 변화됩니다. TextView나 EditText같이 텍스트가 들어가는 view들은 (text size) 값을 부여하면 텍스트 크기가 ScalableLayout의 크기에 맞춰서 변화됩니다. 따라서 데이터베이스 관리하는 것은 매우 중요한 부분이다.

설명을 이렇고 더 자세한 설명은 위 링크를 통해서 확인할 수 있다.

그렇다면 적용은 어떻게 시킬까? 먼저 가장 큰 레이아웃에 scalableLayout을 감싸고 안에 있는 다른 layout들을 감싼 scalabelayout의 크기를 나누어서 배분해준다. 사실 말로 설명하긴 조금 어렵다. 직접 예제 코드를 보면 훨씬 이해하기 쉽다.

#XML Code

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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"
	  app:scale_base_width="400"
	  app:scale_base_height="200">
	  <TextView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		app:scale_left="20"
		app:scale_top="40"
		app:scale_width="100"
		app:scale_height="30"
		app: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"
		app:scale_left="200"
		app:scale_top="30"
		app:scale_width="50"
		app:scale_height="50"
		android:src="@drawable/ic_launcher" />
	</com.ssomai.android.scalablelayout.ScalableLayout>
</FrameLayout>

위에 처럼 가장 큰 레이아웃 안에 scalablelayout으로 감싸줘야 한다. 바로 Scalabelayout으로 감싸주면 올바르게 작동하지 않을 수 있다한다.

 app:scale_base_width="400"
 app:scale_base_height="200"

이 코드가 전체적용시킬 부분을 뜻한다. 만약 제플린을 보면서 한다면 x축 y축이라고 생각하면 된다.

이런식으로 xml을 적용시키면 기기별로 동일한 UI를 얻을 수 있다. 한가지 팁이 있다면 글씨같은경우 기존 크기보다 좀 더 크게 해야 한다.(경험상 같은크기를 줬을 때 잘리는현상이 있다.) [jekyll-gh]: https://github.com/quarl894