앱 바 및 헤더 구성 요소는 앱 캔버스 상단에 있는 전용 막대로, 브랜딩, 최상위 탐색 및 앱 제어에 대한 접근과 같은 중요한 앱 관련 기능을 표시하도록 사용자 지정할 수 있습니다.
앱 내 검색과 같은 주요 컨트롤을 UI 전체에서 표준 위치에 배치하려면 일관된 앱 바 및 헤더 레이아웃을 사용하십시오.
해부
앱 바와 헤더에는 다양한 요소가 포함될 수 있습니다. 다음 두 가지 방법 중 하나로 구성할 수 있습니다.
- 앱 헤더: 앱 헤더로 구성된 경우, 이 컴포넌트는 아이콘과 버튼 사용을 최소화하면서 선택적으로 텍스트를 입력할 수 있는 공간을 제공합니다. 일반적으로 화면 제목과 뒤로 가기 화살표가 포함됩니다.
- 앱 바: 앱 바로 구성하면 아이콘, 탭 , 버튼을 포함할 수 있습니다. 일반적인 요소로는 앱 아이콘과 탐색 옵션이 있습니다.
이 두 버전 모두 앱 내 검색 및 설정과 같은 앱 제어 기능을 포함할 수 있습니다.
1. 뒤로 가기 화살표
2. 화면 제목
3. 버튼
4. 앱 제어
5. 앱 아이콘
6. 기본 탐색(탭)
사양 – 앱 바
기본 탐색 메뉴가 있는 앱 바 - 가운데 정렬
기본 탐색 메뉴가 있는 앱 바 - 왼쪽 정렬
기본 탐색 메뉴가 있는 앱 바 - 축소됨 (탭 대신 서랍 형태)
사양 – 앱 헤더
가운데 정렬된 제목의 앱 헤더
앱 컨트롤 하나가 포함된 앱 헤더
여러 앱 컨트롤이 포함된 앱 헤더
버튼 하나가 있는 앱 헤더
여러 개의 버튼이 있는 앱 헤더
텍스트가 넘치는 앱 헤더
독립형 탭 바가 있는 앱 헤더
맞춤 설정
앱 바와 헤더의 시각적 디자인을 변경하여 브랜드 이미지를 표현할 수 있습니다. 변경 사항은 다음과 같습니다.
- 사용자 지정 아이콘
- 사용자 지정 글꼴
- 활성, 비활성 및 비활성화된 버튼의 모양 설정
- 버튼 크기 및 배치 설정
예시
