[Android] Customing BottomNavView

안녕하세요. 블랙진입니다.

ViewPager2에서 사용할 수 있는 초 간단한 CustomBottomNavView 예제 코드입니다.

0. CustomView 생성

- @JvmOverloads 를 추가하면 코틀린 컴파일러가 자동으로 오버로딩한 자바 메소드를 추가 해준다.

- xml 상에서 자식 뷰를 생성했을 때 자식 뷰 만큼 네비게이션이 만들어 집니다.

- 자식뷰에서 설정한 style의 isSelected 여부에 따라 네비게이션의 뷰가 변경됩니다.

class BottomNavView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {

    private val items = hashMapOf<Int, View>()

    fun setViewPager(pager: ViewPager2) {

        pager.adapter?.let { adapter ->
            if (childCount == adapter.itemCount) {
                for (i in 0 until childCount) {
                    items[i] = getChildAt(i).apply {
                        setOnClickListener {
                            pager.currentItem = i
                        }
                    }
                }
            } else {
                error("child view not match the viewpager view count")
            }

        } ?: error("adapter is null")

        pager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                for ((k, v) in items) {
                    v.isSelected = k == position
                }
            }
        })
    }
}

<사용법>

1. Xml에 적용

- BottomNavView의 자식 뷰 갯수 만큼 네비게이션을 만들어 줍니다.

- isSelected에 따라 포커싱 되었을 때 View가 변경됩니다.

<com.tistory.blackjin.myinatagram.customview.BottomNavView
    android:id="@+id/llBottomNav"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:orientation="horizontal"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent">

    <TextView
        style="@style/TextInstagramBottomNav"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="라이브러리" />

    <TextView
        style="@style/TextInstagramBottomNav"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="사진찍기" />

</com.tistory.blackjin.myinatagram.customview.BottomNavView>

2. TextVIew의 Style을 선언해 줍니다.

<style name="TextInstagramBottomNav" parent="@android:style/Widget.TextView">
    <item name="android:textSize">17sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:background">@drawable/selector_text_bottom_nav</item>
</style>

3. selector_text_bottom_nav 생성

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="#0091ff" android:state_selected="true" />
    <item android:drawable="#3c3c3c" />
</selector>

4. CustomBottomNav에 ViewPager2를 연결해주면 끝!

binding.llBottomNav.setViewPager(binding.vpInstagram)