[Android] ExoPlayer 분석5. 사용자 인터페이스 맞춤설정

Twaun·2022년 8월 4일

ExoPlayer

Android-Library

목록 보기

10/10

참고: 계속해서 현재 프로젝트를 업데이트하거나 exoplayer-intro/exoplayer-codelab-04에서 프로젝트를 가져와 진행하면 된다.

사용자 인터페이스??

ExoPlayer는 사용자에게 기본 재생 컨트롤러를 제공하고 있으며 맞춤설정이 가능하다.

맞춤설정

사용안하기

컨트롤러의 사용을 안할 수 있습니다. 안하게 된다면 재생이 시작 된 후에 별도로 컨트롤을 할 수 없게 된다.

<androidx.media3.ui.PlayerView
      android:id="@+id/video_view"
      app:use_controller="false"

app:use_controller를 false로 설정하면 컨트롤이 더 이상 표시되지 않습니다.

컨트롤 숨기기 지연 시간

사용자가 마지막으로 상호작용한 후 컨트롤이 숨겨지기 전의 지연 시간(밀리초 단위)을 맞춤설정하려면 show_timeout을 사용합니다. 방법은 다음과 같습니다.

뷰 커스텀

인터페이스에 적용할 새 layout custom_controller.xml을 만든다.

사이트에서 제공하는 기본 인터페이스 XML소스 : XML 를 custom_controller에 복사 붙여넣기 합니다.

그리고 app:controller_layout_id 에 custom_controller 을 등록한다.

<androidx.media3.ui.PlayerView
      android:id="@+id/video_view"
      app:controller_layout_id="@layout/custom_controller"

그리고 실행해보면

<ImageButton android:id="@id/exo_rew"
            style="@style/ExoMediaButton.Rewind"/>

<ImageButton android:id="@id/exo_shuffle"
            style="@style/ExoMediaButton"/>

<ImageButton android:id="@id/exo_repeat_toggle"
            style="@style/ExoMediaButton"/>

<ImageButton android:id="@id/exo_play"
            style="@style/ExoMediaButton.Play"/>

<ImageButton android:id="@id/exo_pause"
            style="@style/ExoMediaButton.Pause"/>

<ImageButton android:id="@id/exo_ffwd"
            style="@style/ExoMediaButton.FastForward"/>

<ImageButton android:id="@id/exo_vr"
            style="@style/ExoMediaButton.VR"/>

과 같이 잘 보인다. 하지만 재생과 멈춤 버튼 기능이 동작하지 않았다..
exoplayer에서 지정한 id를 사용해야 한다고 해서 id가 변경되었는지 확인하기 위해 value 에서 찾아보니 exo_play, exo_pause 가 똑같이 존재했다. 그런데 바로 밑에 exo_play_pause 라는 id가 있는 것을 발견하고

해당 id 를 사용해보니 이것이 멈춤과 동작을 같이 하고 있었다.

<ImageButton android:id="@id/exo_rew"
            style="@style/ExoMediaButton.Rewind"/>

<ImageButton android:id="@id/exo_shuffle"
            style="@style/ExoMediaButton"/>

<ImageButton android:id="@id/exo_repeat_toggle"
            style="@style/ExoMediaButton"/>

<ImageButton android:id="@id/exo_play_pause"
            style="@style/ExoMediaButton.Play"/>

<ImageButton android:id="@id/exo_ffwd"
            style="@style/ExoMediaButton.FastForward"/>

<ImageButton android:id="@id/exo_vr"
            style="@style/ExoMediaButton.VR"/>