[Android] 레이아웃 화면상의 비율을 일정하게 유지하는 방법

안드로이드 레이아웃을 제작하는 것에 서툴렀을 때,나는 각 레이아웃의 속성 사용방법을 제대로 알지 못하는 상태에서 주먹구구 방식으로 내가 원하는 결과물이 나올 때까지 이것도 바꿔보고 저것도 바꿔보며 시행착오를 거쳐 레이아웃을 만들어냈었다.

 

출처 - https://blog.voidmainvoid.net/110

나는 주로 LinearLayout을 사용하기보다는 ConstraintLayout을 사용하기를 선호했었다.

ConstraintLayout을 사용하면 굳이 여러개의 LinearLayout을 사용하여 그룹을 짓지 않아도

컴포넌트간의 마진을 이용하여 하나의 레이아웃의 위치를 빠르게 맞출 수 있기 때문이다.

이런 방식으로 어느정도 노력을 거듭하다 보면 나름대로 봐줄만한 결과물이 나오게 된다.나왔으면 하는 결과물과 시각적으로 거의 차이가 없을 때까지.그럼 어느정도 결과물이 나온 것을 보고는 나름대로 안도한다.

하지만 이것으로 간단히 끝나는 문제인가?

단순히 학부 시절의 과제로만 끝난다면 괜찮겠지만 스토어에 출시할 목적이라면 이야기가 달라진다.

출처 - http://www.bloter.net/archives/110210

안드로이드의 경우 해당 운영체제를 사용하는 기기의 화면 디자인에 따라 그 크기와 해상도가 천차만별이다.

따라서 어느 한 기기에서 완벽한 레이아웃을 유지한다고 해도, 다른 기기에서는 그렇지 않을 가능성이 존재한다.

한 스타트업 업체로부터 외주를 받아 어플 레이아웃을 여느 때와 같이 ConstraintLayout을 사용하여 제작한 적이 있다.

제작을 끝내고 난 뒤 유지보수 요청을 받았는데, 현재 레이아웃이 대다수의 기기에서 범용으로 사용될 수 있으면 좋겠다는 것이었다.

 

그러나 내가 제작한 레이아웃은 그 요구를 만족할만한 상황이 아니었다.

나는 ConstraintLayout 내에 위치한 각 뷰들의 마진을 고정적인 dp 값을 통해 정의했다.

그런데 앞서 말했듯이, 스크린 크기와 해상도는 천차만별이므로, 같은 dp 값이더라도 원래 테스트했던 곳에서는 자연스러운 여백이,

다른 기기에서는 다른 비율을 차지하게 되어 레이아웃 전체의 구성이 일그러지게 되었다.

 

이 방식을 유지한 채로 범용으로 레이아웃을 구현하려 갖가지 방법을 시도했고,

결국에 도달한 방법은 dimens를 사용하여 각 해상도마다 각각 다른 마진을 적용하는 방법이었다.

이는 꽤나 고된 노가다 작업이었다. 각 화면마다 사용된 마진값을 일일이 정해줘야 했고,

뭐가 뭔지도 헷갈려 중복된 값을 사용하기도 했다. 코딩이라고 말하기도 민망한 수준이다.

 

최근에 시작한 개인 프로젝트인 라일락 스토리의 회원가입 화면을 제작하기로 했는데,

이전의 고생이 생각나서 이번에는 조금 다른 방법을 시도해보기로 결정했다.

LinearLayout을 사용해서  뷰가 들어갈 영역을 그룹화하고, weight을 사용하여 화면에서 차지하는 비율을 정하기로!

화면을 제목 영역과 콘텐츠 영역으로 나누고, 마진을 속성값으로 주는 대신 빈 레이아웃으로 대체하기로 했다.

이런 식으로 마진을 빈 레이아웃으로 하고 weight 값을 주면 고정적인 값 대신 화면에서 차지하는 고정된 비율로 자연스럽게 여백을 표현할 수 있게 된다.

그룹화된 레이아웃에 id를 설정해주어 추후에도 읽기 편하게 만들어놓았다.

마진을 가변적으로 표현해도, 텍스트는 고정된 값으로 설정해놓았기에, 텍스트는 잘리는 현상이 목격되었다.

그럼 텍스트도 가변적으로 표현해야 한다.

<TextView
                    android:id="@+id/txt_label"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:autoSizeMaxTextSize="100dp"
                    android:autoSizeMinTextSize="10dp"
                    android:autoSizeTextType="uniform"
                    android:text="이름" />

각 TextView마다 자동으로 크기가 조정되도록 하는 코드를 삽입했다.

그리고 그 결과.

의도했던 레이아웃의 비율에 따라 각 뷰의 크기가 유동적으로 결정되는 자연스러운 레이아웃이 완성되었다.

다른 기기로 해상도 변경을 했을 때 보여지는 모습이다.

해상도와 크기가 변경되었음에도, 부분적으로 ConstraintLayout을 사용한 제목 부분을 빼고는 화면 구성이 나름 괜찮게 보여진다.

이런 방법을 몰랐다면 나는 계속해서 반복되는 노가다로 몇일을 허비했어야 할 것이다.

언제나 좋은 방법을 익히려 노력하는 것이 아주 많은 양의 수고를 덜어준다는 것을 깨달았다.