컨트롤 바는 특정 뷰와 연결된 컨트롤을 제공합니다. 확장되지 않은 버전에서는 최대 5개의 컨트롤이 표시되고 펼치면 최대 5개의 추가 컨트롤이 표시됩니다.
미디어 앱에서 컨트롤바는 재생/일시중지, 이전, 다음 및 기타 맞춤 서드 파티 작업 등의 컨트롤의 재생 뷰에서 사용됩니다.
분석
컨트롤 바에는 비확장형과 확장형의 두 가지 형식이 있습니다. 확장되지 않은 버전에는 최대 5개의 컨트롤이 포함될 수 있습니다. 미디어 앱에서는 이 중 하나가 재생/일시중지입니다.
컨트롤 바를 펼치면 두 번째 행에 최대 5개의 추가 컨트롤이 포함될 수 있습니다. 사용자는 더보기 버튼을 선택하여 컨트롤바를 펼치거나 접을 수 있습니다.
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-anatomy-1.png?authuser=4&hl=ko)
2. 작업 모음의 펼쳐진 부분
3. 컨트롤 중 하나
4. 더보기 버튼 (컨트롤 막대 펼치기 및 접기)
사양
컨트롤 바
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-1.png?authuser=4&hl=ko)
컨트롤바 펼쳐짐
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-2.png?authuser=4&hl=ko)
중앙 컨트롤이 고정된 컨트롤 바에 1~4개의 컨트롤 배치
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-3.png?authuser=4&hl=ko)
고정된 컨트롤이 없는 컨트롤 바에 1~4개의 컨트롤 배치
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-4.png?authuser=4&hl=ko)
컨트롤 바에 6~9개의 컨트롤 배치
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-5.png?authuser=4&hl=ko)
레이아웃 확장
이러한 참조 레이아웃은 다양한 너비와 높이의 화면에 맞게 컨트롤 바를 조정하는 방법을 보여줍니다. 너비 및 높이 카테고리는 레이아웃 섹션에 정의되어 있습니다. 다운샘플링 또는 업샘플링이 발생하기 전에 모든 픽셀 값은 렌더링된 픽셀입니다.
여백 사이가 1028dp를 초과하는 아주 넓은 화면
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-1.png?authuser=4&hl=ko)
여백 사이가 1028dp 미만인 초대형 화면
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-2.png?authuser=4&hl=ko)
와이드 스크린
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-3.png?authuser=4&hl=ko)
표준 너비 화면
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-4.png?authuser=4&hl=ko)
짧은 화면
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-0.png?authuser=4&hl=ko)
1,000dp보다 작은 화면에서 컨트롤 바가 펼쳐짐
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-5.png?authuser=4&hl=ko)
짧은 화면에서 컨트롤 바가 펼쳐짐
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-7.png?authuser=4&hl=ko)
높이가 1,000dp를 초과하는 화면에서 확장된 컨트롤 막대
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-6.png?authuser=4&hl=ko)
스타일
색상
요소 | 색상(데이 모드) | 색상 (야간 모드) |
---|---|---|
기본 아이콘 | White | 흰색 @ 88% |
전체 화면 스크림 | 검은색 @ 78% | 검은색 @ 84% |
그라데이션 스크림 | 미정 | 미정 |
사이즈
요소 | 크기 (dp) |
---|---|
컨트롤 바 | 96 (짧은 화면) / 128 (표준 높이 이상) |
기본 아이콘 | 44 |
예
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-3.png?authuser=4&hl=ko)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-4.png?authuser=4&hl=ko)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-5.png?authuser=4&hl=ko)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-1.png?authuser=4&hl=ko)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-6.png?authuser=4&hl=ko)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-2.png?authuser=4&hl=ko)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-controlbar.gif?authuser=4&hl=ko)