본문 바로가기

Android

mvvm 형태로 appbar scroll 대비 view 에 alpha 처리 하기

코딩은 했는데 다시 하려니 가물가물하다 =_ = 늙어가고 있나? ㅋ

appbar 에 Scroll 이 어떻게 진행 되는지 알기 위해서 먼저 리스너를 등록해야 하므로 binding adapter 를 생성하고
전달 받은 인자로 vertical offset 값을 전달 받는다.

    @JvmStatic
    @BindingAdapter("bindOffsetChangedListener")
    fun bindOffsetChangedListener(appbar: AppBarLayout, callback: (Int, Int) -> Unit) {
        appbar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appbar, verticalOffset ->
            callback(appbar.totalScrollRange, verticalOffset)
        })
    }

이후 해당 viewmodel 에서 전달 받을 리스너와 알파 값을 처리할 변수를 생성한 뒤
val appbarChangedListener = ObservableField<(Int, Int) -> Unit>()
val viewAlpha = ObservableFloat(1f)

고차 함수에 아래와 같이 내용을 구현한다.
appbarChangedListener.set { maxScroll, offset ->
            val percentage = 1f - abs(offset).toFloat() / maxScroll.toFloat()

            if (mLog.isTraceEnabled) {
                mLog.trace("APPBAR (ALPHA) : $percentage")
            }

            viewAlpha.set(percentage)
        }

이후 view xml 에 중 AppBarLayout 에 app:bindOffsetChangedListener 을 추가 하고
<com.google.android.material.appbar.AppBarLayout
                    android:id="@+id/myblog_app_bar"
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:theme="@style/AppTheme.AppBarOverlay"
                    android:background="@color/colorPrimary"
                    app:bindOffsetChangedListener="@{model.appbarChangedListener}"
            >

알파값을 적용해야할 곳에 android:alpha="@{model.viewAlpha}" 를 추가하면 된다.
<androidx.constraintlayout.widget.ConstraintLayout
                                android:id="@+id/myblog_blog_info"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                app:layout_constraintStart_toStartOf="parent"
                                app:layout_constraintEnd_toEndOf="parent"
                                app:layout_constraintBottom_toBottomOf="@+id/myblog_detail_image"
                                android:alpha="@{model.viewAlpha}"
                        >

이때 model.viewAlpha 의 경우 다수개에 모두 걸수 있다.