1. 전체 과정과 지금 할 것

• 전체 과정: 작은 컴포넌트부터 컴포즈로 변경하기
• item_video.xml
• item_video_header.xml
• layout_player_control.xml
• activity_main.xml

2. 기존 xml

xml 파일 이름에서 알 수 있다시피, 재생되는 비디오 위에 오버레이되는 뷰이다. 이전 뷰들과 다른 새로운 부분이 있다면 이미지 버튼이 존재한다는 점.

3. 본격적인 전환

일단 버튼 하나만 가져와본다. xml에서 쓰던 drawable을 불러와 지정해준다.

원래 매테리얼에서 제공하는 아이콘을 이용하려면 아래처럼 써야하지만 xml이 존재하기 때문에 painter을 이용해 그려준다.

        Icon(
            imageVector = Icons.AutoMirrored.Filled.Send,
            contentDescription = null
        )

세 버튼의 drawable을 찾아서 붙여넣어준다.

겹치지 않게 놓기 위해 Row로 감싸줄건데, 기존의 xml에서는 되감기, 앞으로 감기 버튼이 각각 화면 너비의 20%, 80%에 위치해 있었다.

이를 표현하려면 Spacer와 modifier의 weight를 이용하면 된다.

우선 Alignment와 Arrangement를 이용해 수직 중앙에 배치한다.

Spacer의 weight 속성을 이용해 버튼을 배치한다.

까먹고 안 한 부분인데 전체 위젯들을 Box로 감싸주고 xml에서처럼 배경색을 지정해준다.

시간을 표시해주는 더미 텍스트를 넣어준다.

이제 타임바 부분인데 이 부분이 관건이다.

최상단에서 timebar을 조작하기 위한 콜백함수를 받아준다.
onScrubStart, onScrubMove, onScrubStop을 인자로 받아준다.

onScrubStart는 막대를 터치하거나 드래그하기 시작할 때,
onScrubMove는 꾹 누른 상태로 조작하고 있을 때,
onScrubStop은 손을 뗐을 때 호출되게 구현할 예정이다.

세 콜백함수를 뜯어보자.

onScrubStart
() -> Unit = {}
==> 이 콜백함수는 매개변수가 없다. 시작되었다는 이벤트 알림만 제공한다. 이 매개변수를 받지 않았을 때는 아무 동작도({}) 하지 않는다.

onScrubMove
(Long) -> Unit = {}
==> 이 콜백함수는 드래그할 때 계속해서 Long 타입의 시간을 받는다. 반환값은 없고, 이 매개변수를 받지 않았을 때는 onScrubStart와 마찬가지로 아무 동작도 하지 않는다

onScrubStop
==> 손을 뗐을 때, Long 타입의 시간을 받는다. 표현식은 onScrubMove와 같다.

시간을 표출하는 텍스트 밑에 타임바 뷰를 만들어 줄 것이다.
let을 이용해서 player가 null일 때의 처리를 해준다.

ExoPlayerTimebar을 구현해준다.
TimeBar.OnScrubListener의 인터페이스 안에 있는 메서드 3개를 구현해준다.
콜백함수는 외부에서 이벤트를 싣고 오고, 실제 동작이 구현되는 것은 이 부분이다.

AndroidView를 이용해 뷰를 구현할 건데, 세 가지 매개변수를 받는다.
factory는 Context를 받아 뷰를 반환하고, update는 뷰가 재구성될 때마다 호출되는 람다함수이다.

factory에서 뷰를 그리는 함수를 호출한다.

DefaultTimeBar을 그리는 함수를 구현해준다.
이미 재생된 시간의 색인 Playedcolor와,
재생될 시간의 시간인 ScrubberColor을 구현해준다.

프리뷰에서는 Timebar이 null이기 때문에 아래처럼 null처리 해준 더미가 표시된다.
그래서 Timebar만 프리뷰를 하나 더 만들어서 확인해봤다.

4. 맺음말

AndroidView로 Timebar을 구현해야한다는 게 인상깊었던 컴포넌트였다.
다음엔 activity_main.xml을 전환할 계획이다. CoordinatorLayout, AppBarLayout, RecyclerView, BottomNavigationView이 혼재되어 있기 때문에 꽤나 흥미로워질 예정!