實現viewPager滑動翻頁的指示器效果及動畫

實現viewPager指示器和滑動效果，效果如下：

 

 

技術點：

1、整個按鈕區域用RadioGroup，實現單選效果

2、RadioGroup裏放兩個LinearLayout，分別顯示pager1和pager2的按鈕

3、LinearLayout裏垂直佈局，放radioButton，顯示圖片。底部一個view，顯示標籤。如果view需要圓角，就用cardView包裹view

4、RadioGroup需要設置clipChildre=false，這樣滑動動畫時translationX可以突破自己的區域

5、滑動動畫，在onPageScrolled裏使用translationX和alpha結合使用

6、選中後，切換背景狀態，使用isSelected

 

1、進activity或者fragment初始化狀態

// 初始化radioGroup狀態
viewPager.setCurrentItem(0, true)
radio_layout.check(R.id.btn_main_hall)
main_hall_indicator.isSelected = true
main_moment_indicator.isSelected = false

 

2、切換和滑動時的動畫

override fun onPageSelected(pos: Int) {
    Log.d("xxx", "HomeFragment onPageSelected pos = $pos")
    mainHallItemModel.selectedPage = pos
    main_hall_indicator_layout.alpha = 1.0f
    main_moment_indicator_layout.alpha = 1.0f
    if (pos == 0) {
        radio_layout.check(R.id.btn_main_hall)
        main_hall_indicator.isSelected = true
        main_moment_indicator.isSelected = false
    } else if (pos == 1) {
        radio_layout.check(R.id.btn_main_moment)
        main_hall_indicator.isSelected = false
        main_moment_indicator.isSelected = true
    }
}

override fun onPageScrolled(pos: Int, posOffset: Float, posOffsetPixels: Int) {
    when (viewPager.currentItem) {
        0 -> {
            main_hall_indicator_layout.translationX = posOffset * main_hall_indicator.width
            main_hall_indicator_layout.alpha = 1f - posOffset
        }
        else -> {
            if (pos == viewPager.currentItem && posOffset == 0f) {
                main_moment_indicator_layout.alpha = 1f
                main_moment_indicator_layout.translationX = 0f
            } else {
                main_moment_indicator_layout.alpha = posOffset
                main_moment_indicator_layout.translationX = -((1f - posOffset) * main_hall_indicator.width)
            }
        }
    }
}

3、xml佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:background="@color/white"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/toolBar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize">

        <RadioGroup
            android:id="@+id/radio_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginLeft="27dp"
            android:layout_marginRight="27dp"
            android:clipChildren="false"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center_horizontal"
                android:layout_marginRight="10dp">

                <RadioButton
                    android:id="@+id/btn_main_hall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:button="@drawable/main_hall_radio_selector"
                    android:checked="true"/>

                <androidx.cardview.widget.CardView
                    android:id="@+id/main_hall_indicator_layout"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/home_pager_indicator_height"
                    android:layout_marginLeft="@dimen/home_pager_indicator_margin_left"
                    android:layout_marginRight="@dimen/home_pager_indicator_margin_left"
                    app:cardElevation="0dp"
                    app:cardBackgroundColor="@android:color/transparent"
                    app:cardCornerRadius="@dimen/home_pager_indicator_radius">

                    <View
                        android:id="@+id/main_hall_indicator"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/home_pager_indicator_height"
                        android:background="@drawable/home_pager_indicator_selector"/>

                </androidx.cardview.widget.CardView>

            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center_horizontal">

                <RadioButton
                    android:id="@+id/btn_main_moment"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:button="@drawable/main_topic_radio_selector"/>

                <androidx.cardview.widget.CardView
                    android:id="@+id/main_moment_indicator_layout"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/home_pager_indicator_height"
                    android:layout_marginLeft="@dimen/home_pager_indicator_margin_left"
                    android:layout_marginRight="@dimen/home_pager_indicator_margin_left"
                    app:cardElevation="0dp"
                    app:cardBackgroundColor="@android:color/transparent"
                    app:cardCornerRadius="@dimen/home_pager_indicator_radius">

                    <View
                        android:id="@+id/main_moment_indicator"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/home_pager_indicator_height"
                        android:background="@drawable/home_pager_indicator_selector"/>

                </androidx.cardview.widget.CardView>

            </LinearLayout>

        </RadioGroup>

        <ImageView
            android:id="@+id/logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_main_logo"
            android:adjustViewBounds="true"
            android:scaleType="fitStart"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

        <ImageView
            android:id="@+id/message"
            android:layout_width="46dp"
            android:layout_height="46dp"
            android:layout_marginEnd="26dp"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_message"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <ImageView
            android:id="@+id/messageNoRead"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/shape_message_notify"
            android:visibility="gone"
            app:layout_constraintTop_toTopOf="@id/message"
            app:layout_constraintEnd_toEndOf="@id/message"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.qmnl.pati.ui.album.widget.PreviewViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:descendantFocusability="afterDescendants"/>

</LinearLayout>

4、selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/home_pager_indicator_selected" android:state_selected="true"/>
    <item android:drawable="@color/home_pager_indicator_unselected" android:state_selected="false"/>
</selector>

5、dimens

<dimen name="home_pager_indicator_margin_left">6dp</dimen>
<dimen name="home_pager_indicator_height">6dp</dimen>
<dimen name="home_pager_indicator_radius">3dp</dimen>

6、colors

<color name="home_pager_indicator_selected">#FFFF474F</color>
<color name="home_pager_indicator_unselected">@android:color/transparent</color>