앱에 더 넓은 화면에 콘텐츠 표시

Compose 방식 사용해 보기
Jetpack Compose는 Android에 권장되는 UI 도구 키트입니다. Compose에서 더 넓은 화면으로 작업하는 방법을 알아보세요.
<ph type="x-smartling-placeholder"></ph> Compose의 더 넓은 화면 → 를 통해 개인정보처리방침을 정의할 수 있습니다.

Android 15 이상을 실행하는 기기에서 SDK 35 이상을 타겟팅하면 앱이 더 넓은 화면에 표시됩니다. 창은 전체 너비와 높이를 포괄합니다. 시스템 표시줄 뒤에 그려서 디스플레이의 모습을 보여 줍니다. 시스템 표시줄에는 탐색 메뉴가 있습니다.

많은 앱에는 상단 앱 바가 있습니다. 상단 앱 바가 상태 표시줄 뒤에 놓입니다. 원하는 경우 상단 앱 바에서 콘텐츠가 스크롤될 때 상태 표시줄 높이로 축소됩니다.

또한 많은 앱에는 하단 앱 바 또는 하단 탐색 메뉴가 있습니다. 이러한 막대는 또한 화면의 하단 가장자리까지 늘어나고 탐색 메뉴 뒤에 디스플레이가 표시됩니다. 있습니다. 그러지 않으면 앱에서 탐색 메뉴 뒤에 스크롤 콘텐츠를 표시해야 합니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> 그림 1. 더 넓은 화면 레이아웃의 시스템 표시줄

앱에서 더 넓은 화면 레이아웃을 구현할 때 다음 사항에 유의하세요. 마음:

  1. 더 넓은 화면 디스플레이 사용 설정
  2. 시각적으로 겹치는 부분을 처리합니다.
  3. 시스템 표시줄 뒤에 스크림을 표시하는 것이 좋습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">상태 표시줄 뒤에 있는 이미지의 예</ph> <ph type="x-smartling-placeholder">
</ph> 그림 2. 후면 이미지의 예 상태 표시줄에 표시됩니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

더 넓은 화면 표시 사용 설정

앱에서 SDK 35 이상을 타겟팅하는 경우 Android 15 이상 기기

이전 Android 버전에서 더 넓은 화면을 사용 설정하려면 다음 단계를 따르세요.

  1. 종속 항목을 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'
    }
    
  2. enableEdgeToEdge 가져오기 확장 함수를 앱에 삽입해야 합니다.

enableEdgeToEdge를 호출하여 수동으로 더 넓은 화면 사용 설정 ActivityonCreatesetContentView 전에 호출해야 합니다.

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)의 일부가 탐색 메뉴에 의해 가려집니다.

더 넓은 화면 구현 예, 탐색 메뉴가 FAB를 가림
그림 3. 화면의 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와 같이 버튼 모드의 시각적 겹침

FAB를 가리지 않는 반투명 탐색 메뉴가
그림 4. 버튼의 시각적 중복 해결 있습니다.

그림 5와 같이 동작 탐색 모드에도 동일하게 적용됩니다.

동작 탐색이 있는 더 넓은 화면
그림 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) -> {
  WindowInsetsCompat bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
    | WindowInsetsCompat.Type.displayCutout()
  );
  v.setPadding(bars.left, bars.top, bars.right, bars.bottom);
  return WindowInsetsCompat.CONSUMED;
});

다음 함수의 논리 or를 취하여 WindowInsetsCompat의 값을 구합니다. 시스템 표시줄 및 디스플레이 컷아웃 유형이 있습니다.

패딩이 다음과 함께 스크롤되도록 clipToPaddingRecyclerView로 설정합니다. 목록 항목을 찾습니다. 이렇게 하면 사용자가 시스템 표시줄 뒤로 항목을 이동할 수 있습니다. 스크롤하면 됩니다.

<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에서 이 영역은 주황색으로 표시되어 있습니다.

시스템 동작 삽입의 예
그림 6. 시스템 동작 인셋

시스템 바 인셋과 마찬가지로, 시스템 동작 삽입이 겹치지 않게 할 수 있습니다. 사용 getInsets(int) 드림 다음 코드로 교체합니다. WindowInsetsCompat.Type.systemGestures()

이 인셋을 사용하여 스와이프할 수 있는 뷰를 가장자리에서 멀리 이동하거나 패딩합니다. 일반적인 용도 케이스에는 하단 시트 그리고 캐러셀을 사용하여 구현된 ViewPager2

Android 10 이상에서는 시스템 동작 인셋에 홈 동작, 뒤로 동작을 위한 왼쪽 및 오른쪽 인셋이 있습니다.

시스템 동작 인셋 측정의 예
그림 7. 시스템 동작 인셋 측정

다음 코드 예는 시스템 동작 삽입을 구현하는 방법을 보여줍니다.

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 구성요소

몰입형 모드

일부 콘텐츠는 전체 화면에서 가장 잘 표시되어 사용자에게 더 많은 경험을 제공합니다. 몰입도 높은 경험을 선사합니다. 몰입형 모드의 경우 시스템 표시줄을 숨기려면 WindowInsetsControllerWindowInsetsControllerCompat 라이브러리:

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 동작에 관한 자세한 내용은 다음 참조를 확인하세요. 인셋이 어떻게 작동하는지 알 수 있습니다.