제스처 탐색 : 시각적 중복 처리 (II)

Virginia Poltrack의 표지 이미지

이것은 제스처 내비게이션 시리즈의 두 번째 게시물입니다. 다른 게시물로 건너 뛰려면 아래 나열된 게시물을 찾을 수 있습니다.

제스처 탐색 : 에지 투 에지 (I) 제스처 탐색 : 제스처 충돌 처리 (III) 제스처 탐색 : 몰입 형 모드 (IV)

이 시리즈의 1 부에서는 앱을 '최전방'으로 만드는 방법을 살펴 보았습니다. 불행히도 이로 인해 일부 뷰가 시스템 표시 줄 뒤에 그려져 사용자로부터 가려 질 수 있습니다. 이 게시물에서는 이러한 뷰를 삽입 하여 시스템 표시 줄에서 멀리 이동 하는 방법을 살펴 봅니다 .

이 포스트의 나머지 부분에서는 '시스템 UI'라는 것을 언급 할 것입니다. 이것은 탐색 표시 줄 및 상태 표시 줄과 같이 화면에서 시스템 제공 UI라고 부르는 것입니다. 알림 패널과 같은 것도 포함됩니다.

삽입

용어 세트는 안드로이드 롤리팝의 일에있는 상태 표시 줄 뒤에 그릴려고 자신의 경험에서 일반적으로, 안드로이드 개발자에 두려움을 공격하는 경향이있다. 예를 들어, 주제에 대한 매우 오래된 StackOverflow 질문 에는 많은 뷰가 있습니다 😲.

인세 트는 탐색 또는 상태 표시 줄과 같이 화면의 어느 부분이 시스템 UI와 교차하는지 알려줍니다. 교차는 단순히 콘텐츠 위에 표시되는 것을 의미 할 수 있지만 시스템 제스처에 대해서도 알려줄 수 있습니다. 예를 들어 가장자리에서보기를 이동하여 충돌을 제거하기 위해 삽입을 사용할 수 있습니다.

Android 에서 삽입 은 WindowInsets클래스와 WindowInsetsCompatAndroidX로 표시됩니다. Android Q에는 앱을 레이아웃 할 때 고려해야 할 5 가지 유형의 삽입물이 있습니다. 사용하는 삽입 유형은 현재 상황에 따라 다르므로 각 유형을 살펴보고 살펴 보겠습니다.

시스템 창 삽입

방법: getSystemWindowInsets()

시스템 창 삽입은 오늘날 사용되는 가장 일반적인 삽입 유형입니다. API 1 이후 다양한 형태로 사용되어 왔으며 시스템 UI가 앱 위에 표시 될 때마다 (z 축) 뷰 계층 구조로 전달됩니다. 일반적인 예로는 상태 표시 줄과 탐색 표시 줄이 있지만 화면 키보드 (IME)도 포함됩니다.

시스템 창 삽입을 사용하는 예를 살펴 보겠습니다. 여기서 우리는이 FloatingActionButton의 여유를 가지고, 화면의 하단 모서리에 배치됩니다 (FAB), 16dp(당으로 가이드 라인 ).

Google I / O 앱의 FAB가 에지 투 에지로 전환되기 전

이전 게시물 에서 1 단계와 2 단계를 완료하면 이제보기가 탐색 표시 줄 뒤에 확장되도록 배치됩니다.

전체 화면 레이아웃을 요청한 후 Google I / O 앱에서 FAB

이제 컨퍼런스 일정 목록이 내비게이션 바 뒤에 확장되고 있다는 것을 알 수 있습니다. 이는 더 몰입감있는 경험을 만들고자합니다 .✔️. 이후 포스트에서 목록 / 그리드를 처리하는 방법에 대해 자세히 설명하겠습니다.

예제로 돌아 가면 FAB가 이제 가려져서 사용자가보기를 상호 작용 / 클릭하지 못할 수 있음을 알 수 있습니다. 이런 종류의 시각적 갈등은 우리가 피하고 싶은 것입니다 🚫. 이 예는 장치가 버튼 탐색 모드 (그림 참조)를 사용하도록 설정되어있을 때 더 분명합니다. 동적 색상 적응을 사용하는 제스처 탐색에서는 실제로 약간의 작업을 수행하지만 시스템이 언제든지 반투명 스크림으로 전환 할 수 있으므로 상호 작용이 중단 될 수 있습니다.

이제 모든 탐색 모드에서 앱을 테스트해야한다는 점을 지적하기에 좋은시기입니다.

그렇다면 시각적 충돌을 어떻게 처리할까요? 이것은 시스템 창 삽입 이 작동하는 곳 입니다. 뷰 계층 구조 위에 시스템 막대가 배치되는 위치를 알려 주므로 해당 값을 사용하여 뷰를 시스템 막대에서 멀리 이동할 수 있습니다.

위의 예에서 FAB는 아래쪽 및 오른쪽 가장자리 근처에 배치되어 있으므로 systemWindowInsets.bottomsystemWindowInsets.right값을 사용하여 각 차원에서보기의 여백을 늘려 탐색 모음에서 멀리 이동할 수 있습니다.

이 작업을 마치면 대신 다음을 얻습니다.

이 게시물의 뒷부분에서이를 정확히 구현하는 방법에 대해 자세히 설명합니다.

요약 : 시스템 창 삽입은 클릭 할 수 있는 이동 / 패딩보기에 가장 적합 하며 시스템 표시 줄에 의해 시각적으로 가려지지 않아야합니다.

탭 가능한 요소 삽입

방법: getTappableElementInsets()

다음은 Android Q에 새로 추가 된 탭 가능한 새 요소 삽입입니다. 위의 시스템 창 삽입과 매우 유사하지만 탐색 모음의 다양한 가시성에 응답합니다.

'탭 가능한 요소 삽입'에 대한 TL; DR : 무시하고 대신 '시스템 창 삽입'을 사용하십시오. 아래의 '제스처 삽입'으로 건너 뛰거나 계속 읽고 더 자세히 알아볼 수 있습니다. 🕵️

탭 가능한 요소 삽입 은 클릭 가능한 (탭 가능한)보기에 적용되어야 하는 최소 삽입을 정의합니다 . 이 경우 수단의 최소 값은 여전히 결과 시스템 바 충돌합니다. 이는 항상 시스템 표시 줄과의 충돌을 피하는 값을 제공하는 시스템 창 삽입과 다릅니다.

FloatingActionButton 예제를 사용 하여 값의 차이를 보여 드리겠습니다 .

분홍색 = 탐색 모음 경계. 녹색 = 하단 여백으로 특정 삽입이있는 FAB 경계

기억 결코 사용 세트 - 탐색 모음의 크기를 변경할 수 있기 때문에 위의 테이블에서 값을 하드 코딩하지 않습니다.

'탭 가능한 요소 삽입'과 '시스템 제스처 삽입'은 기기가 버튼 탐색으로 설정되어있을 때 동일하게 작동 함을 알 수 있습니다. 주요 차이점은 장치가 제스처 네비게이션으로 설정된 경우이다 활성화 된 색상 적응있다. 이 시나리오에서 탐색 모음은 투명합니다. 즉, 탭 가능한보기가 이론적으로 그 안에 배치 될 수 있다는 의미이며, 이것이 바로 아래쪽 값 0을 포함하는 이유입니다.

인세 트는 뷰가 배치되어야하는 위치에 대한 개념이 없으므로 탭 가능한 요소 인세 트를 사용할 때 이론적으로 다음과 같은 것을 얻을 수 있습니다.

보기가 내비게이션 바에 매우 가까워서 사용자에게 혼동을주기 때문에 이상적이지 않습니다.

실제로 탭할 수있는 요소 삽입의 거의 모든 사용은 대신 '시스템 창 삽입'에서 더 잘 제공됩니다.

제스처 삽입

방법 :getSystemGestureInsets() &getMandatorySystemGestureInsets()

다음으로 다루게 될 삽입 유형은 Android Q의 플랫폼에 추가 된 새로운 시스템 제스처 삽입입니다. 요약하자면 Android Q는 사용자가 두 가지 터치 제스처를 통해 기기를 탐색 할 수 있도록 새로운 제스처 탐색 모드를 제공합니다.

  1. 디스플레이 가장자리 중 하나에서 수평으로 스 와이프합니다. 이것은 뒤로 기능을 트리거합니다.
  2. 하단 디스플레이 가장자리에서 위로 스 와이프합니다. 이를 통해 사용자는 홈 화면이나 최근 앱으로 이동할 수 있습니다.
Android Q에서 제스처 탐색을 보여주는 데모

시스템 제스처 삽입
먼저 시스템 제스처 삽입이 있습니다. 이러한 삽입에는 시스템 제스처가 앱 제스처보다 우선 하는 화면의 모든 영역 이 포함 됩니다 . Android Q에서 이는 홈 제스처에 대한 하단 삽입과 뒤로 제스처에 대한 왼쪽 및 오른쪽 삽입이 포함 된 삽입이 다음과 같이 약간 보일 것임을 의미합니다.

0
    +--------------+
    |              |
    |   System     |
 40 |   Gesture    |  40
    |   Insets     |
    |              |
    +--------------+
           60

일반적인 예로는 하단 시트 , 스 와이프 게임 상호 작용, 캐 러셀 (ala ViewPager )이 있습니다. 일반적으로 스 와이프 할 수있는 뷰를 가장자리에서 멀리 이동 / 패드하려면 이러한 삽입을 사용해야 합니다.

필수 시스템 제스처 삽입
필수 시스템 제스처는 시스템 제스처 삽입의 하위 집합이며 앱에서 제외 할 수없는 영역 (이름) 만 포함합니다. 여기에서는 제스처 충돌 처리에 대해 설명 할 다음 블로그 게시물로 조금 건너 뛰었지만이 블로그 게시물의 목적을 위해 앱에는 화면의 특정 부분에 대한 시스템 제스처를 제외 할 수있는 기능이 있습니다. .

필수 시스템 제스처 삽입은 시스템 제스처가 항상 우선 순위를 차지하고 필수 인 화면 영역을 알려줍니다 . Android Q에서 현재 필수 영역은 화면 하단의 홈 제스처 영역뿐입니다. 이는 사용자가 항상 앱을 종료 할 수 있도록하기 위한 것입니다.

Android Q 기기의 제스처 삽입 예를 살펴보면 다음과 같은 결과를 얻을 수 있습니다.

0                              0  
    +--------------+               +--------------+
    |              |               |   Mandatory  |
    |   System     |               |   System     |
 40 |   Gesture    | 40          0 |   Gesture    | 0
    |   Insets     |               |   Insets     |
    |              |               |              |
    +--------------+               +--------------+
           60                             60

안정적인 삽입

방법: getStableInsets()

안정적인 삽입은 Android에서 사용할 수있는 마지막 삽입 유형입니다. 제스처 탐색과 특별히 관련이 없지만 완전성을 위해 신속하게 다루겠다고 생각했습니다.

안정적인 세트는 시스템 창 세트에 관련되어 있지만 나타내는 곳 UI 시스템 수있는 시스템 UI가 어디 반대의 앱을 통해 표시, 되어 표시됩니다. 시스템 UI가 가시성이에 / 오프 전환 할 수있는 모드로 설정되어있을 때 안정 세트는 주로 같은 사용하는 경우로 사용되는 린 뒤 또는 몰입 모드 (: 게임, 사진 뷰어, 비디오 플레이어 일반적인 예를).

삽입물 처리

이제 다양한 유형의 인세 트에 대해 더 잘 이해했으면 좋겠습니다. 이제 앱에서 실제로 사용하는 방법을 살펴 보겠습니다.

액세스하는 기본 방법 WindowInsets은 방법을 통하는 것 setOnApplyWindowInsetsListener입니다. 탐색 막대 뒤에 표시되지 않도록 패딩을 추가하려는 뷰의 예를 살펴 보겠습니다.

여기에서는 뷰의 하단 패딩을 시스템 창 삽입 하단 값이 무엇이든간에 설정합니다.

참고 : 에서이 작업을 수행하는 경우 ViewGroup설정 android:clipToPadding="false"하는 것이 좋습니다. 이는 모든 뷰가 기본적으로 안쪽 여백에 대한 드로잉을 클리핑하기 때문입니다. 이 속성은에서 일반적으로 사용되며 RecyclerView이후 게시물에서 자세히 다룰 것입니다.

그래도 리스너 함수가 멱 등성인지 확인하십시오. 리스너가 동일한 인세 트로 여러 번 호출되는 경우 결과는 매번 동일해야합니다. 멱 등성이 아닌 예는 다음과 같습니다.

🙅 +=리스너가 호출 될 때마다 뷰의 패딩을 늘리지 않아야합니다 (ala ). 창 삽입 패스는 언제든지 그리고 뷰 계층 구조의 수명 동안 여러 번 발생할 수 있습니다.

제트 팩

삽입에 대해주의 할 사항은 최소 SDK 버전에 관계없이 항상 JetpackWindowInsetsCompat클래스를 사용하는 것이 좋습니다 . WindowInsets API는 수년에 걸쳐 개선 및 확장되었으며 호환 버전은 모든 API 수준에서 일관된 API 및 동작을 제공합니다.

Android Q에서 사용할 수있는 새로운 삽입 유형이있는 경우 compat 메서드는 모든 API 수준에서 호스트 기기에 맞는 값 집합을 제공합니다. AndroidX 에서 새 API에 액세스하려면 (현재 알파 버전) 이상 으로 업데이트해야합니다 . 최신 버전 은 여기 를 참조 하십시오 .androidx.core:core:1.2.0-xxx

더 나아가

위에서 언급 한 기술은 WindowInsets[Compat]API 를 사용하는 가장 간단한 방법 이지만 코드를 매우 장황하고 반복적으로 만들 수 있습니다. 저는 올해 초 바인딩 어댑터를 사용하여 창 삽입 처리의 인체 공학을 극적으로 향상시키는 몇 가지 기술을 자세히 설명하는 블로그 게시물을 작성했습니다. 여기에서 자세한 내용을 읽을 수 있습니다.

WindowInsets — 레이아웃에 대한 리스너

이 시리즈의 다음 블로그 게시물에서는 앱이 시스템 제스처에 대해 가질 수있는 제스처 충돌을 처리하는 방법을 살펴 봅니다.

제스처 탐색 : 제스처 충돌 처리 (III)

Suggested posts

Flow / LiveData…. 무엇입니까? 최상의 사용 사례. (로그인 시스템 구축)

Flow / LiveData…. 무엇입니까? 최상의 사용 사례. (로그인 시스템 구축)

현대의 안드로이드 개발자로서 "라이브 데이터"또는 "플로우"라는 단어를 여러 번 접했을 것입니다. 관련 기사가 너무 많지만 대부분이 '사용'사례를 무시하고 초보자가 라이브 데이터를 이해하기 어렵다고 생각합니다. 라이브 데이터는 기본적으로 강력한 설계를 지원하는 라이브러리 모음 인 Android 아키텍처 구성 요소의 일부입니다. 테스트 및 유지 관리가 가능한 앱.

그래서 iPhone으로 전환하고 싶습니까?

그래서 iPhone으로 전환하고 싶습니까?

여기에 필요한 모든 것이 있습니다. 친구가이 기사를 요청했습니다. 여기 있습니다.