如何调整CollapsingToolbarLayout中PageIndicatorView的位置？

问题截图说明：PageIndicatorView出现在页面顶部靠近返回按钮的位置，而期望它显示在ViewPager的中部或底部区域。

首先，问题的核心原因是CollapsingToolbarLayout继承自FrameLayout，你使用的android:layout_alignParentBottom、android:layout_centerHorizontal是RelativeLayout的专属布局属性，在FrameLayout中不会生效，所以指示器默认被放在了布局的左上角位置。

下面给你两种简单可行的修改方案：

方案一：用RelativeLayout包裹ViewPager与指示器 #

把ViewPager和PageIndicatorView放进一个RelativeLayout容器中，这样就能利用RelativeLayout的定位属性，轻松把指示器固定在ViewPager的底部居中位置：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:attrs="http://schemas.android.com/apk/res-auto"
    android:background="#424242"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/appbar_header_height"
        android:fitsSystemWindows="true"
        android:theme="@style/Theme.AppCompat.Light.DarkActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:expandedTitleMarginStart="@dimen/activity_margin_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <!-- 用RelativeLayout包裹ViewPager和指示器，实现精准定位 -->
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true">

                <android.support.v4.view.ViewPager
                    android:id="@+id/viewPager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax"/>

                <com.rd.PageIndicatorView
                    android:id="@+id/pageIndicatorView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="48dp"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    app:piv_animationType="worm"
                    app:piv_dynamicCount="true"
                    app:piv_interactiveAnimation="true"
                    app:piv_selectedColor="@color/gray_50"
                    app:piv_unselectedColor="@color/gray_300"
                    app:piv_viewPager="@id/viewPager"
                    attrs:piv_padding="12dp"
                    attrs:piv_radius="8dp" />
            </RelativeLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:layout_gravity="bottom"
                android:background="@drawable/scrim"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:paddingBottom="@dimen/activity_margin_content"
        android:paddingTop="@dimen/activity_margin_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:listItem="@layout/item_dessert"/>

</android.support.design.widget.CoordinatorLayout>

方案二：利用FrameLayout的layout_gravity属性直接定位 #

如果不想额外嵌套布局，也可以直接用FrameLayout支持的android:layout_gravity属性，把指示器设置为底部居中：

修改PageIndicatorView的属性即可：

<com.rd.PageIndicatorView
    android:id="@+id/pageIndicatorView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="48dp"
    android:layout_gravity="bottom|center_horizontal" <!-- 替换原RelativeLayout属性 -->
    app:piv_animationType="worm"
    app:piv_dynamicCount="true"
    app:piv_interactiveAnimation="true"
    app:piv_selectedColor="@color/gray_50"
    app:piv_unselectedColor="@color/gray_300"
    app:piv_viewPager="@id/viewPager"
    attrs:piv_padding="12dp"
    attrs:piv_radius="8dp" />

额外优化：简化Java代码 #

你已经在XML中设置了app:piv_viewPager="@id/viewPager"，PageIndicatorView会自动绑定ViewPager并监听页面切换，不需要手动添加OnPageChangeListener，可以简化代码：

viewPager = findViewById(R.id.viewPager);
myCustomPagerAdapter = new MyCustomPagerAdapter(AnimateToolbar.this, images);
viewPager.setAdapter(myCustomPagerAdapter);
// 无需手动设置页面监听，XML的piv_viewPager已完成绑定
final PageIndicatorView pageIndicatorView = findViewById(R.id.pageIndicatorView);

这样修改后，指示器就能正确显示在ViewPager的底部居中位置了~

内容的提问来源于stack exchange，提问作者Husnain Ali