Android开发一款好看的加载控件

关注

原创最新推荐文章于 2026-09-21 13:28:25 发布 2.3k 阅读 AI 写同款· GEO 优化 ›

Ubuntu22.04下ROS2与PX4仿真环境搭建全流程解析本文详细解析了在Ubuntu22.04系统下搭建ROS2与PX4仿真环境的全流程，包括系统准备、ROS2 Humble安装、PX4飞控环境部署、ROS2与PX4通信桥梁搭建等关键步骤。针对常见问题提供了解决方案，并分享了性能优化和开发调试技巧，帮助开发者快速构建无人机仿真开发环境。阅读详情

最近抽了点时间学习了Android自定义view，然后花了大概几天时间搞了个自己的一个款开源。让我们先来看看效果：

本开源主要实现了一款精美、优雅的加载控件。她目前有两种类型：弧形加载（CircleProgressView）和水平加载（HorizontalProgressView），同时，你可以为她设置颜色渐变效果。

传送门地址：https://github.com/Moosphan/Material-ProgressView

欢迎大家献上宝贵的star和issue，我将继续努力完善它，也欢迎大家和我一起来优化它的功能，刚学习自定义view，有很多处理不当的地方希望指出来，谢谢��，后续将提升它的定制性和动画等效果。

再来看看细节的效果图：

下面我们来看看该如何使用这款控件。

快速开始

Gradle:

build.gradle:

compile 'com.moos:Material-ProgressView:1.0.2'

Maven:

<dependency>
<groupId>com.moos</groupId>
<artifactId>Material-ProgressView</artifactId>
<version>1.0.2</version>
<type>pom</type>
</dependency>

通过xml文件来设置:

<com.moos.library.CircleProgressView
      android:id="@+id/progressView_circle"
      android:layout_width="240dp"
      android:layout_height="240dp"
      android:layout_marginTop="12dp"
      app:start_progress="0"
      app:end_progress="60"
      app:start_color="@color/purple_end"
      app:end_color="@color/purple_start"
      app:circleBroken="true"
      app:isTracked="true"
      app:track_width="26dp"/>

<com.moos.library.HorizontalProgressView
    android:id="@+id/progressView_horizontal"
    android:layout_width="320dp"
    android:layout_height="100dp"
    android:layout_marginBottom="40dp"
    android:layout_marginTop="36dp"
    app:start_color="@color/red_start"
    app:end_color="@color/red_end"
    app:track_width="12dp"
    app:end_progress="60"
    app:progressTextColor="#696969"
    app:corner_radius="12dp"
    app:isTracked="true"
    app:trackColor="#f4f4f4"/>

通过java代码动态初始化属性:


      //CircleProgressView
      CircleProgressView circleProgressView = (CircleProgressView) view.findViewById(R.id.progressView_circle);
      circleProgressView.setStartProgress(0);
      circleProgressView.setEndProgress(80);
      circleProgressView.setStartColor(Color.parseColor("#FF8F5D"));
      circleProgressView.setEndColor(Color.parseColor("#F54EA2"));
      circleProgressView.setCircleBroken(true);
      circleProgressView.setTrackWidth(20);
      circleProgressView.setProgressDuration(2000);
      circleProgressView.setTrackEnabled(true);
      circleProgressView.setFillEnabled(false);
      circleProgressView.startProgressAnimation();

      //HorizontalProgressView
      HorizontalProgressView circleProgressView = (HorizontalProgressView)              view.findViewById(R.id.progressView_horizontal);
      horizontalProgressView.setStartProgress(0);
      horizontalProgressView.setEndProgress(80);
      horizontalProgressView.setStartColor(Color.parseColor("#FF8F5D"));
      horizontalProgressView.setEndColor(Color.parseColor("#F54EA2"));
      horizontalProgressView.setTrackWidth(30);
      horizontalProgressView.setProgressDuration(2000);
      horizontalProgressView.setTrackEnabled(true);
      horizontalProgressView.setProgressCornerRadius(20);
      horizontalProgressView.setProgressTextPaddingBottom(12);
      horizontalProgressView.startProgressAnimation();

此外，如果你想要让水平加载控件上方的百分比数值跟随其运动，可以这样设置：
1. 通过xml设置:
```
      app:textMovedEnable="true"
```
1. 通过java代码:
```
      horizontalProgressView.setProgressTextMoved(true);
```
然后你会看到如下效果：

相关文档

控件属性
1. 共有属性:

Attribute	Description
start_progress	起始进度
end_progress	终止进度
start_color	渐变效果的起始颜色
end_color	渐变效果的终止颜色
isTracked	是否显示轨迹背景
track_width	进度条的宽度（边界宽度）
trackColor	轨迹背景的颜色
progressTextVisibility	是否显示进度值文本
progressTextColor	进度值的颜色
progressTextSize	进度值的文本字体大小
progressDuration	动画时长
animateType	动画类型（可以参考属性动画的TimeInterpolator）

2. CircleProgressView的特有属性:

Attribute	Description
isFilled	是否内部填充
circleBroken	是选择圆形还是弧形进度条

3. HorizontalProgressView的特有属性:

Attribute	Description
corner_radius	圆角半径
text_padding_bottom	文字距离view的padding
textMovedEnable	设置进度值是否跟随控件动画移动

回调

  /**
   * 你可以利用该回调来定制自己的progress值的UI展示
   */

  circleProgressView.setProgressViewUpdateListener(new CircleProgressView.CircleProgressUpdateListener() {

  @Override
  public void onCircleProgressStart(View view) {

  }

  @Override
  public void onCircleProgressUpdate(View view,float progress) {

      int progressInt = (int) progress;
      textView.setText(String.valueOf(progress)+"%");
  }

  @Override
  public void onCircleProgressFinished(View view) {

  }
});

horizontalProgressView.setProgressViewUpdateListener(new HorizontalProgressView.HorizontalProgressUpdateListener() {

  @Override
  public void onHorizontalProgressStart(View view) {

  }

  @Override
  public void onHorizontalProgressUpdate(View view,float progress) {

      int progressInt = (int) progress;
      textView.setText(String.valueOf(progress)+"%");
  }

  @Override
  public void onHorizontalProgressFinished(View view) {

  }
});

Methods

//共有的方法
void setAnimateType(@AnimateType int type);
void setStartProgress(float startProgress);
void setEndProgress(float endProgress);
void setStartColor(@ColorInt int startColor);
void setEndColor(@ColorInt int endColor);
void setTrackWidth(int width);
void setProgressTextSize(int size);
void setProgressTextColor(@ColorInt int textColor);
void setProgressDuration(int duration);
void setTrackEnabled(boolean trackAble);
void setTrackColor(@ColorInt int color);
void setProgressTextVisibility(boolean visibility);
void startProgressAnimation();
void stopProgressAnimation();

//CircleProgressView的特有方法
void setCircleBroken(boolean isBroken);
void setFillEnabled(boolean fillEnabled);

//HorizontalProgressView的特有方法
void setProgressCornerRadius(int radius);
void setProgressTextPaddingBottom(int offset);