Android自定义带圆点的半圆形进度条

本文实例为大家分享了Android自定义带圆点的半圆形进度条,供大家参考,具体内容如下

仅限用于半圆形,如须要带圆点的圆形进度条,圆点会出现错位现象,此代码仅供,带圆点的圆形进度条有空研究一下!图片效果在下方,

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * 自定义带圆点的进度条
 */
public class HalfProgressBar extends View{
 private int maxProgress = 100;
 //设置进度条背景宽度
 private float progressStrokeWidth = 3;
 //设置进度条进度宽度
 private float marxArcStorkeWidth = 6;
 //设置进度条圆点的宽度
 private float circularDotWidth=15;

 /**
  * 画笔对象的引用
  */
 private Paint paint;

 public synchronized int getProgress() {
  return progress;
 }

 /**
  * Android提供了Invalidate方法实现界面刷新,但是Invalidate不能直接在线程中调用,因为他是违背了单线程模型:Android UI操作并不是线程安全的,并且这些操作必须在UI线程中调用。
  * 而postInvalidate()在工作者线程中被调用 使用postInvalidate则比较简单,不需要handler,直接在线程中调用postInvalidate即可。
  * @param progress 传过来的进度
  */
 public void setProgress(int progress) {
  if (progress < 0) {
   progress = 0;
  }
  if (progress > maxProgress) {
   progress = maxProgress;
  }
  if (progress <= maxProgress) {
   this.progress = progress;
   postInvalidate();
  }
 }
 /**
  * 当前进度
  */
 private int progress = 99;

 private RectF oval;
 private int roundProgressColor;
 private int roundColor;
 private int circularDotColor;
 public HalfProgressBar(Context context) {
  super(context);
 }

 public HalfProgressBar(Context context, AttributeSet attrs) {
  super(context, attrs);
  paint = new Paint();
  oval = new RectF();
  //这是自定义view 必须要写的
  TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.HalfProgressBar);
  roundProgressColor = mTypedArray.getColor(R.styleable.HalfProgressBar_roundProgressColor1, Color.YELLOW);
  roundColor=mTypedArray.getColor(R.styleable.HalfProgressBar_roundColor1, Color.YELLOW);
  circularDotColor=mTypedArray.getColor(R.styleable.HalfProgressBar_circularDotColor1, Color.YELLOW);

 }

 public HalfProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  paint = new Paint();
  oval = new RectF();
  TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.HalfProgressBar);
  roundProgressColor = mTypedArray.getColor(R.styleable.HalfProgressBar_roundProgressColor1, Color.YELLOW);
  roundColor=mTypedArray.getColor(R.styleable.HalfProgressBar_roundColor1, Color.YELLOW);

 }

 @Override
 protected void onDraw(Canvas canvas) {
  // TODO 自动生成的方法存根
  super.onDraw(canvas);
  float width = getWidth();
  float height = getHeight();
  paint.setAntiAlias(false); // 设置画笔为抗锯齿
  paint.setColor(roundColor); // 设置画笔颜色

  paint.setStrokeWidth(progressStrokeWidth); // 线宽
  paint.setStyle(Paint.Style.STROKE);

  oval.left = marxArcStorkeWidth / 2; // 左上角x
  oval.top = circularDotWidth; // 左上角y
  oval.right = width - circularDotWidth / 2; // 左下角x
  oval.bottom = width - circularDotWidth / 2; // 右下角y
  float bangjing = ((width - circularDotWidth/2) / 2);//半径

  //调整圆背景的大小
  canvas.drawArc(oval, 180, 180, false, paint); // 绘制红丝圆圈,即进度条背景
  //进度条颜色
  paint.setColor(roundProgressColor);
  paint.setStrokeWidth(marxArcStorkeWidth);
  canvas.drawArc(oval, 180, 180 * ((float) progress / (float) maxProgress), false, paint); // 绘制进度圆弧,这里是蓝色

  //画圆点
  paint.setColor(circularDotColor);
  paint.setAntiAlias(true); // 设置画笔为抗锯齿
  paint.setStyle(Paint.Style.FILL);
  paint.setStrokeWidth(circularDotWidth);
  //当画笔样式为STROKE或FILL_OR_STROKE时,设置笔刷的图形样式,如圆形样式Cap.ROUND,或方形样式Cap.SQUARE
  paint.setStrokeCap(Paint.Cap.ROUND);
  float jindu = ((float) progress * 1.8f);
  canvas.drawPoint(bangjing - ((float) (Math.sin((Math.PI / (double) 180) * (jindu <= 90 ? 90 - (jindu) : -jindu + 90))) * bangjing),
   bangjing+circularDotWidth - ((float) (Math.cos((Math.PI / (double) 180) * (double) (jindu <= 90 ? 90 - jindu : -jindu + 90))) * bangjing), paint);

 }

}

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <!--自定义半圆形加载进度条-->
 <declare-styleable name="HalfProgressBar">
  <attr name="roundColor1" format="color"/>
  <attr name="roundProgressColor1" format="color"/>
  <attr name="circularDotColor1" format="color"/>
 </declare-styleable>
</resources>

xml中

<com.jyc99.demo.HalfProgressBar
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:id="@+id/view"
  android:layout_centerHorizontal="true"
  android:layout_marginTop="42dp"
  android_custom:roundColor1="#fc422b"
  android_custom:roundProgressColor1="#fa432e"
  android_custom:circularDotColor1="#246223"/>

由于截图的原因可能看不到圆点 , 大家自己试试调调颜色 调整一下高度宽度

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android实现百分比下载进度条效果

    现在很多APP中都会集成下载功能,所以有一个方便好看又实用的进度条来展示下载进度很有必要,也能提高用户体验,在这里我就把项目里的下载进度条抽取出来分享给大家,话不多说,先看效果图: 这个进度条是自定义的一个View,其中有一个自定义属性就是百分比文字的大小(也可以把那两条显示颜色的进度条自定义属性,这里就没有实现,在代码里面写的). 先说说实现原理: 1:由于自定义了属性,所以先获取属性的值. 2:绘制底色那条灰色的线. 3:根据传入的数据计算当前百分比,然后绘制那条橘黄色的线. 4:再在橘黄色

  • Android自定义View实现水平带数字百分比进度条

    这个进度条可以反映真实进度,并且完成百分比的文字时随着进度增加而移动的,所在位置也恰好是真实完成的百分比位置,效果如下: 思路如下:第一部分是左侧的蓝色直线,代表已经完成的进度:第二部分是右侧灰色的直线,代表未完成的进度:第三部分是红色的百分比的数字百分比文本,显示当前确切的完成进度. 最关键的部分就是要确定百分比文本的确切位置,这里用了paint的getTextBounds方法,得到文本的宽高,然后再精确确定它的位置. view代码如下: public class NumberProgress

  • android自定义view实现数字进度条

    之前看到过一个数字进度条,一直想写,今天就把这个实现下,想起来也是很简单的,先看下实现的效果: 思路: 绘制2根线 绘制进度条的文字,不断的改变起点和终点,然后没多少时间去更新UI就ok,在这就不画图了,看代码就看的明白,不要想的很复杂! package com.tuya; import android.animation.ValueAnimator; import android.content.Context; import android.graphics.Canvas; import a

  • Android自定义View实现圆环带数字百分比进度条

    分享一个自己制作的Android自定义View.是一个圆环形状的反映真实进度的进度条,百分比的进度文字跟随已完成进度的圆弧转动.以下是效果图: 这个自定义View可以根据需要设定圆环的宽度和百分比文字的大小. 先说一下思路:这个View一共分为三部分:第一部分也就是灰色的圆环部分,代表未完成的进度:第二部分是蓝色的圆弧部分,代表已经完成的进度:第三部分是红色的百分比的数字百分比文本,显示当前确切的完成进度. 下面是View的编写思路: ①:定义三个画笔,分别画灰色圆环,蓝色圆弧,红色文字: ②:

  • Android自定义带圆点的半圆形进度条

    本文实例为大家分享了Android自定义带圆点的半圆形进度条,供大家参考,具体内容如下 仅限用于半圆形,如须要带圆点的圆形进度条,圆点会出现错位现象,此代码仅供,带圆点的圆形进度条有空研究一下!图片效果在下方, import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import and

  • Android实现带数字的圆形进度条(自定义进度条)

    开发 设计搞了一个带圆形进度的进度条,在GitHub上逛了一圈,发现没有,自己撸吧. 先看界面效果: 主要思路是写一个继承ProgressBar的自定义View,不废话,直接上代码: package com.fun.progressbarwithnumber; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.g

  • Android 自定义View实现多节点进度条功能

    前言 最近项目有一个节点进度条的小需求,完成后,想分享出来希望可以帮到有需要的同学. 真机效果图 自定义View完整代码 开箱即用~,注释已经炒鸡详细了 /** * @description: 节点进度条 * @author: DMingO * @date: 2020/4/15 */ public class PointProcessBar extends View { /** * 未选中时的连线画笔 */ private Paint mLinePaint; /** * 选中时的连线画笔 */

  • Android自定义View实现钟摆效果进度条PendulumView

    在网上看到了一个IOS组件PendulumView,实现了钟摆的动画效果.由于原生的进度条确实是不好看,所以想可以自定义View实现这样的效果,以后也可以用于加载页面的进度条. 废话不多说,先上效果图 底部黑边是录制时不小心录上的,可以忽略. 既然是自定义View我们就按标准的流程来,第一步,自定义属性 自定义属性 建立属性文件 在Android项目的res->values目录下新建一个attrs.xml文件,文件内容如下: <?xml version="1.0" enco

  • Android自定义View实现加载进度条效果

    上一篇文章总结了下自定义View的几个步骤,如果还有不清楚的同学可以先去看看Android自定义View(一),这篇文章和大家分享一下自定义加载进度条,效果如下 下面就以水平的进度条为列进行讲解: 1.首先还是在attrs.xml文件中自定义我们需要的属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="GradientP

  • Android自定义View实现炫酷进度条

    本文实例为大家分享了Android实现炫酷进度条的具体代码,供大家参考,具体内容如下 下面我们来实现如下效果: 第一步:创建attrs文件夹,自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="MyProgress"> <attr name="out_color" form

  • Android自定义控件之水平圆点加载进度条

    本文实例为大家分享了Android实现水平圆点加载进度条的具体代码,供大家参考,具体内容如下 先来看看要实现的效果 实现思路非常简单:当前变化的圆点先从最小半径变大到最大最大半径再变回最小半径的圆,然后再切换到下个圆点,同时颜色会先变浅在变会原来的颜色(可以理解为透明度变化),而且当前圆点的上上一个圆点颜色会不断变浅.大概就这样(可能我实现的效果和图片的有些出入) 先看下实现效果: 直接上代码: package com.kincai.testcustomview_pointprogress; i

  • Android自定义带水滴的进度条样式(带渐变色效果)

    一.直接看效果 二.直接上代码 1.自定义控件部分 package com.susan.project.myapplication; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.grap

  • Android 自定义圆形带刻度渐变色的进度条样式实例代码

    效果图 一.绘制圆环 圆环故名思意,第一个首先绘制是圆环 1:圆环绘制函数 圆环API public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 参数说明 oval:圆弧所在的椭圆对象. startAngle:圆弧的起始角度. sweepAngle:圆弧的角度. useCenter:是否显示半径连线,true表示显示圆弧与圆心的半径连线,false表示不

  • Android自定义带进度条WebView仿微信加载过程

    在正常开发中,我们客户端需要用webView加载网页,再遇到网络慢或者访问的服务器响应时,页面是空白的,所以为了用户更好的体验,我们可以提供一个正在加载的进度条,提示用户正在加载. 本文结构: 1.自定义webView 2.在应用中的使用 3.效果展示 一.自定义webView 1.首先定义一个类,继承webView,并首先构造方法 public class ProgressBarWebView extends WebView{} 自定义控件,先实现构造方法, 第一中是程序内部实例化采用,传入c

随机推荐