一.原生的ProgressBar的使用:
1.布局文件:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Activity.MainActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="进度+25%"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_marginTop="50dp"
android:progress="0"
android:progressDrawable="@drawable/progress_bar"
app:layout_constraintTop_toBottomOf="@+id/button" />
</androidx.constraintlayout.widget.ConstraintLayout>
2.布局中的ProgressBar的自定义背景文件:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 背景-->
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dp" />
<solid android:color="#f0f0f0" />
</shape>
</item>
<!-- 进度条 -->
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dp" />
<gradient
android:endColor="#2673d6"
android:startColor="#50cfed" />
</shape>
</clip>
</item>
</layer-list>
3.类文件:
package com.example.myapplication.Activity;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ProgressBar;
import com.example.myapplication.R;
public class MainActivity extends AppCompatActivity {
private Button mButton;
private ProgressBar mProgressBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mButton = findViewById(R.id.button);
mProgressBar = findViewById(R.id.progressBar);
mProgressBar.setMax(100);//设置进度条的最大值为100
mButton.setOnClickListener(v -> {
mProgressBar.incrementProgressBy(25);//每次点击一次进度条增加25%
});
}
}
4.实现效果(每点击一次按钮,进度增加25%,这里点击了三次,出现75%的进度效果):
二.自定义圆形进度条:
1.自定义的圆形进度条的类文件:
package com.example.myapplication.Activity;
import static android.graphics.Color.GREEN;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
public class CustomCircleProgressBar extends View {
private Paint mPaint;//画笔
private RectF mRectF;
private Rect mRect;
private int mCurrent = 1;//当前值
private int mMax = 100;//最大值
private float mArcWidth = 30;//圆环的宽度
private float mWidth;//View的宽度
public CustomCircleProgressBar(Context context) {
this(context, null);
}
public CustomCircleProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomCircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();//初始化画笔
mPaint.setAntiAlias(true);//抗锯齿设置
mRectF = new RectF();//构造一个float类型的矩形
mRect = new Rect();//构造一个int类型的矩形
}
/**
*设置当前值
*/
public void setCurrent(int mCurrent) {
this.mCurrent = mCurrent;
invalidate();//重新绘制
}
/**
*设置最大值
*/
public void setMax(int mMax) {
this.mMax = mMax;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidth = getMeasuredWidth();//获取的view的原始大小(getWidth获取的是view最终显示的大小)
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setStyle(Paint.Style.STROKE);//设置为空心圆
mPaint.setStrokeWidth(mArcWidth); //设置圆环的宽度
mPaint.setColor(Color.GRAY);//绘制的颜色
float bigCircleRadius = mWidth / 2;//大圆的半径
float smallCircleRadius = bigCircleRadius - mArcWidth;//小圆的半径
canvas.drawCircle(bigCircleRadius, bigCircleRadius, smallCircleRadius, mPaint);
mPaint.setColor(GREEN);//绘制的颜色
mRectF.set(mArcWidth, mArcWidth, mWidth - mArcWidth, mWidth - mArcWidth);
canvas.drawArc(mRectF, 90, mCurrent * 360 / mMax, false, mPaint);//绘制圆环
String txt = mCurrent * 100 / mMax + "%";//计算百分比
mPaint.setStrokeWidth(0);
mPaint.setTextSize(40);
mPaint.getTextBounds(txt, 0, txt.length(), mRect);
mPaint.setColor(GREEN);
canvas.drawText(txt, bigCircleRadius - mRect.width() / 2, bigCircleRadius + mRect.height() / 2, mPaint);//绘制百分比
}
}
2.引入自定义View的布局文件:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Activity.MainActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="进度+25%"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.example.myapplication.Activity.CustomCircleProgressBar
android:id="@+id/custom_circle_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button" />
</androidx.constraintlayout.widget.ConstraintLayout>
3.引入自定义View的类文件:
package com.example.myapplication.Activity;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import com.example.myapplication.R;
public class MainActivity extends AppCompatActivity {
private Button mButton;
private CustomCircleProgressBar mCustomCircleProgressBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mButton = findViewById(R.id.button);
mCustomCircleProgressBar = findViewById(R.id.custom_circle_progress_bar);
mCustomCircleProgressBar.setMax(100);
mButton.setOnClickListener(v -> {
mCustomCircleProgressBar.setCurrent(25);
});
}
}
4.实现的效果(点击以下按钮之后出现,显示进度为25%):
三.其他自定义圆形进度条博客:自定义圆形进度条_白云飘絮的博客-CSDN博客_自定义圆形进度条