Android实现带水平进度条的图片滑块 替换圆点指示器

需求说明 #

当前使用ViewPager实现图片滑块，搭配TabLayout完成了圆点指示器，需要替换为水平进度条样式（滑动时进度条平滑填充，切换页面时同步过渡）。

步骤1：修改布局文件 #

移除原有的TabLayout，替换为包含背景条和前景进度条的线性布局，放在ViewPager下方对应位置：

<androidx.viewpager.widget.ViewPager
    android:id="@+id/slider_pager"
    android:layout_width="0dp"
    android:layout_height="220dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<!-- 水平进度条指示器 -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:layout_marginHorizontal="20dp"
    android:layout_marginTop="180dp"
    android:orientation="horizontal"
    android:weightSum="1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/slider_pager">

    <!-- 灰色背景条 -->
    <View
        android:id="@+id/background_bar"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/progress_bar_bg" />

    <!-- 彩色进度条（随滑动更新宽度） -->
    <View
        android:id="@+id/progress_bar"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0"
        android:background="@drawable/progress_bar_selected" />
</LinearLayout>

步骤2：创建进度条样式文件 #

在res/drawable目录下创建两个shape文件：

progress_bar_bg.xml（背景条样式）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="2dp" />
    <solid android:color="@android:color/darker_gray" />
</shape>

progress_bar_selected.xml（前景进度条样式）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="2dp" />
    <solid android:color="@color/teal_200" />
</shape>

步骤3：添加ViewPager滑动监听 #

在Activity/Fragment中，通过监听ViewPager的滑动进度，实时更新前景进度条的宽度：

private ViewPager sliderpager;
private View progressBar;
private int totalPages;
private float pageWidth;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.your_layout_name); // 替换为你的布局文件名

    sliderpager = findViewById(R.id.slider_pager);
    progressBar = findViewById(R.id.progress_bar);

    // 设置ViewPager适配器（需自行实现，比如自定义SliderAdapter）
    sliderpager.setAdapter(new SliderAdapter(this));
    totalPages = sliderpager.getAdapter().getCount();

    // 计算单页对应的进度条宽度
    progressBar.post(() -> {
        pageWidth = progressBar.getParent().getWidth() / (float) totalPages;
    });

    // 监听页面滑动，更新进度条
    sliderpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            // 计算当前进度条宽度：当前页宽度 + 滑动偏移量对应的宽度
            float progressWidth = (position + positionOffset) * pageWidth;
            progressBar.getLayoutParams().width = (int) progressWidth;
            progressBar.requestLayout();
        }

        @Override
        public void onPageSelected(int position) {}

        @Override
        public void onPageScrollStateChanged(int state) {}
    });
}

可选：添加自动轮播功能 #

如果需要自动切换图片，可添加Handler实现定时轮播：

private Handler sliderHandler = new Handler();
private Runnable sliderRunnable = new Runnable() {
    @Override
    public void run() {
        int currentPage = sliderpager.getCurrentItem();
        int nextPage = (currentPage + 1) % totalPages;
        sliderpager.setCurrentItem(nextPage, true);
        sliderHandler.postDelayed(this, 3000); // 3秒切换一次
    }
};

// 启动轮播
@Override
protected void onStart() {
    super.onStart();
    sliderHandler.postDelayed(sliderRunnable, 3000);
}

// 停止轮播
@Override
protected void onStop() {
    super.onStop();
    sliderHandler.removeCallbacks(sliderRunnable);
}

内容的提问来源于stack exchange，提问作者Rohit Kumar Sehrawat