Youtube 만들어보기

LeeEunJae·2022년 8월 3일

android kotlin

Kotlin Project

목록 보기

5/10

실행 결과

📌 요구사항

MotionLayout 사용하기
Exoplayer 사용하기

MotionLayout

ConstrainLayout 라이브러리의 일부(서브 클래스)
https://developer.android.com/training/constraint-layout/motionlayout?hl=ko
레이아웃 전환과 UI 이동, 크기 조절 및 애니메이션에 사용

ExoPlayer

Google 이 Android SDK 와 별도로 배포되는 오픈소스 프로젝트
오디오 및 동영상 재생 기능
오디오 및 동영상 재생 관련 강력한 기능들 포함
유튜브 앱에서 사용하는 라이브러리
https://exoplayer.dev/hello-world.html

Youtube

Retrofit 을 이용하여 영상 목록을 받아와 구성함
MotionLayout 을 이용하여 유튜브 영상 플레이어 화면 전환 애니메이션을 구현함.
영상 목록을 클릭하여 ExoPlayer 를 이용하여 영상을 재생할 수 있음.

📌 MotionLayout 화면 구성하기

https://velog.io/@dldmswo1209/MotionLayout-이용하여-화면-전환-UI-구성하기

📌 영상 목록 API 만들고, 가져오기

https://velog.io/@dldmswo1209/영상목록-API-만들고-가져오기Retrofit2

📌 ExoPlayer2 의존성 추가하기

영상을 재생시키기 위해서 Google 에서 만든 ExoPlayer 를 사용할 것이다.
https://github.com/google/ExoPlayer

implementation 'com.google.android.exoplayer:exoplayer:2.13.3'

📌 RecyclerView 에 item 클릭 이벤트 추가하기

RecyclerView 의 item 클릭 이벤트를 추가하기 위해서 어답터 매개변수로 callback 람다식을 받고 view.setOnclickListener 에서 callback으로 영상 url 과 영상 제목을 전달 한다.

class VideoAdapter(val callback: (String, String) -> Unit) : ListAdapter<VideoModel, VideoAdapter.ViewHolder>(diffUtil) {
    inner class ViewHolder(private val view: View): RecyclerView.ViewHolder(view){

        fun bind(item: VideoModel){
            ...
            view.setOnClickListener{
                callback(item.sources, item.title)
            }
        }
    }

어답터를 생성할 때 다음과 같이 작성해준다.

videoAdapter = VideoAdapter(callback = { url, title->
            play(url, title)
        })

ExoPlayer 객체 생성하기

private fun initPlayer(){
        context?.let {
            player = SimpleExoPlayer.Builder(it).build()
        }
        binding.playerView.player = player
        player?.addListener(object: Player.EventListener{
            override fun onIsPlayingChanged(isPlaying: Boolean) {
                super.onIsPlayingChanged(isPlaying)
                if(isPlaying){
                    binding.bottomPlayerControlButton.setImageResource(R.drawable.ic_baseline_pause_24)

                } else{
                    binding.bottomPlayerControlButton.setImageResource(R.drawable.ic_baseline_play_arrow_24)
                }
            }
        })
    }

영상을 재생하는 play() 메소드

fun play(url: String, title: String){
        context?.let {
            val dataSourceFactory = DefaultDataSourceFactory(it)
            val mediaSource = ProgressiveMediaSource.Factory(dataSourceFactory)
                .createMediaSource(MediaItem.fromUri(Uri.parse(url)))
            player?.apply {
                setMediaSource(mediaSource)
                prepare()
                play()
            }
        }

        binding.playerMotionLayout.transitionToEnd()
        binding.bottomTitleTextView.text = title
    }