Android-PorterDuffXfermode 实现进度条！附实例及源码！

2023-09-17 17:10:56

前言

进度条是 Android 应用程序中必不可少的元素，它们为用户提供了有关正在进行操作的视觉指示。虽然 Android 提供了开箱即用的进度条，但有时我们需要根据应用程序的特定需求自定义它们的外观和行为。

这就是 PorterDuffXfermode 发挥作用的地方。PorterDuffXfermode 是一种强大的图形混合模式，允许您将两张图像或图层混合在一起，创建各种视觉效果。在本文中，我们将利用 PorterDuffXfermode 的强大功能来创建自定义的 Android 进度条，它具有独特的视觉吸引力。

了解 PorterDuffXfermode

在深入探讨其实现之前，让我们先了解一下 PorterDuffXfermode 的工作原理。PorterDuffXfermode 是一种图形混合模式，它使用一组预定义的操作来确定如何混合两个图像或图层。这些操作包括：

SRC ：仅使用源图像。
DST ：仅使用目标图像。
SRC_OVER ：将源图像绘制在目标图像之上。
DST_OVER ：将目标图像绘制在源图像之上。
SRC_IN ：仅使用源图像与目标图像相交的部分。
DST_IN ：仅使用目标图像与源图像相交的部分。
SRC_OUT ：使用源图像，但不使用与目标图像相交的部分。
DST_OUT ：使用目标图像，但不使用与源图像相交的部分。
SRC_ATOP ：使用源图像与目标图像相交的部分，并使用源图像的颜色。
DST_ATOP ：使用源图像与目标图像相交的部分，并使用目标图像的颜色。
XOR ：使用源图像与目标图像不重叠的部分。

实现自定义进度条

现在我们已经了解了 PorterDuffXfermode 的基础知识，让我们开始创建自定义进度条的实际过程。

1. 创建一个新项目

首先，创建一个新的 Android Studio 项目。您可以使用任何您喜欢的名称和设置。

2. 添加 PorterDuffXfermode 依赖项

在项目的 build.gradle 文件中，添加以下依赖项：

implementation 'com.google.android.material:material:1.6.1'

3. 创建自定义进度条类

接下来，创建一个新的类来表示我们的自定义进度条。我们将把它命名为 CustomProgressBar。在 CustomProgressBar.java 文件中，添加以下代码：

public class CustomProgressBar extends View {

    private Paint paint;
    private RectF rectF;
    private float progress;

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

    public CustomProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.RED);
        rectF = new RectF();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制进度条背景
        rectF.set(0, 0, getWidth(), getHeight());
        canvas.drawRect(rectF, paint);

        // 设置混合模式
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

        // 绘制进度条进度
        rectF.set(0, 0, getWidth() * progress, getHeight());
        canvas.drawRect(rectF, paint);

        // 重置混合模式
        paint.setXfermode(null);
    }

    public void setProgress(float progress) {
        this.progress = progress;
        invalidate();
    }
}

4. 在布局中使用自定义进度条

现在我们的自定义进度条类已经创建好了，我们可以将其添加到布局中。在您的活动布局文件中（例如 activity_main.xml），添加以下代码：

<com.example.customprogressbar.CustomProgressBar
    android:id="@+id/custom_progress_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

5. 在活动中更新进度条

在您的活动中，您可以使用 CustomProgressBar 类来更新进度条的进度。例如，在 MainActivity.java 文件中，添加以下代码：

public class MainActivity extends AppCompatActivity {

    private CustomProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        progressBar = findViewById(R.id.custom_progress_bar);

        // 模拟更新进度条
        new Thread(new Runnable() {
            @Override
            public void run() {
                for (int i = 0; i <= 100; i++) {
                    try {
                        Thread.sleep(100);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }

                    progressBar.setProgress(i / 100f);
                }
            }
        }).start();
    }
}