话不多说先上效果图
代码很简单,在这里奉上代码
以下是自定义的环形View
public class RoundRingView extends View {
/*圆弧线宽*/
private float circleBorderWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
/*内边距*/
private float circlePadding = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
/*字体大小*/
private float textSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 50, getResources().getDisplayMetrics());
/*绘制圆周的画笔*/
private Paint backCirclePaint;
/*绘制圆周白色分割线的画笔*/
private Paint linePaint;
/*绘制文字的画笔*/
private Paint textPaint;
/*百分比*/
public static int percent = 0;
/*渐变圆周颜色数组*/
private int[] gradientColorArray = new int[]{Color.GREEN, Color.parseColor("#fe751a"), Color.parseColor("#13be23"), Color.GREEN};
private Paint gradientCirclePaint;
public static boolean aotu=true;
public static int current = 1;
public static int pause=1;
public RoundRingView(Context context) {
super(context);
init();
}
public RoundRingView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public RoundRingView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
backCirclePaint = new Paint();
backCirclePaint.setStyle(Paint.Style.STROKE);
backCirclePaint.setAntiAlias(true);
backCirclePaint.setColor(Color.LTGRAY);
backCirclePaint.setStrokeWidth(circleBorderWidth);
// backCirclePaint.setMaskFilter(new BlurMaskFilter(20, BlurMaskFilter.Blur.OUTER));
gradientCirclePaint = new Paint();
gradientCirclePaint.setStyle(Paint.Style.STROKE);
gradientCirclePaint.setAntiAlias(true);
gradientCirclePaint.setColor(Color.LTGRAY);
gradientCirclePaint.setStrokeWidth(circleBorderWidth);
linePaint = new Paint();
linePaint.setColor(Color.WHITE);
linePaint.setStrokeWidth(5);
textPaint = new Paint();
textPaint.setAntiAlias(true);
textPaint.setTextSize(textSize);
textPaint.setColor(Color.BLACK);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(Math.min(measureWidth, measureHeight), Math.min(measureWidth, measureHeight));
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//1.绘制灰色背景圆环
canvas.drawArc(
new RectF(circlePadding * 2, circlePadding * 2,
getMeasuredWidth() - circlePadding * 2, getMeasuredHeight() - circlePadding * 2), -90, 360, false, backCirclePaint);
//2.绘制颜色渐变圆环
LinearGradient linearGradient = new LinearGradient(circlePadding, circlePadding,
getMeasuredWidth() - circlePadding,
getMeasuredHeight() - circlePadding,
gradientColorArray, null, Shader.TileMode.MIRROR);
gradientCirclePaint.setShader(linearGradient);
gradientCirclePaint.setShadowLayer(10, 10, 10, Color.RED);
canvas.drawArc(
new RectF(circlePadding * 2, circlePadding * 2,
getMeasuredWidth() - circlePadding * 2, getMeasuredHeight() - circlePadding * 2), -90, (float) (percent / 100.0) * 360, false, gradientCirclePaint);
//半径
float radius = (getMeasuredWidth() - circlePadding * 3) / 2;
//X轴中点坐标
int centerX = getMeasuredWidth() / 2;
//3.绘制100份线段,切分空心圆弧
for (float i = 0; i < 360; i += 3.6) {
double rad = i * Math.PI / 180;
float startX = (float) (centerX + (radius - circleBorderWidth) * Math.sin(rad));
float startY = (float) (centerX + (radius - circleBorderWidth) * Math.cos(rad));
float stopX = (float) (centerX + radius * Math.sin(rad) + 1);
float stopY = (float) (centerX + radius * Math.cos(rad) + 1);
canvas.drawLine(startX, startY, stopX, stopY, linePaint);
}
//4.绘制文字
float textWidth = textPaint.measureText(percent + "%");
int textHeight = (int) (Math.ceil(textPaint.getFontMetrics().descent - textPaint.getFontMetrics().ascent) + 2);
canvas.drawText(percent + "%", centerX - textWidth / 2, centerX + textHeight / 4, textPaint);
setPercent(percent,aotu,current,pause);
}
/**
* 设置百分比
*
* @param percent
*/
public void setPercent(int percent,boolean aotuPlay,int currentPlay, int pausePlay) {
if (pausePlay == 1){
if (currentPlay == 1){
percent++;
if (percent < 0) {
percent = 0;
} else if (percent > 100) {
percent = 100;
}
this.percent = percent;
invalidate();
}else{
if (aotuPlay){
percent--;
if (percent < 0) {
percent = 0;
} else if (percent > 100) {
percent = 100;
} else if (percent == 0){
aotu=false;
}
this.percent = percent;
invalidate();
}else if (!aotuPlay){
percent++;
if (percent < 0) {
percent = 0;
} else if (percent > 100) {
percent = 100;
} else if (percent == 100){
aotu=true;
}
this.percent = percent;
invalidate();
}
}
}else {
if (percent < 0) {
percent = 0;
} else if (percent > 100) {
percent = 100;
} else if (percent == 100){
aotu=true;
}
this.percent = percent;
invalidate();
}
}
}
然后在用到的Activity中直接用就行,例如
public class MainActivity extends AppCompatActivity {
private int count = 1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
findViewById(R.id.btnAotuPlay).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
RoundRingView.current = 2;
}
});
findViewById(R.id.btnPause).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
count++;
if (count % 2 == 0){
RoundRingView.pause = 2;
}else{
RoundRingView.pause = 1;
}
}
});
}
}
布局文件也在这里贴出来,方便大家查看
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.example.jiatao.customroundringview.RoundRingView
android:id="@+id/myView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="120dp"
android:text="学习进度"
android:textSize="30sp"/>
<LinearLayout
android:layout_marginTop="450dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btnAotuPlay"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="自动循环"/>
<Button
android:id="@+id/btnPause"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="暂停"/>
</LinearLayout>
</RelativeLayout>
这是以前参阅别人的代码写的,感觉不错,所以分享给大家,希望能帮助到大家
有不好的地方希望大家不要建议,也可以与我交流qq:931532656