미디어 진행률 표시기

미디어 진행 표시기 구성 요소는 미디어 앱 에만 있는 고유한 기능입니다.

진행 표시기는 미디어 소스의 재생 시간과 경과 시간을 시각적으로 보여주는 기능입니다. 진행 표시기는 미디어 앱에서 재생 중에 나타납니다.

해부

미디어 진행 표시기는 미디어 소스의 재생 시간을 나타내는 비활성 트랙(회색으로 표시됨)과 경과된 재생 시간을 나타내기 위해 비활성 트랙 위에 겹쳐 표시되는 활성 트랙(강조 색상으로 표시됨)으로 구성됩니다.

미디어 진행 표시기 구조
1. 활성 트랙
2. 비활성화된 트랙

미디어 진행 상황 표시기는 선형 또는 원형 일 수 있습니다.

선형 미디어 진행 표시기

선형 진행 표시기는 가로축에 재생 시간과 경과 시간을 표시합니다. 표시되는 트랙 부분은 76dp 터치 영역 중앙에 위치합니다. 경과 시간을 탭하거나 드래그하면 미디어 소스 내의 다른 위치로 이동할 수 있습니다. 이 선형 미디어 진행 표시기는 세로 길이가 800dp 이상인 화면에 적합합니다.
원형 진행 표시기 해부학

원형 진행 표시기는 재생 시간과 경과 시간을 원으로 표시합니다. 경과 시간을 탭하거나 드래그하여 다른 위치로 이동하는 기능은 지원되지 않습니다. 이 원형 미디어 진행 표시기는 화면 높이가 800dp 미만인 화면과 미디어 재생 컨트롤이 최소화된 경우에 사용하도록 설계되었습니다.

미디어 진행 지표 상태

재생 중에는 진행 표시기가 다음 네 가지 상태 중 하나에 있습니다.

  • 재생 중: 미디어가 재생 중이며, 활성 트랙이 비활성 트랙을 가로질러 이동하면서 경과 시간을 나타냅니다.
  • 일시 정지됨: 사용자가 재생을 일시 정지했습니다. 현재 재생 중인 트랙은 재생이 일시 정지된 지점에서 고정됩니다.
  • 버퍼링: 미디어 앱이 재생할 콘텐츠를 로드하고 있습니다. 콘텐츠가 로드되는 동안 표시기에 흰색 선이 비활성 트랙을 가로질러 반복적으로 이동합니다.
  • 오류: 미디어를 재생할 수 없습니다. 활성화된 트랙이 없으며, 비활성화된 트랙은 사용 중지되었습니다.

    미디어가 재생됨에 따라 활성 트랙이 비활성 트랙을 가로질러 이동합니다.
    재생 상태: 미디어가 재생됨에 따라 활성 트랙이 비활성 트랙을 가로질러 이동합니다.
    미디어 재생이 일시 중지되는 동안 활성 트랙은 고정됩니다.
    일시 정지 상태: 미디어 재생이 일시 정지된 동안 활성 트랙은 고정된 상태를 유지합니다.
    콘텐츠가 로드되는 동안 흰색 선이 비활성화된 트랙을 가로질러 반복적으로 이동합니다.
    버퍼링 상태: 콘텐츠가 로드되는 동안 흰색 선이 비활성 트랙을 가로질러 반복적으로 이동합니다.
    미디어 재생 오류가 발생하면 비활성화된 트랙이 비활성화됩니다.
    오류 상태: 미디어 오류가 발생하면 활성화된 트랙이 표시되지 않고 비활성화된 트랙이 비활성화됩니다.

명세서

선형 미디어 진행 표시기

선형 미디어 진행 표시기 빨간색 선

순환 미디어 진행 지표

순환 미디어 진행 표시기 빨간색 선

맞춤 설정

미디어 재생 중 미디어 진행 표시기의 현재 트랙은 강조 색상을 사용하여 표시됩니다. 기본 강조 색상은 파란색 계열입니다. 앱 개발자는 미디어 브랜드에 맞는 앱 강조 색상을 지정할 수 있습니다. 마찬가지로 자동차 제조업체(OEM)는 자사 브랜드에 맞는 강조 색상을 제공할 수 있습니다. OEM에서 강조 색상을 제공하는 경우 앱의 강조 색상보다 우선 적용됩니다.

기본 색상, 타사 색상 및 OEM 강조 색상을 사용하여 활성 트랙을 표시하는 선형 미디어 진행률 표시줄
진행 표시기의 기본 스타일은 파란색 계열입니다. 앱 개발자는 기본 앱 스타일을 자사 브랜드의 강조 색상(이 예에서는 녹색)으로 재정의할 수 있습니다. OEM 또한 기본 스타일과 앱 스타일 모두를 자사 브랜드의 강조 색상(이 예에서는 주황색)으로 재정의할 수 있습니다.

원형 미디어 진행률 표시줄은 기본 색상, 타사 색상 및 OEM 강조 색상을 사용하여 활성 트랙을 보여줍니다.
원형 진행 표시기에 적용된 기본, 앱 및 OEM 강조 색상 스타일의 예입니다.

차량 UI 라이브러리 통합 가이드는 OEM 업체가 구성 요소를 맞춤 설정하는 데 필요한 지침을 제공합니다.

예시

선형 미디어 진행 표시기 작동 모습
미디어 앱 재생 화면에 선형 미디어 진행 표시기가 있습니다.

순환 미디어 진행 상황 지표의 실제 활용 사례
여기서 원형 미디어 진행 표시기는 최소화된 재생 컨트롤에 나타납니다. 최소화된 컨트롤은 재생 목록 화면 위에 겹쳐져 있습니다.