반응형 UI 만들기

안드로이드 기기는 다양한 모양과 크기로 제공되므로 앱의 레이아웃이 유연해야 한다.

최대한 많은 기기에서 지원할 수 있도록 레이아웃을 설계할 때 가로 세로 크기 비율을 고정하지 않고 기기에 맞게 최대한 적절하게 반응해야 한다.

반응형 UI를 설계하기 위해서는 다음과 같은 것들이 있다.

• ConstraintLayout
• 하드 코딩 레이아웃 크기 사용하지 않기
• 대체 레이아웃 만들기
• 너비 한정자, 방향 한정자 사용
• 프래그먼트로 UI 구성요소 모듈화
• 나인패치 비트맵 사용
• 모든 화면 크기로 테스트

ConstraintLayout

ConstraintLayout은 수평적인 계층구조의 뷰로 크고 복잡한 레이아웃들을 만들 수 있도록 해준다.

동일 계층의 뷰 또는 부모 뷰와의 관계에 따라 뷰가 배치되는 RelativeLatout과 유사한 형태이지만 더 유연하며 안드로이드 스튜디오의 레이아웃 편집기에서 사용하기 더 쉽다.

ConstraintLayout은 안드로이드 2.3(API level 9) 이상에서 사용 가능하다

하드 코딩 레이아웃 크기 사용하지 않기

레이아웃이 유연하고 다양한 화면 크기에 맞게 조정되는지 확인하려면 뷰 구성요소의 너비 및 크기에 하드코딩(width = “100dp”)을 사용하지 않고 “wrap_content”나 “match_parent”를 사용해야 한다.

 

대체 레이아웃 만들기

레이아웃이 기기마다 다르게 보이듯이 기기의 해상도마다 레이아웃의 차이를 두어 대체 레이아웃을 지원하도록 해야한다.

ex) 해상도 600dp 이상인 경우 태블릿 레이아웃 제공

• 기본 레이아웃에서 Orientation for Preview 선택
• 목록에서 Create Landscape Varient 혹은 Create Other 클릭
• Select Resource Directory에서 화면 한정자 선택하여 Chosen qualifiers 목록에 600dp 이상인 화면에서 보여질 레이아웃 제작

 

너비 한정자, 방향 한정자 사용

너비 한정자, 방향 한정자 사용

안드로이드에서 제공하는 권장 너비 중단점이다.

권장 너비까지 한정하거나 방향을 한정해서 제작해야 한다.

프래그먼트로 UI 구성 요소 모듈화

프래그먼트로 뷰를 모듈화 시켜 제작한다.

레이아웃 안에 프래그먼트를 두어 뷰를 모듈화 시킨 모습

 

나인패치 비트맵 사용

나인패치 비트맵 사용

나인패치를 적용한 이미지를 사용해서 어느 해상도에서도 깨지지 않는 이미지를 제공해야 한다.

 

모든 화면 크기로 테스트

모든 화면 크기로 테스트

제일 좋은 방법은 모든 크기로 테스트를 해보는 것이다.