返回

自定义 View 一步一步实现圆形进度条！

Android

谈到自定义进度条，有各种形状和风格可供选择。圆形进度条以其独特的设计和吸引人的动画效果而成为一种流行的选择。因此，在本教程中，我们将指导您一步步实现自己的自定义圆形进度条，以便您可以在自己的应用程序中使用它。

  1. 准备工作

首先，在开始创建自定义视图之前，我们需要进行一些准备工作。您需要确保您拥有以下内容：

  • Android Studio：这是一个用于开发 Android 应用的集成开发环境 (IDE)。
  • Android SDK：这是一个包含用于开发 Android 应用所需工具和库的软件开发工具包。
  • 文本编辑器：这是一个用于编写和编辑代码的软件程序。

一旦您拥有了这些，就可以开始创建自定义视图了。

  1. 创建自定义视图类

自定义视图类的第一步是创建一个新的 Android 项目。在 Android Studio 中，单击“文件”>“新建”>“项目”。在“新建项目”对话框中，填写项目详细信息，然后单击“下一步”。在“选择模板”对话框中，选择“空活动”模板，然后单击“下一步”。在“配置活动”对话框中，填写活动详细信息，然后单击“完成”。

现在，您已经创建了一个新的 Android 项目。接下来，我们需要创建一个自定义视图类。在“项目”窗口中，右键单击“app”文件夹，然后选择“新建”>“类”。在“新建类”对话框中，填写类详细信息，然后单击“确定”。

  1. 添加属性

接下来，我们需要向自定义视图类添加一些属性。属性是变量，用于控制视图的外观和行为。在自定义视图类中，添加以下属性：

  • mProgress ：这是一个浮点型变量，用于存储进度条的当前进度。
  • mProgressColor ：这是一个整型变量，用于存储进度条的颜色。
  • mBackgroundColor ：这是一个整型变量，用于存储进度条的背景色。
  • mStrokeWidth ：这是一个浮点型变量，用于存储进度条的线宽。
  1. 实现 onDraw() 方法

接下来，我们需要实现 onDraw() 方法。onDraw() 方法是当视图需要重新绘制时调用的方法。在自定义视图类中，添加以下 onDraw() 方法：

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

    // 计算进度条的中心点
    int centerX = getWidth() / 2;
    int centerY = getHeight() / 2;

    // 计算进度条的半径
    float radius = Math.min(centerX, centerY) - mStrokeWidth / 2;

    // 计算进度条的当前角度
    float angle = 360 * mProgress / 100;

    // 绘制进度条的背景
    Paint backgroundPaint = new Paint();
    backgroundPaint.setStyle(Paint.Style.STROKE);
    backgroundPaint.setStrokeWidth(mStrokeWidth);
    backgroundPaint.setColor(mBackgroundColor);
    canvas.drawCircle(centerX, centerY, radius, backgroundPaint);

    // 绘制进度条的进度
    Paint progressPaint = new Paint();
    progressPaint.setStyle(Paint.Style.STROKE);
    progressPaint.setStrokeWidth(mStrokeWidth);
    progressPaint.setColor(mProgressColor);
    canvas.drawArc(centerX - radius, centerY - radius, centerX + radius, centerY + radius, -90, angle, false, progressPaint);
}
  1. 将自定义视图添加到布局中

现在，我们需要将自定义视图添加到布局中。在 activity_main.xml 布局文件中，添加以下代码：

<com.example.myapplication.MyCustomView
    android:id="@+id/my_custom_view"
    android:layout_width="200dp"
    android:layout_height="200dp" />
  1. 在活动中使用自定义视图

现在，我们需要在活动中使用自定义视图。在 MainActivity.java 类中，添加以下代码：

public class MainActivity extends AppCompatActivity {

    private MyCustomView mMyCustomView;

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

        mMyCustomView = findViewById(R.id.my_custom_view);

        // 设置进度条的当前进度
        mMyCustomView.setProgress(50);

        // 设置进度条的颜色
        mMyCustomView.setProgressColor(Color.GREEN);

        // 设置进度条的背景色
        mMyCustomView.setBackgroundColor(Color.GRAY);

        // 设置进度条的线宽
        mMyCustomView.setStrokeWidth(10);
    }
}

现在，您可以运行应用程序并查看自定义圆形进度条。