앱 위젯 개요

위젯은 홈 화면 맞춤설정의 필수 요소입니다. Kubernetes가 '한눈에 보기'로 표시 앱의 가장 중요한 데이터와 기능을 보여주는 뷰 사용자의 홈 화면에서 바로 액세스할 수 있습니다. 사용자가 위젯을 이동할 수 있음 홈 화면 패널에 표시하고, 지원되는 경우 크기를 조절하여 원하는 대로 조정할 수 있습니다.

이 문서에서는 사용자가 직접 만들고 사용할 수 있는 다양한 유형의 위젯을 소개합니다. 몇 가지 설계 원칙이 있습니다 원격 뷰를 사용하여 앱 위젯을 빌드하는 방법 API 및 XML 레이아웃은 간단한 위젯 만들기를 참고하세요. 받는사람 Kotlin과 Compose 스타일 API를 사용하여 위젯을 빌드하는 방법을 알아보려면 다음을 참고하세요. Jetpack Glance

위젯 유형

위젯을 계획할 때는 어떤 종류의 위젯을 빌드할지 생각해 보세요. 위젯은 일반적으로 다음 카테고리 중 하나에 속합니다.

정보 위젯

도쿄를 주로 표시하는 날씨 위젯 예
            흐린 가운데 14도, 예상 기온은
            오후 4시~오후 7시 사이
그림 1. 날씨 앱의 정보 위젯

정보 위젯은 일반적으로 중요한 정보 요소를 표시하고 시간에 따른 정보의 변화를 추적합니다. 정보 위젯의 예로는 날씨 위젯, 시계 위젯, 스포츠 경기 점수 추적 위젯이 있습니다. 정보 탭하기 위젯은 일반적으로 연결된 앱을 실행하고 위젯 정보

컬렉션 위젯

컬렉션 위젯은 갤러리 앱의 사진 모음, 뉴스 앱의 기사 모음, 커뮤니케이션 앱의 이메일 또는 메시지 모음과 같이 동일한 유형의 여러 요소를 표시하는 데 특화되어 있습니다. 컬렉션 위젯은 세로로 스크롤할 수 있습니다.

컬렉션 위젯은 일반적으로 다음과 같은 사용 사례에 중점을 둡니다.

  • 컬렉션을 둘러보는 중입니다.
  • 컬렉션 요소를 연결된 있습니다.
  • 완료로 표시하는 등 여러 요소와의 상호작용은 Android 12 (API 수준 31)의 복합 버튼에 관해 알아봅니다.

관리 위젯

'라이트 리스트'라는 앱의 위젯 전환 스위치 표시
            라벨이 '침실'인 경우 '주방', '거실'입니다. 첫 번째 2개의
            전환 스위치 꺼짐
그림 4. 컨트롤 위젯의 예

제어 위젯의 주요 목적은 자주 사용되는 함수를 표시하여 사용자가 앱을 열지 않고도 홈 화면에서 트리거할 수 있습니다. 있습니다. 앱의 리모컨이라고 생각하면 됩니다. 예시 제어 위젯은 사용자가 집 안의 조명을 켤 수 있는 홈 컨트롤 위젯입니다. 사용 또는 사용 중지합니다.

컨트롤 위젯과 상호작용하면 연결된 세부정보 뷰가 있습니다. 이는 제어 위젯의 함수가 데이터를 출력하는지, 검색 위젯의 경우처럼 말이죠

하이브리드 위젯

엄지손가락 버튼이 표시된 일반적인 음악 앱
             뒤로, 재생/일시중지, 앞으로 및 '좋아요'를 누르면 됩니다. 아티스트와
            트랙이 '아티스트'로 표시됨 '예시 음악'이라고 입력하면 각각 1개의 값으로 사용합니다.
그림 5. 음악 앱 위젯의 예

일부 위젯은 앞의 섹션에 나온 유형(정보, 컬렉션, 컨트롤) 중 하나를 나타내지만, 대부분의 위젯은 다양한 유형의 요소를 결합한 하이브리드입니다. 예를 들어 음악 플레이어가 기본적으로 제어 위젯이지만 사용자에게 어떤 트랙인지 표시할 수 있습니다.

위젯을 계획할 때 기본 유형 중 하나를 중심으로 디자인하고 요소를 추가합니다. 사용할 수 있습니다

Google 어시스턴트와 위젯 통합

사용자의 응답으로 Google 어시스턴트가 모든 유형의 위젯을 표시할 수 있음 음성 명령입니다. 이 경우 앱 작업을 통해 사용자는 다음과 같은 어시스턴트 플랫폼에서 빠른 답변과 대화형 앱 환경을 이용할 수 있습니다. Android 및 Android 자동. 어시스턴트의 위젯 처리에 관한 자세한 내용은 앱 작업 통합하기를 참고하세요. (Android) 위젯과 같은 다른 위젯을 사용하는 방법을 자세히 알아볼 수 있습니다.

위젯 제한사항

위젯은 '미니 앱'으로 이해할 수 있지만 위젯을 디자인하기 전에 이해해야 할 중요한 제한사항이 있습니다.

동작

위젯은 홈 화면에 있기 때문에 홈 화면에 기본 탐색 메뉴입니다. 이렇게 하면 더 많을 것입니다. 앱에서 사용자가 홈에서 해당 동작이 이미 수행되고 있는 경우 화면 간에 가로로 이동할 수 있습니다. 홈 화면 간에 이동하기 위한 용도로 사용됩니다.

위젯에 사용할 수 있는 유일한 동작은 터치수직 스와이프입니다.

요소

위젯에 사용할 수 있는 동작에 제한사항이 있으므로 제한된 동작에 의존하는 일부 UI 기본 구성요소는 위젯에 사용할 수 없습니다. 완벽한 지원되는 빌딩 블록의 목록과 레이아웃 제한에 대한 자세한 내용은 위젯 레이아웃 만들기유연한 위젯 제공 참조 레이아웃에 관해 자세히 알아보세요.

디자인 가이드라인

위젯 콘텐츠

위젯은 앱에서 사용할 수 있는 새롭고 흥미로운 콘텐츠를 '광고'하여 사용자를 앱으로 유인할 수 있는 훌륭한 방법입니다.

신문 1면의 티저처럼 위젯은 앱 정보에 집중하고 더욱 풍부한 세부정보와의 연결 제공 확인할 수 있습니다. 위젯은 '간식' 정보를 제공하는 반면 '식사'를 의미합니다. 앱에 특정 정보에 관한 자세한 내용이 표시되는지 확인 위젯의 크기가 됩니다.

순수한 정보 콘텐츠 외에도 위젯이 앱에서 자주 사용하는 영역으로 연결되는 탐색 링크 이를 통해 사용자는 작업을 더 빠르게 수행하고 앱의 기능적 도달 범위를 집까지 확장합니다. 화면에 나타납니다.

위젯의 탐색 링크에 적합한 후보는 다음과 같습니다.

  • 생성 함수: 사용자가 생성할 수 있는 함수입니다. 새 콘텐츠(예: 새 문서 또는 새 메시지 작성)에 사용됩니다.

  • 최상위 수준에서 앱 열기: 일반적으로 정보 요소를 탭합니다. 사용자를 하위 수준 세부정보 화면으로 이동합니다. 더 많은 탐색 유연성을 제공하므로 사용자가 다른 방법으로 이동할 때 사용하는 전용 앱 바로가기를 대체 삭제할 수 있습니다. 이 기능에 애플리케이션 아이콘 사용 또한 현재 보고 있는 데이터가 명확하지 않습니다.

위젯 크기 조절

표준 Google 시계 위젯
그림 6. 표준 Google 시계 위젯

터치 및 크기 조절 가능한 위젯을 들고 있다가 손을 떼면 크기 조절 모드 사용자는 드래그 핸들 또는 위젯 모서리를 사용하여 권장 크기

크기를 조절하면 사용자가 위젯의 높이와 너비를 조정할 수 있습니다. 제약 조건을 적용할 수 있습니다. 이러한 결제 수단의 사용 여부를 위젯의 크기를 자유롭게 조절할 수 있거나 가로 또는 세로 크기로 제한됩니다. 있습니다. 기본적으로 위젯이 있는 경우 크기 조절을 지원할 필요가 없음 고정 크기입니다.

사용자가 위젯의 크기를 조절할 수 있도록 하면 다음과 같은 중요한 이점이 있습니다.

  • 사용자가 각 위젯에 표시할 정보의 양을 미세하게 조정할 수 있습니다.
  • 홈의 위젯과 바로가기 레이아웃에 더 큰 영향을 줄 수 있습니다. 패널을 닫습니다

사용 중인 위젯 유형에 따라 위젯의 크기 조절 전략을 계획합니다. 있습니다. 목록 또는 그리드 기반 컬렉션 위젯은 일반적으로 간단합니다. 위젯 크기를 조절하면 세로 스크롤 영역이 확장되거나 축소되기 때문입니다. 위젯의 크기에 관계없이 사용자는 여전히 모든 정보를 스크롤할 수 있습니다. 할 수 있습니다.

정보 위젯은 직접 계획할 필요가 없습니다. 모든 콘텐츠가 지정된 크기 내에 들어가야 합니다. 사용자는 동적으로 위젯의 콘텐츠와 레이아웃을 사용자가 크기 조절 작업을 시작합니다.

다음 예에서 사용자는 날씨 위젯의 크기를 3개의 걸음 수를 늘려 현재 위치의 날씨에 대한 더 풍부한 정보를 위젯이 커집니다.

가장 작은 3x2 그리드 크기의 날씨 위젯 예제와
            위치 이름 (도쿄), 기온 (14°) 및
            부분적으로 흐림
그림 7. 3x2 그리드 '소형'의 날씨 위젯 예 있습니다.


5x2 '중간' 크기의 날씨 위젯 예 모두 포함하여
            3x2 그리드 크기와 '대부분 흐림' 라벨이 있는 UI 및
            오후 4시부터 오후 7시까지 기온 예보
그림 8. 5x2 그리드 '중간' 크기의 날씨 위젯 예 있습니다.


5x4 '대형'의 날씨 위젯 예 모든 UI 크기를 포함하여
            3x2 및 5x2 그리드 크기와 날씨 예보를 제공하는 것은
            화요일부터 금요일까지
그림 9. 5x4 그리드 '대형'의 날씨 위젯 예 있습니다.

위젯 크기별로 표시되는 앱 정보의 양을 결정합니다. 크기가 작은 경우 필수 정보에 집중한 다음 문맥을 추가하세요. 정보 역시 확장될 수 있습니다.

레이아웃 고려사항

위젯의 크기에 따라 위젯을 배치하는 것은 개발에 사용하는 기기의 배치 그리드입니다. 이 값은 초기 근사값으로 유용하지만 다음 사항에 유의하세요.

  • 가변적인 그리드 크기 대신 '크기 버킷'에 걸쳐 위젯 크기 조절 전략을 계획하면 가장 신뢰할 수 있는 결과를 얻을 수 있습니다.
  • 셀의 수, 크기 및 간격은 기기마다 크게 다를 수 있습니다. 있습니다. 따라서 위젯은 유연해야 하며 공간이 예상보다 많거나 적게 수용됩니다.
  • 사용자가 위젯의 크기를 조절하면 시스템은 dp 크기 범위로 응답합니다. 위젯이 직접 다시 그릴 수 있습니다.
  • Android 12부터는 더 정밀한 크기 속성과 더 유연한 레이아웃을 제공할 수 있습니다. 여기에는 다음과 같은 콘텐츠가 포함됩니다.

사용자 위젯 구성

사용자가 위젯을 설정해야 유용하게 사용할 수 있는 경우도 있습니다. 사용자가 메일을 보내기 전에 메일 폴더를 선택해야 하는 이메일 위젯을 생각해 보세요. 받은편지함을 표시할 수도 있고, 사용자가 사진에서 위치를 직접 표시할 갤러리의 사진입니다. Android 위젯은 사용자가 위젯을 홈 화면에 놓은 직후 구성 선택사항을 표시합니다.

위젯 디자인 체크리스트

  • 위젯에서 한눈에 파악할 수 있는 정보의 작은 부분에 초점을 맞춥니다. 펼치기 자세히 알아볼 수 있습니다.
  • 용도에 적합한 위젯 유형을 선택합니다.
  • 위젯의 콘텐츠가 다양한 크기에 맞게 조정되는 방식을 계획합니다.
  • 다음과 같은 방법으로 위젯 레이아웃이 방향 및 기기와 무관하게 만듭니다. 레이아웃이 늘어나거나 접힐 수 있습니다.
  • 위젯에 추가 구성이 필요한지 고려합니다.