Responsive/adaptive design with views

chaeny·2025년 1월 5일
0

반응형 및 적응형 디자인

화면 크기에 관계없이 최적화된 사용자 경험을 제공하는 레이아웃

Responsive Design

앱의 레이아웃이 디스플레이 크기 변화에 유연하게 반응
같은 레이아웃이 크기와 위치를 조정해 모든 디스플레이에서 동작

Responsive Width and Height

뷰 구성 요소의 너비와 높이를 설정할 때 하드코딩된 값 대신 다음을 사용하는 것이 좋다

  • wrap_content 뷰가 자신이 포함하는 콘텐츠의 크기에 맞게 크기 조정
  • 0dp (match constraint) (ConstraintLayout에서만 사용 가능
    match_parent와 유사하지만, ConstraintLayout 내에서 제약 조건에 따라 공간을 사용

LinearLayout layout_weight

LinearLayout에서 layout_weight 속성을 사용하면 자식 뷰가 가용 공간을 비율에 따라 채우도록 설정할 수 있다.
하지만, 중첩된 LinearLayout에서 가중치를 사용하는 경우 시스템이 각 뷰의 크기를 계산하기 위해 여러 번의 레이아웃 처리(layout passes)를 수행해야 한다.
이는 UI 성능 저하를 초래할 수 있다.

중첩된 LinearLayout을 ConstraintLayout으로 변환하면 Constraint Chains를 통해 가중치 기반 레이아웃을 정의할 수 있다.
UI 성능이 개선되고, 더 유연한 레이아웃 설정이 가능해진다.
또한, match_parent 대신 0dp(match constraints)를 사용하여 성능과 유연성을 극대화할 수 있다.

Adaptive Design

화면 크기와 디바이스 유형에 따라 별도의 최적화된 레이아웃을 제공
디바이스마다 다른 레이아웃 파일이나 구성을 사용

SlidingPaneLayout

창 크기에 따라 위 두 사용자 경험 중 어떤 것이 적절한지 판단하는 로직 관리

창 너비가 580dp 이상이면 두 패널이 나란히(side by side) 표시
창 너비가 580dp 미만이면 두 패널이 슬라이딩으로 동작하며 한 번에 하나의 패널만 표시

Alternative Layout Resources

다양한 디스플레이 크기에 UI를 적응시키려면 resource qualifiers를 사용해 대체 레이아웃을 제공해야 한다.
즉, 화면 크기와 구성을 기준으로 시스템이 적절한 레이아웃을 선택한다.

기본 레이아웃 디렉터리: res/layout/
태블릿 전용 레이아웃(600dp 이상): res/layout-w600dp/
큰 화면(720dp 이상): res/layout-w720dp/

Smallest Width Qualifier

dp 단위로 측정된 최소 너비를 기준으로 대체 레이아웃을 제공할 수 있도록 한다.
최소 너비는 디스플레이의 현재 방향에 상관없이 가로/세로 중 작은 쪽의 너비를 기준으로 한다.
즉, 화면 크기에 따라 특정 디스플레이 치수에 최적화된 레이아웃을 설계할 수 있다.

Android는 dp(밀도 독립적 픽셀)를 사용해 화면 크기를 표현하므로, 픽셀 밀도(dpi)에 상관없이 특정 디스플레이 크기에 맞는 레이아웃을 생성할 수 있다.
화면의 실제 픽셀 해상도가 아니라, 픽셀 밀도를 고려한 앱에서 사용할 수 있는 디스플레이 공간을 기준으로 하기 때문이다.

기본 레이아웃: res/layout/main_activity.xml
폰(600dp 미만의 최소 너비)을 대상으로 하는 레이아웃
7인치 태블릿: res/layout-sw600dp/main_activity.xml
600dp 이상의 최소 너비를 가진 디스플레이에 최적화된 레이아웃

Alternative Layout Resources는 다양한 조건(방향, DPI, 비율 등)에 따라 UI를 조정하는 데 유리하다.
Smallest Width Qualifier는 단순히 화면 크기(최소 너비)에 따라 UI를 최적화하는 데 집중한다.

Available Width Qualifier

디스플레이의 최소 너비를 기준으로 레이아웃을 변경하는 대신, 가용한 너비나 높이에 따라 레이아웃을 변경할 수 있다.

Orientation Qualifiers

Smallest Width와 Available Width 한정자만으로 대부분의 화면 크기 변화를 지원할 수 있지만, 사용자가 화면 방향(세로 또는 가로)을 전환할 때 다른 사용자 경험을 제공하고 싶을 수 있다.
이를 위해 orientation qualifiers(화면 방향 한정자)를 사용해 레이아웃을 변경할 수 있다.

port(세로 방향) 또는 land(가로 방향) 한정자를 레이아웃 디렉터리 이름에 추가한다.

Window Size Classes

다양한 화면 크기와 디바이스 환경에 맞는 적응형 레이아웃을 쉽게 구현

디스플레이 영역을 아래 세 가지로 구분한다.

Compact: 작은 화면 (예: 스마트폰)
Medium: 중간 크기 화면 (예: 작은 태블릿)
Expanded: 큰 화면 (예: 태블릿, 데스크톱)

너비와 높이는 각각 별도로 정의되므로, 앱은 항상 너비와 높이에 대해 별도의 Window Size Class를 가진다.
각 Window Size Class의 분기점에 따라 적합한 레이아웃을 설계한다.

Modularized UI Components using Fragments

크기 조정과는 직접적인 연관은 없지만, 화면 크기에 따라 유연하게 배치 및 조합할 수 있는 기반을 제공한다.

Activity Embedding

여러 액티비티를 크기와 디바이스 환경에 따라 유연하게 배치한다.

Screen Sizes and Aspect Ratios

앱이 다양한 디바이스 환경에서 정상적으로 작동하도록 하기 위해 화면 크기와 종횡비에 대한 철저한 테스트가 필요하다.


https://developer.android.com/develop/ui/views/layout/responsive-adaptive-design-with-views

0개의 댓글