Android开发：为ViewPager不同Fragment配置不同圆形指示器

嘿，我来帮你搞定这个UI需求！你完全不需要自定义ViewPager，只需要通过两个指示器+页面切换监听就能实现前两个Fragment用顶部指示器、后两个用底部指示器的效果，具体步骤如下：

1. 修改Activity布局，添加两个指示器 #

首先在你的注册Activity布局里，新增一个顶部的指示器（对应图1样式），保留原来的底部指示器（图2样式），并设置初始的显示/隐藏状态：

<LinearLayout 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:orientation="vertical"
    android:background="@drawable/splashbg"
    android:weightSum="4"
    android:layout_height="match_parent"
    tools:context="biz.wrinklefree.wrinklefree.SignUpActivity">

    <!-- 图1样式的顶部指示器，初始隐藏 -->
    <me.relex.circleindicator.CircleIndicator
        android:id="@+id/top_indicator"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:visibility="gone"/>

    <biz.wrinklefree.wrinklefree.CustomViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="3"/>

    <!-- 图2样式的底部指示器，初始显示 -->
    <me.relex.circleindicator.CircleIndicator
        android:id="@+id/bottom_indicator"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="1"/>

</LinearLayout>

2. 绑定ViewPager与两个指示器 #

在你的SignUpActivity代码中，初始化ViewPager和两个指示器，并将它们都绑定到ViewPager上：

// 初始化控件
CustomViewPager viewPager = findViewById(R.id.viewpager);
CircleIndicator topIndicator = findViewById(R.id.top_indicator);
CircleIndicator bottomIndicator = findViewById(R.id.bottom_indicator);

// 设置ViewPager适配器（替换成你自己的适配器类）
FragmentPagerAdapter adapter = new YourSignUpPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);

// 把两个指示器都绑定到ViewPager，确保指示器能同步页面状态
topIndicator.setViewPager(viewPager);
bottomIndicator.setViewPager(viewPager);

3. 添加页面切换监听，动态切换指示器显示 #

通过ViewPager的页面选中监听，根据当前页面的位置，控制两个指示器的显示和隐藏：

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        // 这个方法可以留空，不需要处理
    }

    @Override
    public void onPageSelected(int position) {
        // 前两个Fragment（位置0和1）显示顶部指示器，隐藏底部
        if (position < 2) {
            topIndicator.setVisibility(View.VISIBLE);
            bottomIndicator.setVisibility(View.GONE);
        } else {
            // 后两个Fragment（位置2和3）显示底部指示器，隐藏顶部
            topIndicator.setVisibility(View.GONE);
            bottomIndicator.setVisibility(View.VISIBLE);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        // 这个方法可以留空，不需要处理
    }
});

额外说明 #

如果图1的指示器样式和CircleIndicator默认的圆点不一样，你可以自定义Indicator的样式（比如修改圆点大小、颜色，或者用其他样式的Indicator库），核心逻辑还是根据页面位置切换不同指示器的显示状态，完全不需要改动ViewPager本身的逻辑。

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