Android 15 이상을 실행하는 기기에서 SDK 35 이상을 타겟팅하면 앱이 더 넓은 화면에 표시됩니다. 창은 전체 너비와 높이를 포괄합니다. 시스템 표시줄 뒤에 그려서 디스플레이의 모습을 보여 줍니다. 시스템 표시줄에는 탐색 메뉴가 있습니다.
많은 앱에는 상단 앱 바가 있습니다. 상단 앱 바가 상태 표시줄 뒤에 놓입니다. 원하는 경우 상단 앱 바에서 콘텐츠가 스크롤될 때 상태 표시줄 높이로 축소됩니다.
또한 많은 앱에는 하단 앱 바 또는 하단 탐색 메뉴가 있습니다. 이러한 막대는 또한 화면의 하단 가장자리까지 늘어나고 탐색 메뉴 뒤에 디스플레이가 표시됩니다. 있습니다. 그러지 않으면 앱에서 탐색 메뉴 뒤에 스크롤 콘텐츠를 표시해야 합니다.
앱에서 더 넓은 화면 레이아웃을 구현할 때 다음 사항에 유의하세요. 마음:
- 더 넓은 화면 디스플레이 사용 설정
- 시각적으로 겹치는 부분을 처리합니다.
- 시스템 표시줄 뒤에 스크림을 표시하는 것이 좋습니다.
더 넓은 화면 표시 사용 설정
앱에서 SDK 35 이상을 타겟팅하는 경우 Android 15 이상 기기
이전 Android 버전에서 더 넓은 화면을 사용 설정하려면 다음 단계를 따르세요.
종속 항목을
androidx.activity
라이브러리의 앱 또는 모듈의build.gradle
파일을 다음과 같이 빌드합니다.Kotlin
dependencies { val activity_version =
activity_version
// Java language implementation implementation("androidx.activity:activity:$activity_version") // Kotlin implementation("androidx.activity:activity-ktx:$activity_version") }Groovy
dependencies { def activity_version =
activity_version
// Java language implementation implementation 'androidx.activity:activity:$activity_version' // Kotlin implementation 'androidx.activity:activity-ktx:$activity_version' }enableEdgeToEdge
가져오기 확장 함수를 앱에 삽입해야 합니다.
enableEdgeToEdge
를 호출하여 수동으로 더 넓은 화면 사용 설정
Activity
중 onCreate
에 setContentView
전에 호출해야 합니다.
Kotlin
override fun onCreate(savedInstanceState: Bundle?) { enableEdgeToEdge() super.onCreate(savedInstanceState) ... }
자바
@Override protected void onCreate(@Nullable Bundle savedInstanceState) { EdgeToEdge.enable(this); super.onCreate(savedInstanceState); ... }
기본적으로 enableEdgeToEdge()
는 시스템 표시줄을 투명하게 만듭니다.
상태 표시줄에 반투명한 스크림을 적용하는 3버튼 탐색 모드입니다. 이
시스템 아이콘의 색상과 스크림은 시스템에 따라 조정됩니다.
밝은 테마나 어두운 테마를 설정할 수 있습니다.
enableEdgeToEdge()
함수는 앱이 다음과 같아야 한다고 자동으로 선언합니다.
더 넓은 화면에 배치하고 시스템 표시줄의 색상을 조정합니다.
앱에서
enableEdgeToEdge()
함수. 다음을 참고하세요.
더 넓은 화면 디스플레이를 수동으로 설정
인셋을 사용하여 중복 처리
일부 앱 뷰는 그림 3과 같이 시스템 표시줄 뒤에 그려질 수 있습니다.
어떤 부분을 삽입할 것인지 지정하는 인셋에 반응하여 중첩을 해결할 수 있습니다. 화면이 탐색 메뉴나 상태와 같은 시스템 UI와 교차할 때 있습니다. 교차는 콘텐츠 위에 표시하는 것을 의미할 수 있지만 시스템 동작에 관해 더 자세히 알아보도록 하겠습니다.
앱을 더 넓은 화면으로 표시하는 데 적용되는 인셋 유형은 다음과 같습니다.
시스템 표시줄 인셋: 탭할 수 있고 탭해서는 안 되는 뷰에 적합 시스템 표시줄에 의해 시각적으로 가려집니다.
디스플레이 컷아웃 인셋: 화면 컷아웃이 있을 수 있는 영역에 적합합니다. 기기의 모양에 따라 다르기 때문입니다.
시스템 동작 인셋: 시스템에서 사용하는 동작 탐색 영역 우선순위를 두어야 합니다
시스템 표시줄 인셋
시스템 표시줄 삽입은 가장 일반적으로 사용되는 삽입 유형입니다. Kubernetes는 시스템 UI가 앱 위의 Z축에 표시되는 영역입니다. 그들은 최고 탭할 수 있고 앱 보기가 가능하지 않아야 하는 뷰를 이동하거나 패딩하는 데 사용됩니다. 시스템 표시줄에 의해 시각적으로 가려집니다.
예를 들어 플로팅 작업은 버튼 (FAB)의 일부가 탐색 메뉴에 의해 가려집니다.
동작 모드나 버튼 모드에서 이러한 종류의 시각적 중첩을 피하려면
인코더-디코더를 사용하여 뷰의 여백을 늘릴 수
getInsets(int)
드림
다음 코드로 교체합니다.
WindowInsetsCompat.Type.systemBars()
다음 코드 예는 시스템 표시줄 인셋을 구현하는 방법을 보여줍니다.
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets -> val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars()) // Apply the insets as a margin to the view. This solution sets // only the bottom, left, and right dimensions, but you can apply whichever // insets are appropriate to your layout. You can also update the view padding // if that's more appropriate. v.updateLayoutParams<MarginLayoutParams> { leftMargin = insets.left, bottomMargin = insets.bottom, rightMargin = insets.right, } // Return CONSUMED if you don't want want the window insets to keep passing // down to descendant views. WindowInsetsCompat.CONSUMED }
자바
ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> { Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars()); // Apply the insets as a margin to the view. This solution sets only the // bottom, left, and right dimensions, but you can apply whichever insets are // appropriate to your layout. You can also update the view padding if that's // more appropriate. MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams(); mlp.leftMargin = insets.left; mlp.bottomMargin = insets.bottom; mlp.rightMargin = insets.right; v.setLayoutParams(mlp); // Return CONSUMED if you don't want want the window insets to keep passing // down to descendant views. return WindowInsetsCompat.CONSUMED; });
이 솔루션을 그림 3의 예에 적용하면 그림 4와 같이 버튼 모드의 시각적 겹침
그림 5와 같이 동작 탐색 모드에도 동일하게 적용됩니다.
디스플레이 컷아웃 인셋
일부 기기에는 디스플레이 컷아웃이 있습니다. 일반적으로 컷아웃은 화면에 표시되며 상태 표시줄에 표시됩니다. 기기 화면이 가로 모드일 때 컷아웃이 세로 가장자리에 있을 수 있습니다. 앱의 콘텐츠에 따라 가 화면에 표시되는 경우 디스플레이 컷아웃을 방지하기 위해 패딩을 구현해야 합니다. 기본적으로 앱은 디스플레이 컷아웃에 그려집니다.
예를 들어 대다수의 앱 화면에는 항목 목록이 표시됩니다. 목록 항목을 가리지 않음 제거하지 마세요.
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(binding.recyclerView) { v, insets -> val bars = insets.getInsets( WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout() ) v.updatePadding( left = bars.left, top = bars.top, right = bars.right, bottom = bars.bottom, ) WindowInsetsCompat.CONSUMED }
자바
ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> { Insets bars = insets.getInsets( WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.displayCutout() ); v.setPadding(bars.left, bars.top, bars.right, bars.bottom); return WindowInsetsCompat.CONSUMED; });
다음 함수의 논리 or를 취하여 WindowInsetsCompat
의 값을 구합니다.
시스템 표시줄 및 디스플레이 컷아웃 유형이 있습니다.
패딩이 다음과 함께 스크롤되도록 clipToPadding
를 RecyclerView
로 설정합니다.
목록 항목을 찾습니다. 이렇게 하면 사용자가 시스템 표시줄 뒤로 항목을 이동할 수 있습니다.
스크롤하면 됩니다.
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
시스템 동작 인셋
시스템 동작 인셋은 시스템 동작이 실행되는 창 영역을 나타냅니다. 앱보다 우선순위가 높습니다. 그림 6에서 이 영역은 주황색으로 표시되어 있습니다.
시스템 바 인셋과 마찬가지로, 시스템 동작 삽입이 겹치지 않게 할 수 있습니다.
사용
getInsets(int)
드림
다음 코드로 교체합니다.
WindowInsetsCompat.Type.systemGestures()
이 인셋을 사용하여 스와이프할 수 있는 뷰를 가장자리에서 멀리 이동하거나 패딩합니다. 일반적인 사용 사례로는 하단 시트, 게임에서의 스와이프, ViewPager2
를 사용하여 구현된 캐러셀이 있습니다.
Android 10 이상에서는 시스템 동작 인셋에 홈 동작, 뒤로 동작을 위한 왼쪽 및 오른쪽 인셋이 있습니다.
다음 코드 예는 시스템 동작 삽입을 구현하는 방법을 보여줍니다.
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets -> val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures()) // Apply the insets as padding to the view. Here, set all the dimensions // as appropriate to your layout. You can also update the view's margin if // more appropriate. view.updatePadding(insets.left, insets.top, insets.right, insets.bottom) // Return CONSUMED if you don't want the window insets to keep passing down // to descendant views. WindowInsetsCompat.CONSUMED }
자바
ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> { Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures()); // Apply the insets as padding to the view. Here, set all the dimensions // as appropriate to your layout. You can also update the view's margin if // more appropriate. view.setPadding(insets.left, insets.top, insets.right, insets.bottom); // Return CONSUMED if you don't want the window insets to keep passing down // to descendant views. return WindowInsetsCompat.CONSUMED; });
Material 구성요소
여러 뷰 기반 Android Material 구성요소
(com.google.android.material){:.external}은
BottomAppBar
,
BottomNavigationView
,
NavigationRailView
및 NavigationView
하지만 AppBarLayout
인셋을 자동으로 처리하지 않습니다. 추가
android:fitsSystemWindows="true"
드림
상위 인셋을 처리하거나 setOnApplyWindowInsetsListener
를 사용하세요.
다음을 사용하여 인셋을 처리하는 방법을 읽습니다. Compose의 Material 구성요소
몰입형 모드
일부 콘텐츠는 전체 화면에서 가장 잘 표시되어 사용자에게 더 많은 경험을 제공합니다.
몰입도 높은 경험을 선사합니다. 몰입형 모드의 경우 시스템 표시줄을 숨기려면
WindowInsetsController
및
WindowInsetsControllerCompat
라이브러리:
Kotlin
val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView) // Hide the system bars. windowInsetsController.hide(Type.systemBars()) // Show the system bars. windowInsetsController.show(Type.systemBars())
자바
Window window = getWindow(); WindowInsetsControllerCompat windowInsetsController = WindowCompat.getInsetsController(window, window.getDecorView()); if (windowInsetsController == null) { return; } // Hide the system bars. windowInsetsController.hide(WindowInsetsCompat.Type.systemBars()); // Show the system bars. windowInsetsController.show(WindowInsetsCompat.Type.systemBars());
몰입형 모드의 시스템 표시줄 숨기기를 참고하세요. 참조하세요.
추가 리소스
WindowInsets
동작에 관한 자세한 내용은 다음 참조를 확인하세요.
인셋이 어떻게 작동하는지 알 수 있습니다.