안녕하세요.
안드로이드에서 개발을 할 때 디바이스 해상도 대응이 참 문제죠?
이 부분에 대해서 해결을 한 라이브러리가 있어서 이렇게 공개를 합니다.
에브리싱 이라는 상용 서비스에서도 이용된 기술입니다.
에브리싱은 GooglePlay Awards에서도 선정되어 어느정도 검증된 기술이라고 생각해주셔도 될 것 같습니다.
https://play.google.com/store/apps/details?id=com.sm1.EverySing
오픈소스프로젝트의 링크는 아래와 같습니다.
https://github.com/ssomai/ScalableLayout
클래스파일의 링크는 아래와 같습니다. 이 java 파일 단 하나만 project에 포함시키시면 됩니다.
자바로 뷰를 배치하는 예시 코드
// 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로 뷰를 배치하는 예시 코드
<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)
모든 사이즈의 화면에서 각각의 UI가 정확하게 표현되어 있습니다.
ListView에서 각각의 UI가 정확하게 표현되어 있습니다.
다이얼로그에서도 각각의 UI가 정확하게 표현되어 있습니다. 비율대로 표현되기 때문에 옵티머스뷰2에서는 좌우의 여백이 큽니다.
좋군요.
이미 짜여진 레이아웃을 동적 변환해주는 방향이었으면 더 좋았겠는데 하는 생각이 들지만...
어려우려나요?
ps. 라이센스는 어디 기재되어 있나요?
감사합니다 ^^
라이센스는 BSD license이니 자유롭게 쓰시면 됩니다.
라이센스 문서는 여기에 기재되어있습니다.
https://github.com/ssomai/ScalableLayout/blob/master/LICENSE.md
감사합니다 ^^
ScalableLayout 이용과 관련하여 궁금한 점이 있으시면
언제든지 리플이나 ssomai@gmail.com로 연락 주세요.
감사합니다.
근데 한 레이아웃에 리스트뷰랑 에디트텍스트 두고 실행하고 에디트텍스트를 누르고 키보드가 올라올때 리스트뷰가 압축되고 비율로 화면배치하다보니까 리스트뷰 따라서 다른 뷰들도 비율적으로 작아지네요 ㅠㅜ
안녕하세요 질문이 있어서 질문드립니다.
xml파일을 보니 다음과 같은 소스가 있는데요 이건 어떻게 수정이 되어야 하는건가요?
xmlns:sl="http://schemas.android.com/apk/res/com.jnm.android.widget.scalablelayout_testandroid"
저기 저는왜 pAttrs, R.styleable.ScalableLayout 이부분에서 sytleable <- 이부분이 오류가납니다; 클래스파일 그대로 가져가서 프로젝트 src 에 복사 햇는데.
그거
ScalableLayout / ScalableLayout / res / values / attrs.xml
이것도 넣어주셔야 돼요;
https://github.com/ssomai/ScalableLayout/blob/master/ScalableLayout/res/values/attrs.xml
그리고 R은 Android의 R import가 아니고
해당 프로젝트의 R을 import 시켜야합니다
저도 안드로이드초보22님과 같은 부분에서 에러가 발생합니다.
attrs.xml도 넣었고 xml에서 패키지명도 수정했습니다만...
여전히 sytleable에서 에러가 발생중입니다.
어느 부분을 수정해야 될지 모르겠습니다.
xml로 코딩하려는데
<com.example.test_scalablelayout.ScalableLayout
...
>
...
</com.example.test_scalablelayout.ScalableLayout>
에서 첫번째줄에서 오류가 뜨고 unbound prefix오류가 납니다!!
src>com.example.test_scalablelayout에 ScalableLayout.java 임포트시켰고
values에 attr.xml 추가한상태입니다!
===============================================
xmls를 추가시켜야했던것이 문제였습니다!
추가질문이있는데요 지금 제가 scalableLayout을 이용하여 구현을 하고 있는데
base width와 base height를 임의로 잡았을때,
기기의 상하좌우를 전부 맞춰서 늘리고 줄이는것이 아니라
상하와 좌우중 설정비와 기기화면비를 비교하여 더 적은 변동이 있는 부분으로만 크기가 변동되더라구요
(2:3인 화면에 1:2의 설정으로 만들면 화면이 2:3에 꽉맞춰나오는 것이 아니라, 1.66 : 3으로 나옵니다.)
원래 이렇게 쓰이는것이 맞나요??
구글링 하다가 흘러들어왔습니다.
웬만하면 구글링한 자료에 대해서 댓글같은거 잘 안남기는데... 써보고 신기해서 회원가입까지 해서 댓글 남깁니다. 감사합니다 :)
혹시라도 바로 사용하고 싶은데, 뭐가 뭔지 모르는 분을 위해서 제가 한 방법을 적고 갑니다.
안드로이드 스튜디오 1.3.1 기준으로 ScalableLayout.java 파일 복붙한 뒤에, style.xml 파일에 <declare-stylable ....> 복붙하면 됩니다(attrs.xml 파일에 있는 내용).
혹시라도 windowdectoractionbar 오류 나시는 분은 style.xml에서 Base를 테마 이름 앞에 붙여주시면 됩니다(Base.Theme.AppCompat.Lignt.DarkActionBar 처럼요)