안드로이드 코틀린 KenBurnsView 구현하기 ~ Android Kotlin KenBurnsView

안드로이드 코틀린 KenBurnsView 구현하기

Android Kotlin KenBurnsView

 

github.com/flavioarfaria/KenBurnsView

이번에는 많이 사용하지는 않지만, 막상 사용하면 생각외로 이쁜 효과 라이브러리를 소개해보려고 한다.

사례로는 사람들의 시선을 끌 수 있는 배너나, 심심한 이미지에 효과를 더해주는 곳에 사용하면 좋을 것 같다. 요즘에는 핸드폰 메모리도 출중하게 좋아, 많이 누적될 시 느려지는 현상을 걱정하면서 쓸 필요는 없다고 생각이 되지만, 안보일때에는 stop시키는게 좋다고 생각이 든다.

라이브러리는 위 url에서 확인할 수 있다.

 

이 url이 무엇인지 궁금할 수 있어 demo play gif이미지 한장을 가지고 왔다.

이렇게 사진의 포커스가 자동으로 임의이 방향으로 움직이는 효과이며, 사진은 원래 이미지보다 확대되어 움직일 수 있게끔 구현되었다.

implementation 'com.flaviofaria:kenburnsview:1.0.7'

현재 버전은 1.0.7까지 나온상태이며 업데이트는 5년전을 마지막으로 소식이 없다. 

androidx에서도 문제없이 적용이 될까 걱정했는데, 다행히 무사히 동작에 이상이 없었다. 라이브러리는 java로 만들어져 있지만, 당연히 코틀린에서 문제없이 작동된다.

라이브러리는 위 코드처럼 implementation만 하면 된다.

<com.flaviofaria.kenburnsview.KenBurnsView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:src="@drawable/luda"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

xml에서 KenBurnsView는 위와같이 사용하면 되며 imageView를 상속받아서 만들어진 커스텀뷰로써 imageView처럼 사용하면 된다.

이미지는 background로 넣을 시 움직이는 동작을 하지 않으며 샘플에서도 src로 되어 있어 src로 이미지를 넣어야 한다.

이미지 삽입 시 미리보기에서 위에서 말했던 것 처럼 기존 이미지보다 확대된 상태의 이미지가 삽입되어지며, 포커스는 가운데가 아닌 다른 방향으로 잡히게 되어있다. 전혀 놀랄 필요가 없다.

inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        private val TRANSITION_TIME : Long = 1000

        private var txt : TextView = itemView.findViewById(R.id.titleArea)
        private var img : KenBurnsView = itemView.findViewById(R.id.imgArea)
        private var accelerateDecelerateInterpolator : AccelerateDecelerateInterpolator
                = AccelerateDecelerateInterpolator()
        private var generator : RandomTransitionGenerator
                = RandomTransitionGenerator(TRANSITION_TIME, accelerateDecelerateInterpolator)

        fun bindView(item : String, position : Int) {
            txt.text = item
            img.setTransitionGenerator(generator)
            img.animate()
        }

    }

나는 리싸이클러뷰의 아이템에 적용하였으며, ViewHolder에 적용하였다.

기본적인 셋팅으로는 AccelerateDecelerateInterpolator, RandomTransitionGenerator이 있으며 RandomTransitionGenerator은 랜덤 방향으로 포커스 이동이 된다, 다른 메소드도 있는지 확인은 해보지 않아서..다른 방향을 원할 시 라이브러리 샘플이나 코드를 뜯어보길 바란다. 그리고 알려주길 바란다.

RandomTransitionGenerator에는 long타입의 밀리세컨드의 시간을 입력하고 위에서 정의한 AccelerateDecelerateInterpolator도 넘겨주면 기본적인 셋팅은 끝이 난다.

실행시킬때는 setTransitionGenerator()을 통해 실행시켜주며, 일시정지도 정지 등등 컨트롤 할 수 있다.

 

더이상의 업데이트가 없어 아쉬운 라이브러리이며, 적절하게 사용하며 앱의 퀄리티를 더 높여줄 수 있을거라 생각이 든다.