切换Fragment时如何更换图片？求Fragment导航进度展示方案

嘿，这个引导页进度点的需求我之前做项目时刚好碰到过，给你两个实用的实现思路，一个适配你现有图片的方案，另一个是更简洁灵活的自定义View方案，你可以根据项目情况选：

方案一：基于现有进度点图片实现 #

首先你得准备两种状态的点图：默认灰色的dot_normal.png和高亮黄色的dot_selected.png，然后在activity_guid.xml里用LinearLayout把6个点的ImageView排好：

<LinearLayout
    android:id="@+id/progress_dot_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center_horizontal"
    android:layout_marginBottom="32dp"
    android:orientation="horizontal"
    android:gap="8dp">

    <ImageView
        android:id="@+id/dot_1"
        android:layout_width="12dp"
        android:layout_height="12dp"
        android:src="@drawable/dot_selected"/> <!-- 默认第一个高亮 -->
    <ImageView
        android:id="@+id/dot_2"
        android:layout_width="12dp"
        android:layout_height="12dp"
        android:src="@drawable/dot_normal"/>
    <!-- 剩下4个dot依葫芦画瓢 -->
</LinearLayout>

接下来在GuidActivity.java里维护当前Fragment的索引，切换Fragment时同步更新进度点：

private int currentFragmentIndex = 0;
// 假设你有切换下一个Fragment的方法
private void switchToNextFragment() {
    currentFragmentIndex++;
    // 这里写你的Fragment切换逻辑，比如用FragmentManager替换容器
    Fragment nextFragment = getTargetFragment(currentFragmentIndex);
    getSupportFragmentManager()
        .beginTransaction()
        .replace(R.id.fragment_container, nextFragment)
        .commit();
    
    // 同步更新进度点
    updateProgressDots(currentFragmentIndex);
}

// 根据索引获取对应Fragment的工具方法
private Fragment getTargetFragment(int index) {
    switch(index) {
        case 0: return new GuidFragment1();
        case 1: return new GuidFragment2();
        // 补充剩下4个Fragment的case
        default: return new GuidFragment1();
    }
}

// 更新进度点状态的核心方法
private void updateProgressDots(int currentIndex) {
    List<ImageView> dotList = Arrays.asList(
        findViewById(R.id.dot_1),
        findViewById(R.id.dot_2),
        findViewById(R.id.dot_3),
        findViewById(R.id.dot_4),
        findViewById(R.id.dot_5),
        findViewById(R.id.dot_6)
    );
    
    for (int i = 0; i < dotList.size(); i++) {
        dotList.get(i).setImageResource(
            i == currentIndex ? R.drawable.dot_selected : R.drawable.dot_normal
        );
    }
}

如果是用ViewPager2管理Fragment的话更省心，直接加个页面切换监听：

viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
    @Override
    public void onPageSelected(int position) {
        super.onPageSelected(position);
        updateProgressDots(position);
    }
});

方案二：自定义ProgressDotView（更简洁灵活） #

要是不想维护多张图片，自定义一个View绘制进度点会更清爽，还能灵活调整颜色、大小、间距：

先创建ProgressDotView.java：

public class ProgressDotView extends View {
    private int dotCount = 6; // 总点数
    private int currentPosition = 0; // 当前选中位置
    private int normalColor = Color.GRAY; // 默认颜色
    private int selectedColor = Color.YELLOW; // 高亮颜色
    private int dotSize = 12; // 点大小（dp）
    private int dotGap = 8; // 点间距（dp）

    private Paint normalPaint;
    private Paint selectedPaint;
    private float density;

    public ProgressDotView(Context context) {
        super(context);
        init();
    }

    public ProgressDotView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        density = getResources().getDisplayMetrics().density;
        dotSize = (int) (dotSize * density);
        dotGap = (int) (dotGap * density);

        normalPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        normalPaint.setColor(normalColor);
        normalPaint.setStyle(Paint.Style.FILL);

        selectedPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        selectedPaint.setColor(selectedColor);
        selectedPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 自动计算View宽高
        int width = (dotSize + dotGap) * dotCount - dotGap;
        int height = dotSize;
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < dotCount; i++) {
            float x = i * (dotSize + dotGap);
            float y = getHeight() / 2f;
            canvas.drawCircle(
                x + dotSize/2f, 
                y, 
                dotSize/2f, 
                i == currentPosition ? selectedPaint : normalPaint
            );
        }
    }

    // 对外提供更新选中位置的方法
    public void setCurrentPosition(int position) {
        if (position >=0 && position < dotCount) {
            currentPosition = position;
            invalidate(); // 触发重绘
        }
    }

    // 可扩展：设置总点数、颜色等
    public void setDotCount(int count) {
        dotCount = count;
        requestLayout();
        invalidate();
    }
}

然后在activity_guid.xml里直接用：

<com.yourpackage.ProgressDotView
    android:id="@+id/progress_dot_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center_horizontal"
    android:layout_marginBottom="32dp"/>

最后在GuidActivity里更新进度就一行代码：

// 切换Fragment后调用
progressDotView.setCurrentPosition(currentFragmentIndex);

这个方案不用准备图片，改样式直接调方法或者加自定义属性就行，后期维护更方便。

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