반응형/적응형 레이아웃은 화면 크기 반응형/적응형 레이아웃을 구현하여 모든 디스플레이 크기, 방향, 멀티 윈도우와 같이 크기 조절 가능한 구성을 포함한 구성 모드로 설정합니다.
반응형 디자인
다양한 기기 폼 팩터를 지원하는 첫 번째 단계는 사용 가능한 디스플레이 공간의 변화에 반응하는 레이아웃 해야 합니다.
ConstraintLayout
반응형 레이아웃을 만드는 가장 좋은 방법은
ConstraintLayout 드림
UI의 기본 레이아웃으로 사용합니다. ConstraintLayout를 사용하면
다른 뷰의 공간 관계에 따른 각 뷰의 위치 및 크기
뷰를 지원합니다. 그러면 모든 뷰가 단일 뷰로 함께 이동하고
변경할 수 있습니다.
ConstraintLayout을 사용하여 레이아웃을 빌드하는 가장 쉬운 방법은 Android 스튜디오의 Layout Editor를 사용하는 것입니다. Layout Editor를 사용하면 새 뷰를
상위 및 동위 뷰와 관련된 제약 조건 적용, 뷰 설정
속성을 사용하여 XML을 직접 수정하지 않고도 이 모든 작업을 수행할 수 있습니다.
ConstraintLayout을 보여주는 Android 스튜디오의 Layout Editor
자세한 내용은 다음을 사용하여 반응형 UI 빌드 ConstraintLayout을 지원합니다.
반응형 너비 및 높이
레이아웃이 다양한 디스플레이 크기에 반응하도록 하려면 다음을 사용합니다.
wrap_content, match_parent 또는 0dp (match constraint): 너비 및
높이를 표시하는 것입니다.
wrap_content: 뷰가 뷰에 포함된 콘텐츠에 맞게 크기를 설정합니다.match_parent: 뷰가 상위 뷰 내에서 최대한 확장됩니다.0dp (match constraint):ConstraintLayout에서match_parent입니다. 뷰는 뷰의 뷰 내부에서 사용 가능한 모든 공간을 차지하고 제약이 있습니다
예를 들면 다음과 같습니다.
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum" />
그림 4는 TextView의 너비와 높이가 디스플레이로 조정되는 방식을 보여줍니다.
기기 방향에 따라 너비가 변경됩니다.
TextView
TextView는 사용 가능한 모든 공간 (match_parent)을 채우도록 너비를 설정합니다.
포함된 요소의 높이에서 필요한 공간만큼 높이를
텍스트 (wrap_content) - 다양한 디스플레이에 뷰를 조정할 수 있음
크기를 조정할 수 있습니다.
LinearLayout를 사용하는 경우
레이아웃에 따라 하위 뷰를 펼칠 수도 있습니다.
가중치가 비례하여
여유 공간을 확보해야 합니다. 그러나 중첩된 LinearLayout에서 가중치를 사용하려면
시스템에서 여러 레이아웃 패스를 실행하여 각 레이어의 크기를 결정합니다.
UI 성능이 느려집니다.
ConstraintLayout는 다음 코드로 가능한 거의 모든 레이아웃을 만들 수 있습니다.
성능에 미치는 영향 없이 LinearLayout되므로 중첩된 클래스를 변환하세요.
LinearLayout부터
ConstraintLayout를 참고하세요. 그런 다음
제약 조건으로 가중치 적용 레이아웃을 정의할 수 있고
체인
적응형 디자인
앱의 레이아웃은 항상 다양한 디스플레이 크기에 반응해야 합니다. 그러나 반응형 레이아웃이라고 해도 멀티 윈도우 모드 디스플레이에 적용됩니다. 예를 들어 개발자가 모바일 운영체제에서는 최적의 사용자 환경을 태블릿입니다. 적응형 디자인은 다양한 환경에 최적화된 대체 레이아웃을 제공합니다. 디스플레이 크기
목록 세부정보 UI의 SlidingPaneLayout
목록 세부정보 UI는 일반적으로 사용할 수 있습니다. 대형 화면에서는 목록 창과 세부정보 창이 일반적으로 나란히 놓이는 것이 일반적입니다. 목록에서 항목이 선택되면 항목 정보는 세부정보 창에 표시되며, 두 창은 그대로 유지됩니다. 나란히 표시됩니다 그러나 작은 화면에서는 두 창이 별도로 표시됩니다. 전체 디스플레이 영역을 차지하는 각 창이 있습니다. 목록 창의 항목이 선택하면 선택한 항목의 정보가 포함된 세부정보 창이 목록 창입니다. 뒤로 탐색은 세부정보 창을 목록으로 대체합니다.
SlidingPaneLayout 드림
두 사용자 환경 중 어느 것이 적합한지 결정하는 로직을
다음과 같습니다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start" />
<androidx.fragment.app.FragmentContainerView
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:defaultNavHost="true"
app:navGraph="@navigation/item_navigation" />
</androidx.slidingpanelayout.widget.SlidingPaneLayout>
다음 항목에 포함된 두 뷰의 layout_width 및 layout_weight 속성
SlidingPaneLayout는 SlidingPaneLayout 동작을 결정합니다. 이 예에서
창이 두 뷰를 모두 표시할 만큼 충분히 큰 경우 (너비 580dp 이상)
창이 나란히 표시됩니다. 그러나 창 너비가
580dp: 창이 서로 겹쳐져 각각 전체 앱을 차지함
창
창 너비가 지정된 총 최소 너비 (580dp)보다 큰 경우
layout_weight 값을 사용하면 두 창의 크기를 비례적으로 조정할 수 있습니다.
예를 들어 목록 창의 너비는 가중치가 없으므로 너비가 항상 280dp입니다.
하지만 세부정보 창은 항상 580dp를 초과하는 가로 공간을 채웁니다.
보기의 layout_weight 설정입니다.
대체 레이아웃 리소스
다양한 디스플레이 크기에 맞게 UI 디자인을 조정하려면 대체 레이아웃을 사용합니다. 리소스에 의해 식별됨 한정자를 참조하세요.
추가적인
res/layout/ 디렉터리가 있습니다. 각 포드에 대한
다른 레이아웃이 필요한 화면 구성 화면 추가
구성 한정자를 layout 디렉터리 이름으로 변경합니다 (예:
사용 가능한 너비가 600dp인 화면의 경우 layout-w600dp).
구성 한정자는 있습니다. 시스템은 시스템 장식 (예: 탐색 메뉴) 및 창 구성 변경사항 (예: 멀티 윈도우) 모드)을 사용하세요.
Android 스튜디오에서 대체 레이아웃을 만들려면 레이아웃 변형으로 다음을 참고하세요. 다양한 화면에 맞게 최적화 뷰를 사용하여 UI를 개발합니다.
최소 너비 한정자
최소 너비 화면 크기 한정자를 사용하면 최소 너비가 밀도 독립형으로 측정되는 디스플레이 레이아웃 픽셀 (dp)로 설정합니다.
Android는 화면 크기를 dp 단위의 측정값으로 설명하여 디스플레이 크기에 맞게 디자인된 레이아웃과 다른 픽셀 밀도를 예로 들 수 있습니다.
예를 들어 다음에 최적화된 main_activity라는 레이아웃을 만들 수 있습니다.
다양한 버전의 파일을 생성하여 스마트폰과 태블릿에서
디렉터리:
res/layout/main_activity.xml # For phones (smaller than 600dp smallest width) res/layout-sw600dp/main_activity.xml # For 7" tablets (600dp wide or wider)
최소 너비 한정자는 디스플레이의 두 측면 중 가장 작은 것을 지정합니다. 따라서 기기의 현재 방향에 상관없이 레이아웃에 사용할 수 있는 전체 디스플레이 크기입니다.
다른 최소 너비 값에 해당하는 일반 화면 크기는 다음과 같습니다.
- 320dp: 소형 휴대전화 화면 (240x320 ldpi, 320x480 mdpi, 480x800 hdpi 등)
- 480dp: 대형 휴대전화 화면, 최대 5인치까지(480x800 mdpi).
- 600dp: 7인치 태블릿 (600x1024mdpi)
- 720dp: 10" 태블릿 (720x1280 mdpi, 800x1280 mdpi 등)
다음 그림은 다양한 화면 dp 너비는 다양한 화면 크기 및 방향에 해당합니다.
최소 너비 한정자의 값은 dp입니다. 중요한 것은 시스템이 픽셀 밀도를 고려한 후 사용 가능한 디스플레이 공간의 양 (원시 픽셀 해상도 아님)
최소 너비와 같은 리소스 한정자를 사용하여 지정하는 크기는 실제 화면 크기가 아닙니다. 대신 크기는 앱 창에 사용할 수 있는 dp 단위. Android 시스템은 시스템 UI 화면의 일부 (예: 메뉴 하단의 시스템 표시줄) 화면 또는 상단의 상태 표시줄)에서 작동하므로 일부 화면이 표시되지 않을 수 있습니다. 사용할 수 있습니다. 앱을 멀티 윈도우 모드에서 사용하는 경우 앱이 포함된 창 크기에만 액세스할 수 있습니다. 이 창의 크기가 조절되면 구성을 트리거하며 새 창 크기로 변경합니다. 시스템이 적절한 레이아웃 파일을 선택할 수 있게 합니다. 이 리소스는 선언하는 한정자 크기는 앱에 필요한 공간만 지정해야 합니다. 시스템은 공간을 제공할 때 시스템 UI가 사용하는 공간을 고려합니다. 있습니다.
사용 가능한 너비 한정자
디스플레이의 최소 너비에 따라 레이아웃을 변경하는 대신 사용 가능한 너비 또는 높이에 따라 레이아웃을 변경하는 것이 좋습니다. 예를 들어 화면을 표시할 때마다 창이 두 개인 레이아웃을 사용하고 싶을 수 있습니다. 최소 600dp의 너비를 제공하며, 이는 웹 브라우저가 기기가 가로 모드 또는 세로 모드 방향인지 확인합니다. 이 경우 사용 가능한 너비 한정자는 다음과 같습니다.
res/layout/main_activity.xml # For phones (smaller than 600dp available width)
res/layout-w600dp/main_activity.xml # For 7" tablets or any screen with 600dp available width
# (possibly landscape phones)
앱에서 사용 가능한 높이가 관건인 경우
사용 가능한 높이 한정자입니다. 예를 들어 layout-h600dp
화면 높이가 600dp 이상이어야 합니다.
방향 한정자
비록 최소 너비 한정자와 사용 가능한 너비 한정자의 조합을 사용하는 경우 사용자가 세로 모드 간에 전환할 때 사용자 환경을 변경하고자 함 사용할 수 있습니다.
이를 위해 port 또는 land 한정자를 레이아웃 디렉터리에 추가할 수 있습니다.
이름을 지정할 수 있습니다 이러한 방향 한정자는 크기 한정자 뒤에 오도록 해야 합니다.
예를 들면 다음과 같습니다.
res/layout/main_activity.xml # For phones res/layout-land/main_activity.xml # For phones in landscape res/layout-sw600dp/main_activity.xml # For 7" tablets res/layout-sw600dp-land/main_activity.xml # For 7" tablets in landscape
모든 화면 구성 한정자에 관한 자세한 내용은 앱 리소스 개요를 참고하세요.
창 크기 클래스
창 크기 클래스는 적응형 레이아웃을 만드는 데 도움이 되는 표시 영역 중단점입니다. 있습니다. 중단점은 앱에서 사용할 수 있는 디스플레이 영역을 좁게, 중간 또는 확장입니다. 너비와 높이는 별도로 지정되므로 따라서 앱에는 항상 너비에 관한 창 크기 클래스와 높이.
프로그래매틱 방식으로 적응형 레이아웃을 적용하려면 다음 단계를 따르세요.
- 창 크기 클래스 중단점을 기반으로 레이아웃 리소스 만들기
- 다음을 사용하여 앱의 너비 및 높이 창 크기 클래스를 계산합니다.
WindowSizeClass#compute()드림 Jetpack WindowManager의 함수 라이브러리 - 현재 창 크기 클래스의 레이아웃 리소스 확장
자세한 내용은 창 크기를 참고하세요. 클래스를 참조하세요.
프래그먼트로 UI 구성요소 모듈화
여러 디스플레이 크기에 맞게 앱을 디자인할 때 프래그먼트를 사용하여 UI 로직을 별도의 구성요소로 분리하여 활동 간에 UI 동작 중복 그런 다음 여러 프래그먼트를 조합하여 대형 화면에서 여러 창 레이아웃을 만들거나 특정 위치에 프래그먼트를 배치하여 작은 화면에서는 별도의 활동을 사용할 수 없습니다.
예를 들어 목록-세부정보 패턴( SlidingPaneLayout)은 하나 또는 여러 개로 구현할 수 있습니다. 목록을 포함하는 프래그먼트와 목록 항목을 포함하는 다른 프래그먼트 확인하세요. 대형 화면에서는 프래그먼트를 나란히 표시할 수 있습니다. 의 작은 화면들이 개별적으로 화면을 채웁니다.
자세한 내용은 프래그먼트 개요를 참고하세요.
활동 삽입
앱이 여러 활동으로 구성된 경우 활동 삽입을 사용하면 다음 작업을 할 수 있습니다. 쉽게 적응형 UI를 만들 수 있습니다.
활동 삽입은 같은 활동을 동시에 실행할 수 있기 때문입니다. 대형 화면에서는 활동을 나란히 표시할 수 있습니다. 작은 화면에서(위에 겹쳐 있음) 있습니다.
XML을 만들어 앱이 활동을 표시하는 방법을 결정합니다. 이 구성 파일을 사용하여 적합한 호스트 이름을 정하는데 디스플레이 크기에 따라 달라집니다. 또는 Jetpack을 만들어 WindowManager API 있습니다.
활동 삽입은 기기 방향 변경 및 폴더블 기기를 지원합니다. 기기가 회전하거나 접히고 펼쳐질 때 활동을 스택하고 스택 해제합니다.
자세한 내용은 활동을 참조하세요. 임베딩.
화면 크기 및 가로세로 비율
다양한 화면 크기와 가로세로 비율에서 앱을 테스트하여 UI 보장 올바르게 조정됩니다.
Android 10(API 수준 29) 및 이후 버전에서는 다양한 가로세로 비율을 지원합니다. 폴더블 폼 팩터는 길고 좁은 화면(예: 21:9 화면)부터 펼쳤을 때 1:1의 정사각형 가로세로 비율이 됩니다.
가능한 한 많은 기기와의 호환성을 보장하려면 다음 화면 가로세로 비율을 최대한 많이 따르세요.
원하는 화면 크기의 기기에 액세스할 수 없는 경우 Android Emulator를 사용해 거의 모든 화면 크기에서 지원됩니다.
실제 기기에서 테스트하고 싶지만 기기가 없다면 Firebase Test Lab에서 배포하도록 설계되어 있습니다.
추가 리소스
- Material Design — 레이아웃 이해