1. 전체 과정과 지금 할 것

• 전체 과정: 작은 컴포넌트부터 컴포즈로 변경하기
• item_video.xml
• item_video_header.xml
• layout_player_control.xml
• RecyclerView 어댑터 → LazyColumn/LazyRow로 전환

2. 기존 xml

어찌보면 이전 것과 비슷해 보이는데 엄연히 다르다.

노란 부분을 저번 포스트에서 다뤘고, 이번 포스트에서는 빨간 부분을 옮길 것이다.

빌드된 뷰	기존 xml

이전 포스트에서 전환한 ItemVideo.kt와 같이 두 매개변수를 추가해준다. 똑같이 추가해주는 이유는 결국 같은 데이터로 다른 UI를 표현하는 것이기 때문이다.

3. 본격적인 전환

이번 포스팅은 이전 포스팅했던 것의 복붙 수준이라 크게 정리할 내용은 없지만, Compose로 전환할 때 화면을 이런 식으로 분할해서 코드를 짜고 있다.

이전 포스팅에서는 텍스트 컬러를 따로 지정하지 않은 것 같은데 xml에서는 6자리의 hexcode로 지정했다면, 컴포저블 함수 내부에서는 0x 와 ff(alpha 값)를 붙여 표현한다. 이걸 A(alpha)RGB 표기법이라고 한다.

어... 어라 채널 썸네일 이미지를 추가하려고 Row를 추가했더니 이렇게 화면 가득 AsyncImage의 placeholder가 나타났다.

전체를 Column으로 감싸준 후 AsyncImage에 크기를 지정해주면, 아래와 같이 잘 표시된다.

Row에 VerticalAlignment도 지정해주고 텍스트도 척척 배치해준다.

아까의 Divder을 복사해서 야무지게 넣어준다.

원래의 코드에서는 액티비티 단에서 채널 썸네일을 크롭하는데, Compose의 AsyncImage에서 CircleShape으로 잘라내준다.

Compose 전환... 뭐 별 거 없다 ^^