[안드로이드] ScalableLayout - 모든 해상도를 한번에 표현하기

ScalableLayout - 모든 해상도를 한번의 코드로 표현하기

 

 

 

안드로이드 앱을 만들다 보면 휴대폰 기기의 해상도에 따라 레이아웃 처리를 따로 해주어야 할때가 있습니다. 

특히 태블릿까지 고려하다보면 각 기기의 해상도에 따라서 레이아웃 및 Size 정보를 따로 주어야 합니다. 

이때, 한번의 코드로 편리하게 여러 해상도를 대응할수 있는 라이브러리가 있어 적용결과를 비교해 보고 사용방법을 소개해 드리고자 합니다. 

 

 

 

1. ScalableLayout 적용 결과 비교

 

아래 그림의 3영역중 상단 2영역은 ScalableLayout을 적용한 View영역이고 마지막 하단은 LinearLayout을 적용한 영역입니다. 

ScalableLayout은 처음에 가로세로 비율을 지정하고 그안에 배치되는 View들의 위치와 크기를 비율에 맞추어 표시해 주기 때문에 편리한 점이 있습니다. 하지만 처음에 지정한 비율을 항상 유지한다는 특성을 잘 알고 사용해야합니다. 

가이드에서는 최상위 Layout에는 LinearLayout이나 FrameLayout등을 두고 그 안에서 사용되는 화면 구성 일부분들에 대해서 사용하는것을 추천하고 있습니다. 

 

 

ScalableLayout 적용결과 비교 (휴대폰 vs 태블릿)

 

 

2. ScalableLayout 사용방법

 

ScalableLayout은 처음에 Width와 Height의 비율값을 정하고 그 안에 TextView나 ImageView와 같은 View을 배치하게 됩니다.

ScalableLayout안에 배치된 View들은 ScalableLayout안에서 상대적인 x좌표, y좌표, width, height값을 지정받고 이후에 ScalableLayout의 사이즈가 변하게 되면 해당 비율에 맞춰 자동으로 위치와 크기가 변하게 됩니다. 

또한 텍스트의 경우 Text Size값을 지정하면 ScalableLayout의 크기에 맞추어 자동으로 크기가 변경됩니다. 

 

2-1. Gradle 추가

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

 

 

 

2-2. MainActivity

MainActivity에는 자바코드로 ScalableLayout View를 동적할당하는 예시가 포함되어 있습니다. 

 

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        LinearLayout container = findViewById(R.id.container);

        // ScalableLayout의 사이즈를 200x100으로 설정합니다. (상대적인 값으로 임의로 설정할수 있습니다.)
        ScalableLayout scalableLayout = new ScalableLayout(this, 200, 100);
        scalableLayout.setBackgroundColor(Color.LTGRAY);


        // textView 생성후 설정하기
        TextView textView = new TextView(this);
        textView.setText("ScalableLayout 적용 (동적삽입)");
        textView.setBackgroundColor(Color.WHITE);

        // ScalableLayout에 TextView 넣기
        // 위치나 사이즈 값은 ScalableLayout 생성시 정한 width(200)와 height(100)값의 상대적 비율로 적용됨
        scalableLayout.addView(textView, 10f, 25f, 80f, 50f); // 위치는 x=10, y=25, 사이즈는 w=80, h=50
        scalableLayout.setScale_TextSize(textView, 11f);      // textView안의 text사이즈를 11로 설정


        // ImageView 생성하기
        ImageView imageView = new ImageView(this);
        imageView.setImageResource(R.drawable.ic_launcher_background);

        // ScalableLayout에 ImageView 넣기
        // 위치나 사이즈 값은 ScalableLayout 생성시 정한 width(200)와 height(100)값의 상대적 비율로 적용됨
        scalableLayout.addView(imageView, 100f, 25f, 50f, 50f); //위치는 x=100, y=25, 사이즈는 w=50, h=50

        container.addView(scalableLayout);
    }
}

 

 

 

2-3. activity_main.xml

activity_main.xml에는 xml로 ScalableLayout View를 나타내는 예시가 포함되어 있습니다.

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal">
    </LinearLayout>

    <com.ssomai.android.scalablelayout.ScalableLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#3300FF00"
        app:scale_base_width="200"
        app:scale_base_height="100">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/black"
            android:text="ScalableLayout 적용"
            android:textColor="@android:color/white"
            app:scale_left="10"
            app:scale_top="25"
            app:scale_width="80"
            app:scale_height="50"
            app:scale_textsize="11"
            tools:ignore="MissingPrefix" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/bgimage"
            app:scale_left="100"
            app:scale_top="25"
            app:scale_width="100"
            app:scale_height="50"
            tools:ignore="MissingPrefix" />
    </com.ssomai.android.scalablelayout.ScalableLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:padding="8dp"
        android:background="#330000FF"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="8dp"
            android:background="@android:color/black"
            android:text="LinearLayout 적용"
            android:textSize="24dp"
            android:textColor="@android:color/white"/>
        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="8dp"
            android:src="@drawable/bgimage" />
    </LinearLayout>
</LinearLayout>

 

 

cf) 개발자 링크

 

github.com/ssomai/ScalableLayout/blob/master/README_ko.md

ssomai/ScalableLayout