ANDROID 프로그래밍

[Android] Scalable Layout 사용하기

떡잎몬 2018. 7. 6. 22:14
반응형

안드로이드는 특히, 기기 종류가 IOS에 비해 어마어마하게 많이 있으며 해상도 및 화면 크기도 기기마다 달라서 레이아웃 이나 이미지 등을 여러가지 크기의 버전으로 만들어서 적용시켜주어야 모든 기기에서 원하는 디자인을 보여줄 수 있다.

오늘 포스팅 할 주제는 Scalable Layout 이라는 커스텀 레이아웃 인데, 국내산(?)이며, 장점은 위에서 언급했던 하나하나 크기를 대응시켜주어야 했던 귀찮은 현상을 대부분 개선 할 수 있다고 한다. 

일단 소개글을 보면 다음과 같다. (출처 : https://github.com/ssomai/ScalableLayout/)

단 한번의 코딩으로 태블릿을 포함한 모든 화면에서 정확한 UI를 표현하고 싶다면!

ScalableLayout은 화면의 크기가 매우 다양한 안드로이드 폰과 태블릿 환경에서
일관성 있는 UI를 표현하기 위한 방법 중의 하나입니다.

ScalableLayout은 android에서 widget을 감싸는 용도로 쓰이는
FrameLayout 이나 LinearLayout 대신 이용될 수 있는 Layout 입니다.

UI를 구성하는 TextView나 ImageView 같은 view 들은
ScalableLayout 안에서 상대적인 (x,y) 좌표와 (width, height) 값을 부여받은 뒤,
ScalableLayout 의 크기가 변함에 따라 비율에 맞춰 위치와 크기가 변화됩니다.
TextView나 EditText같이 텍스트가 들어가는 view들은 (text size) 값을 부여하면
텍스트 크기가 ScalableLayout의 크기에 맞춰서 변화됩니다.

ScalableLayout은 단 하나의 java file을 import하는 것만으로 모든 기능을 제공합니다.
Java 또는 XML 의 Android 에서 UI를 구성하는 두가지 방법 모두에서 ScalableLayout을 이용할 수 있습니다.

ScalableLayout은 2013년에 Google Play에서 빛난 올해의 앱 모음에 선정된
S.M.ENTERTAINMENT의 everysing 앱에서도 이용되어 그 우수성을 증명한 바 있습니다.

이 소스를 Maven Central에 AAR 형태로 퍼블시켰습니다.
그래서 안드로이드 스튜디오나 gradle을 사용하시는 분께서는 아래 dependencies를 build.gradle에 추가해주시면 바로 사용해보실수 있습니다.

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

위 설명에 의하면, 안드로이드 스튜디오에서 build.gradle 파일에 dependencies  블록 안에 한 줄을 추가하면 바로 사용해 볼 수 있다.
주의할 점은, 만약 본인의 gradle 플러그인 버전이 3.0.0 이상이라면, compile 종속성을 사용하지 않는것을 권장하고 있으므로, 

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

}

이와 같이 추가하여 사용한다.

추가된 ScalableLayout 을 사용하는 방법은 크게 두가지 이며, 

1. JAVA 코드로 뷰를 배치하는 방법 
2. XML 코드로 뷰를 배치하는 방법

이 있다.

자세한 내용은 개발자 github(https://github.com/ssomai/ScalableLayout/)를 참고하면 볼 수 있다.


XML 코드로 ScalableLayout을 사용하는 방법을 잠깐 보면, 

<com.ssomai.android.scalablelayout.ScalableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        app:scale_base_width="1242"
        app:scale_base_height="1200"
        >

이런식으로 com.ssomai.android.scalablelayout.ScalableLayout 이라는 타입으로 불러와서 사용하며, app:scale_base_width 와 app:scale_base_height 값은 이 레이아웃의 안에 있는 view들에 대한 상대적인 크기값이며, 

<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:scale_left="300"
            app:scale_top="300"
            app:scale_width="700"
            app:scale_height="50"
            app:scale_textsize="100"
            app:textview_wrapcontent_direction="bottom"
            app:textview_wrapcontent_resizesurrounded="true"
            app:textview_wrapcontent_movesiblings="true"
            android:text="test long text: Hi, everybody. It's good to see you."
            />

이런식으로 레이아웃 안에 넣을 항목들에 app:scale_width 와 app:scale_height 값을 넣어주면 앱이 레이아웃 크기와 항목의 크기를 상대적으로 계산하여 화면에 배치해 준다. 이런 방식으로 ScalableLayout을 사용하면 기종별 레이아웃/이미지 크기에 대한 스트레스 없이 개발을 진행할 수 있다.


참고 1 ) scalable layout 안에 listview를 넣는경우 표시되지 않는 경우가 발생한다. 
조치방법 : scalable을 listview 자리 위에 놓고, listview의 속성에 

android:layout_below="@+id/레이아웃id"

를 넣어주어 사용한다.

참고 2) 요즘 출시되는 안드로이드 스마트폰 중에 기존 비율이 아닌(?) 특이한 비율을 가진 스마트폰이 등장했다고 한다. 이런 경우는 Scalable layout을 사용해도 크기가 제대로 적용되지 않아, 해당 스마트폰 사이즈에 대해서 따로 처리를 해주어야 한다고 한다.


반응형