안드로이드의 정확한 UI 표현 레이아웃 ScalableLayout

ScalableLayout

 삼성 갤럭시 시리즈에서 s8부터 가로 사이즈를 줄이고 세로 사이즈를 늘린 '막대바' 형태의 디자인의 스마트폰이 줄줄이 나오기 시작했다. 각 제조사의 기기마다 서로 다른 화면비율을 갖고 있으니 UI구현에 있어 곤혹을 치를 수 밖에 없다.

 그래서 다양한 비율의 화면에서도, 단 한 번에 정확한 UI를 표현하고 싶을 때 사용하는 라이브러리인 ScalableLayout이 등장했다. 

(ScalableLayout 깃허브 링크 : https://github.com/ssomai/ScalableLayout)

 ScalableLayout은 FrameLayout이나 LinearLayout 대신 이용될 수 있는 Layout이다. 그렇기에 ScalableLayout내의 위치한 view들에 대해서 상대적인 (x,y) 좌표와 크기를 부여할 수 있다. 해당 좌표와 크기는 변화하는 화면 비율에 맞춰 상대적인 크기로 변화된다. 

 ScalableLayout의 사용법은 간단하다. 

1. build.gradle(module.app)에 scalablelayout을 dependencies에 추가해주어야 한다. 

dependencies {
    implementation 'com.ssomai:android.scalablelayout:2.1.6'
}

2. xml 코드에서 ScalableLayout 생성 및 전체 베이스 크기 설정

<com.ssomai.android.scalablelayout.scalablelayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:scale_base_height="200"
    app:scale_base_width="1080">

        // ScalableLayout 내부에 위치한 뷰들의 태그 위치

</com.ssomai.android.scalablelayout.scalablelayout>

전체 베이스 크기는 app:scale_base_height와 width로 설정이 가능하다. 아래의 이미지와 같이 height가 200, width가 1080으로 설정된다.

3. ScalableLayout내의 뷰(이미지뷰, 텍스트뷰)의 위치와 크기 조정하기

   <com.ssomai.android.scalablelayout.ScalableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:scale_base_height="200"
        app:scale_base_width="1080">

        <ImageView
            android:id="@+id/profile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:scale_left="50"
            app:scale_top="50"
            app:scale_width="100"
            app:scale_height="100"
            android:background="#fd234564" />

        <TextView
                        ...
            />

        <TextView
                        ...
            />

    </com.ssomai.android.scalablelayout.ScalableLayout>

ScalableLayout 내의 위치한 뷰중 첫 번째 이미지뷰의 위치와 크기를 조정하고자 한다. app:scale_width와 height로 해당 뷰의 크기를 설정할 수 있다. 

이어서 뷰의 위치를 조정시켜야 한다. scale_left와 scale_top으로 위치 조정이 가능하다. left에서 얼만큼, top에서 얼만큼 위치할 건지 조정하는 것으로 직관적으로 이해하기 쉽다. 별도의 설정이 없다면 0,0으로 받아들여 좌측 상단에 뷰가 존재하는 것을 확인할 수 있다.

더불어 텍스트 사이즈는 app:scale_textsize 속성으로 설정가능하다.

(app:scale_left, top 미 설정시)

(app:scale_left, top을 각각 50씩 주었을 때, 좌측(left)에서 50 상단(top)에서 50씩 이동한 것을 볼 수 있다.)

 

Nexus 5X(1080*1920)과 Nexus 7(1200*1920)에서 표시된 UI에서 동일한 비율로 변환되는 것을 확인할 수 있다. 

(넥서스 5X)

(넥서스 7)

또한 더 자세한 기능은 위의 깃허브 scalablelayout 링크에서 README파일을 참고하면 된다.