CircleProgressBar 一个界面漂亮功能强大的圆形进度条,支持多种属性

CircleProgressBar

项目地址: HuTianQi/CircleProgressBar
简介:一个界面漂亮功能强大的圆形进度条,支持多种属性,如圆环的大小颜色,进度条的大小颜色,进度条的颜色支持渐变色处理,支持圆环中间显示三层文本,支持文本的大小,颜色设置,几乎完美的解决 wrap_content,具备较强的自适应能力

一个界面漂亮功能强大的圆形进度条,支持多种属性,如圆环的大小颜色,进度条的大小颜色,进度条的颜色支持渐变色处理,支持圆环中间显示三层文本,即顶部标题,中间的进度值,底部附带内容,支持三层文本的大小,颜色设置,几乎完美的解决 wrap_content,具备较强的自适应能力

image 
该控件支持以下功能:

1 能够支持设置进度条各种属性,如圆环的大小,颜色,进度条的大小,颜色,进度条的颜色支持设置三种颜色来达到渐变色的效果。
2 圆形进度条的内部支持设置三层文本,即上层的标题,如上图的“您的等级超越全国”,中间层的进度值,如上图的“700”,下层的附带内容,如上图的“万的用户”
3 支持设置三层文本的大小与颜色,如上图标题与底部文本为黑色,中间文本为红色
4 支持进度条从任意位置开始显示,为何要支持该功能,是因为在不同的场合,进度条开始显示的位置一般是不同的,如在某些手机助手类下载 App 的应用中显示下载进度的时候都是从圆环的顶部开始,以顺时针为方向逐渐递增显示,本例的第三个小圆环即是模仿的该场合,而在某些计步器类的 app 中进度的绘制一般是从左下角开始显示,然后以顺时针为方向达到对称的位置,本例的最后一个大圆环即是模仿的该场合。
5 支持设置部分圆弧,而不是整个圆,如本例的最后一个大圆环的进度条显示效果,因为在某些场合是不需要绘制整个圆的,如在模拟汽车速度表盘的场合。
6 具备较好的自适应能力,即 wrap_content 参数能够比较完美的适应用户输入的文本的长度。


博客详细介绍:http://blog.csdn.net/htq__/article/details/52054261

如何使用

Add the following to your attrs.xml file (in res/values):

<?xml version="1.0" encoding="utf-8"?>

    <!-- 设置圆环进度条的进度条属性,包括颜色与宽度,颜色可以设置 3 种从而实现一个渐变的效果 -->
    <attr name="progress_color1" format="color"/>
    <attr name="progress_color2" format="color"/>
    <attr name="progress_color3" format="color"/>
    <attr name="progress_width" format="dimension"/>

    <!-- 设置圆环进度条百分比是从低到高显示还是从高到低显示 ,默认从低到高,即从 0 到 100 -->
    <attr name="set_high_to_low" format="boolean"/>

    <!-- 是否设置圆环进度条中间的内容属性,需要与下面的一组属性配合使用-->
    <attr name="is_set_top_title" format="boolean"/>
    <attr name="is_set_mid_content" format="boolean"/>
    <attr name="is_set_bottom_content" format="boolean"/>

    <!-- 设置圆环进度条中间的内容属性-->
    <attr name="top_title" format="string"/>
    <attr name="bottom_content" format="string"/>
    <attr name="current_progress" format="float"/>
    <attr name="max_progress" format="float"/>

    <attr name="top_title_color" format="color"/>
    <attr name="mid_progress_color" format="color"/>
    <attr name="bottom_content_color" format="color"/>
    <attr name="top_title_text_size" format="dimension"/>
    <attr name="bottom_content_text_size" format="dimension"/>
    <attr name="current_progress_text_size" format="dimension"/>

     <!-- 设置显示圆环的弧度,360 度则显示整个圆环-->
    <attr name="sweep_angle" format="integer"/>
    <attr name="start_arc" format="float"/>
    <attr name="end_arc" format="float"/>

</declare-styleable>

这些属性的使用请参看我的 demo

2Add the following code to the root view of your layout:
xmlns:app="http://schemas.android.com/apk/res/com.htq.circleprogressbar"

3Add the widget code in the appropriate place in your xml file. Here's a sample implementation:

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
作者HuTianQi,源码CircleProgressBar,一个界面漂亮功能强大圆形进度条支持多种属性,如圆环的大小颜色,进度条的大小颜色,进度条的颜色支持渐变色处理,支持圆环中间显示三层文本,支持文本的大小,颜色设置,几乎完美的解决wrap_content,具备较强的自适应能力该控件支持以下功能: 1能够支持设置进度条各种属性,如圆环的大小,颜色,进度条的大小,颜色,进度条的颜色支持设置三种颜色来达到渐变色的效果。 2圆形进度条的内部支持设置三层文本,即上层的标题,如上图的“您的等级超越全国”,中间层的进度值,如上图的“700”,下层的附带内容,如上图的“万的用户” 3支持设置三层文本的大小与颜色,如上图标题与底部文本为黑色,中间文本为红色 4支持进度条从任意位置开始显示,为何要支持该功能,是因为在不同的场合,进度条开始显示的位置一般是不同的,如在某些手机助手类下载App的应用中显示下载进度的时候都是从圆环的顶部开始,以顺时针为方向逐渐递增显示,本例的第三个小圆环即是模仿的该场合,而在某些计步器类的app中进度的绘制一般是从左下角开始显示,然后以顺时针为方向达到对称的位置,本例的最后一个大圆环即是模仿的该场合。 5支持设置部分圆弧,而不是整个圆,如本例的最后一个大圆环的进度条显示效果,因为在某些场合是不需要绘制整个圆的,如在模拟汽车速度表盘的场合。 6具备较好的自适应能力,即wrap_content参数能够比较完美的适应用户输入的文本的长度。
好的,下面是一个简单的圆形进度条的自定义View实现: ```java public class CircleProgressBar extends View { private float mProgress = 0; // 当前进度值 private float mMax = 100; // 最大进度值 private int mCircleWidth = 10; // 圆环宽度 private int mCircleColor = Color.GRAY; // 圆环颜色 private int mProgressColor = Color.BLUE; // 进度条颜色 private Paint mPaint; public CircleProgressBar(Context context) { super(context); init(); } public CircleProgressBar(Context context, AttributeSet attrs) { super(context, attrs); TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar); mCircleWidth = ta.getDimensionPixelSize(R.styleable.CircleProgressBar_circleWidth, 10); mCircleColor = ta.getColor(R.styleable.CircleProgressBar_circleColor, Color.GRAY); mProgressColor = ta.getColor(R.styleable.CircleProgressBar_progressColor, Color.BLUE); ta.recycle(); init(); } private void init() { mPaint = new Paint(); mPaint.setAntiAlias(true); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int centerX = getWidth() / 2; int centerY = getHeight() / 2; int radius = getWidth() / 2 - mCircleWidth / 2; // 画圆环 mPaint.setColor(mCircleColor); mPaint.setStrokeWidth(mCircleWidth); mPaint.setStyle(Paint.Style.STROKE); canvas.drawCircle(centerX, centerY, radius, mPaint); // 画进度条 mPaint.setColor(mProgressColor); mPaint.setStrokeWidth(mCircleWidth); mPaint.setStyle(Paint.Style.STROKE); RectF rectF = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius); canvas.drawArc(rectF, -90, 360 * mProgress / mMax, false, mPaint); } public void setProgress(float progress) { mProgress = progress; invalidate(); } public void setMax(float max) { mMax = max; invalidate(); } } ``` 其中,我们可以设置圆环的宽度、圆环颜色、进度条颜色等属性。在onDraw()方法中,我们先画出圆环,然后再画出进度条进度条的弧度根据当前进度值和最大进度值计算得出。 使用时,可以在布局文件中添加如下代码: ```xml <com.example.customview.CircleProgressBar android:id="@+id/circle_progress_bar" android:layout_width="wrap_content" android:layout_height="wrap_content" app:circleColor="#FFA500" app:circleWidth="20dp" app:progressColor="#00BFFF" /> ``` 然后在代码中设置进度值即可: ```java CircleProgressBar circleProgressBar = findViewById(R.id.circle_progress_bar); circleProgressBar.setMax(100); circleProgressBar.setProgress(50); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值