안녕하세요. 

안드로이드에서 개발을 할 때 디바이스 해상도 대응이 참 문제죠?

이 부분에 대해서 해결을 한 라이브러리가 있어서 이렇게 공개를 합니다.

에브리싱 이라는 상용 서비스에서도 이용된 기술입니다.

에브리싱은 GooglePlay Awards에서도 선정되어 어느정도 검증된 기술이라고 생각해주셔도 될 것 같습니다.

https://play.google.com/store/apps/details?id=com.sm1.EverySing



오픈소스프로젝트의 링크는 아래와 같습니다.

https://github.com/ssomai/ScalableLayout


클래스파일의 링크는 아래와 같습니다. 이 java 파일 단 하나만 project에 포함시키시면 됩니다.

https://github.com/ssomai/ScalableLayout/blob/master/ScalableLayout/src/com/jnm/android/widget/ScalableLayout.java



자바로 뷰를 배치하는 예시 코드

https://github.com/ssomai/ScalableLayout/blob/master/ScalableLayout_TestAndroid/src/com/jnm/android/widget/scalablelayout_testandroid/MainActivity.java
// ScalableLayout의 사이즈를 400 x 200 으로 설정합니다. 
// 상대적인 단위로 pixel 이나 dp 단위가 아닙니다.
ScalableLayout sl = new ScalableLayout(this, 400, 200);
sl.setBackgroundColor(Color.LTGRAY);

// ScalableLayout에 TextView를 넣어보겠습니다. 
TextView tv = new TextView(this);
tv.setText("test");
tv.setBackgroundColor(Color.YELLOW);
// 왼쪽 x 좌표는 20, y좌표는 40, width는 100, height는 30으로 ScalableLayout에 TextView를 넣습니다. 
// 단 한줄의 코딩으로 view를 넣은 후 이후에는 자동으로 리사이즈 됩니다.
sl.addView(tv, 20f, 40f, 100f, 30f);
// TextView 안의 text의 사이즈를 20으로 설정합니다. text의 사이즈도 자동으로 조절됩니다.
sl.setScale_TextSize(tv, 20f);

// ScalableLayout에 ImageView를 넣어보겠습니다. 
ImageView iv = new ImageView(this);
iv.setImageResource(R.drawable.ic_launcher);
// 왼쪽 x 좌표는 200, y좌표는 30, width는 50, height도 50으로 ScalableLayout에 ImageView를 넣습니다. 
// 단 한줄의 코딩으로 view를 넣은 후 이후에는 자동으로 리사이즈 됩니다.
sl.addView(iv, 200f, 30f, 50f, 50f);


XML로 뷰를 배치하는 예시 코드

https://github.com/ssomai/ScalableLayout/blob/master/ScalableLayout_TestAndroid/res/layout/activity_main.xml
<com.jnm.android.widget.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.jnm.android.widget.ScalableLayout>




추가로 아래에 한글 설명서를 덧붙였습니다. 

사용해보시고 궁금한 점이 있으시면 댓글로 질문 주시면 수시로 답변 드리겠습니다.

별도로 또 궁금한 점이 있으시면 ssomai@gmail.com 으로 질문 주셔도 됩니다.


감사합니다~~~!!!


========================================================================================================================


ScalableLayout for Android.

Class: com.jnm.android.widget.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 앱에서도 이용되어 그 우수성을 증명한 바 있습니다.

다양한 비율의 화면에서 ScalableLayout이 적용된 예.

왼쪽부터 삼성 갤럭시 S4 (1920 x 1080. 16:9), LG 옵티머스 뷰2 (1024 x 768. 4:3), 갤럭시 노트 10.1 (1280 x 800. 8:5)

alt tag모든 사이즈의 화면에서 각각의 UI가 정확하게 표현되어 있습니다.

alt tagListView에서 각각의 UI가 정확하게 표현되어 있습니다.

alt tag다이얼로그에서도 각각의 UI가 정확하게 표현되어 있습니다. 비율대로 표현되기 때문에 옵티머스뷰2에서는 좌우의 여백이 큽니다.

이 게시물을