이 글은 대략 Gesture Navigation: Going edge-to-edge (I)과Gesture Navigation: Handling visual overlaps (II)의 보도에 따라 쓴 것이다.
안드로이드 Q에 새로운 시스템 내비게이션이 추가되었습니다.
iOS에서는 익숙하지만 버튼이 아닌 제스처를 통해 앞 화면으로 돌아가거나 안드로이드 홈 화면으로 옮길 수 있다.

제스처 탐색: 모서리에서 모서리로
이 제스처 내비게이션을 사용하면 응용 프로그램에 기존의 3버튼 내비게이션보다 더 많은 묘사 영역을 제공할 수 있기 때문에 더욱 몰입감 있는 UX를 제공할 수 있다.

뭐가 끝이야?

이게 바로 이거야.

제스처 탐색: 모서리에서 모서리로
이러한 호칭은 어플리케이션에 대한 몰입도가 높은 UX를 제공합니다.
더 자세한 건 구글 개발자 블로그를 꼭 보세요.
Gesture Navigation: Going edge-to-edge(I)도 있고일본어 번역문 읽어보면 이해가 깊어져요!

구현 방법

전제 조건

본 보도는 androidx.core:core-ktx:1.2.0-rc01를 사용하여 코드의 검증을 진행한다.
또 코드에는 데이터로 연결된 곳이 있다.

dependencies {
    ...
    implementation 'androidx.core:core-ktx:1.2.0-rc01'
}

제재로서 목록에 적당한 문자열을 표시합니다.또한 Edge-to-edge에 대응하는 절차에 따라 FloatingActionButton의 다음 UI를 진행할 것입니다.

보통 하면 이런 느낌이에요.모든 코드여기.
왼쪽은 API27, 오른쪽은 API29입니다.
지점을 바꾸면 모든 단계에 대응한다.

전체 화면 표시

우선 상태 표시줄 뒤에 응용 프로그램을 그릴 수 있겠지.
이 자체는 매우 간단하다. 단지 systemUiVisibility 에 플래그를 설정할 뿐이다.
MainActivity.kt

view.systemUiVisibility =
    View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
        View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
        View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

사용자 인터페이스는 상태 표시줄 탐색 모음 뒤에 있습니다.
상태 표시줄 뒤에만 있을 수도 있고 내비게이션 표시줄 뒤에만 있을 수도 있다.
자신에게 맞는 응용 프로그램을 설정하세요.

시스템 막대 색상 변경

다음 겹쳐진 UI를 볼 수 있도록 시스템 표시줄에 투과된 색상을 설정합니다.
Android Q에서는 간단하게 투명하게 설정하면 됩니다.색상이 동적으로 조정됩니다.
Pie 이전에는 동적 색상을 조정하지 않으므로 반투명으로 설정하는 것이 좋습니다.
이때 70%의 불투명도부터 각 응용 프로그램에 표시된 내용에 따라 조정하는 것을 권장합니다.
resources.xml

<!-- styles.xml -->
<resources>
    <style name="Base.App" parent="Theme.MaterialComponents.Light.NoActionBar">
        ...

        <item name="android:navigationBarColor">@color/nav_bar</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

<!-- values/colors.xml -->

<resources>
    ...

    <color name="light_scrim">#B3FFFFFF</color>
    <color name="nav_bar">@color/light_scrim</color>
</resources>

<!-- values-v29/colors.xml -->
<resources>
    <color name="nav_bar">@android:color/transparent</color>
</resources>

나는 묘사 구역이 확대되었는지 알고 싶다.

시각적 중첩과 상응하다

마지막으로 시스템 표시줄 뒤에 그려진 UI에 적절히 대처합시다.간입니다.
예를 들어, FloatingActionButton을 사용하면 단추가 탐색 모음과 겹치는 것을 발견할 수 있습니다.
또는 목록을 이렇게 표시하면 목록의 마지막 요소가 내비게이션 표시줄과 겹쳐 보기 어려워진다.

좋지 않은 대응

좋지 않은 대응으로 각자의 여분이나 포장에 시스템 게이지를 덧붙이는 고도의 패턴이 있다.
시스템 표시줄은 안드로이드의 버전과 단말기에 따라 때때로 다른 경우가 있기 때문에 이를 고려하지 않으면 디스플레이가 붕괴될 수 있다.앞으로의 일을 고려하더라도 이것을 피하는 것이 좋겠다.

이것은 layout_marginBottom 네비게이션 표시줄의 48dp와 FAB의 여분의 16dp를 더하여 64dp로 설정할 때의 캡처입니다.
API27에서 언뜻 보면 좋은 것 같지만 API29에서 보면 무너진다.

적절한 응답

시스템 윈도우 insets를 이용하여 적절하게 대처하세요.
자세한 내용은 WindowsInset 에 설명되지 않습니다.여기 아주 자세하게 설명했으니 꼭 보십시오.ViewCompat의setOnApplyWindowInsetsListener으로접근WindowInset할 수 있기 때문에보기의 여분이나 포장을 조정하세요.
MainActivity.kt

private fun handlingInsets(view: View) {
    // リソースからマージンを取得
    val fabMargin = resources.getDimensionPixelSize(R.dimen.fab_margin)
    // XML等から既にviewで指定されているpaddingを取得
    val listBottomPadding = binding.listText.paddingBottom
    // WindowInsetsにアクセス
    ViewCompat.setOnApplyWindowInsetsListener(view) { _, insets ->
        // マージンを更新するときはこんな感じ
        binding.toolbar.updateLayoutParams<AppBarLayout.LayoutParams> {
            topMargin = insets.systemWindowInsetTop
        }
        binding.fab.updateLayoutParams<CoordinatorLayout.LayoutParams> {
            leftMargin = fabMargin + insets.systemWindowInsetLeft
            rightMargin = fabMargin + insets.systemWindowInsetRight
            bottomMargin = fabMargin + insets.systemWindowInsetBottom
        }
        // パッディングを更新するときはこんな感じ
        binding.listText.updatePadding(
            bottom = insets.systemWindowInsetBottom + listBottomPadding
        )
        insets
    }
}

Windows Insets는 각 버전의 크기를 적절하게 판단하기 때문에 각자 여유를 예쁘게 지정할 수 있습니다.

기타 대응 방법

위에서 소개한 절차는 Insetter라는 라이브러리에서 일치 대응할 수 있다.
여기까지 설명했지만 편하니까 여기도 추천합니다.
간단한 설명 슬라이드 공개, 참고.

총결산

· 입문은 간단하지만 각자 Windows Insets에 대응하면 골절됩니다
·UX가 향상되므로 대처하고 싶습니다.