自定义android进度条

原创 2015年07月07日 10:41:02

    最近研究了鸿洋大神的自定义View,对Demo做了一些修改,记录下。

    参考资料:http://blog.csdn.net/lmj623565791/article/details/24529807

    首先看看效果:

    
    主要代码:
    attrs文件中:
    <attr name="firstColor" format="color" />
    <attr name="secondColor" format="color" />
    <attr name="circleWidth" format="dimension" />
    <attr name="speed" format="integer" />


    <declare-styleable name="CustomProgressBar">
        <attr name="firstColor" />
        <attr name="secondColor" />
        <attr name="circleWidth" />
        <attr name="speed" />
    </declare-styleable>
    布局文件;
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:htl="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >


    <com.example.customviewtest.view.CustomProgressBar
        android:layout_width="200dp"
        android:layout_height="200dp"
        htl:circleWidth="20dp"
        htl:firstColor="#ff0000"
        htl:secondColor="#66ccff"
        htl:speed="30" />


</LinearLayout>
    自定义View:
package com.example.customviewtest.view;


import com.example.customviewtest.R;


import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
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.util.Log;
import android.util.TypedValue;
import android.view.View;


public class CustomProgressBar extends View {
/**
* 第一圈的颜色
*/
private int mFirstColor;
/**
* 第二圈的颜色
*/
private int mSecondColor;
/**
* 圈的宽度
*/
private int mCircleWidth;
/**
* 画笔
*/
private Paint mPaint;
/**
* 当前进度
*/
private int mProgress;


/**
* 速度
*/
private int mSpeed;


/**
* 是否应该开始下一个
*/
private boolean isNext = false;


public CustomProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}


public CustomProgressBar(Context context) {
this(context, null);
}


/**
* 必要的初始化,获得一些自定义的值

* @param context
* @param attrs
* @param defStyle
*/
public CustomProgressBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.CustomProgressBar, defStyle, 0);
int n = a.getIndexCount();


for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
switch (attr) {
case R.styleable.CustomProgressBar_firstColor:
mFirstColor = a.getColor(attr, Color.GREEN);
break;
case R.styleable.CustomProgressBar_secondColor:
mSecondColor = a.getColor(attr, Color.RED);
break;
case R.styleable.CustomProgressBar_circleWidth:
mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue
.applyDimension(TypedValue.COMPLEX_UNIT_PX, 20,
getResources().getDisplayMetrics()));
break;
case R.styleable.CustomProgressBar_speed:
mSpeed = a.getInt(attr, 20);// 默认20
break;
}
}
a.recycle();
mPaint = new Paint();
// 绘图线程
new Thread() {
public void run() {
while (true) {
mProgress++;
if (mProgress == 300) {
mProgress = 0;
if (!isNext)
isNext = true;
else
isNext = false;
}
postInvalidate();
try {
Thread.sleep(mSpeed);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
};
}.start();


}


@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {


int centre = getWidth() / 2; // 获取圆心的x坐标
int radius = centre - mCircleWidth ;// 半径
mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
mPaint.setAntiAlias(true); // 消除锯齿
mPaint.setStyle(Paint.Style.STROKE); // 设置空心
RectF oval = new RectF(centre - radius, centre - radius, centre
+ radius, centre + radius); // 用于定义的圆弧的形状和大小的界限
if (!isNext) {// 第一颜色的圈完整,第二颜色跑
mPaint.setColor(mFirstColor); // 设置圆环的颜色
canvas.drawArc(oval,120, 300, false, mPaint); //画第一个圆弧
// canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
mPaint.setColor(mSecondColor); // 设置圆环的颜色
canvas.drawArc(oval, 120, mProgress, false, mPaint); // 根据进度画圆弧
drawText(canvas);
} else {
mPaint.setColor(mSecondColor); // 设置圆环的颜色
// canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
canvas.drawArc(oval,120, 300, false, mPaint); //画第一个圆弧
mPaint.setColor(mFirstColor); // 设置圆环的颜色
canvas.drawArc(oval, 120, mProgress, false, mPaint); // 根据进度画圆弧
// canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
drawText(canvas);
}


}
private void drawText(Canvas canvas){
mPaint.setStrokeWidth(1);
mPaint.setStyle(Paint.Style.FILL); // 设置实心
mPaint.setTextSize((float) 80.0);  
String pro=(int)mProgress*100/300+"%";
Rect mTextBound = new Rect();
// 计算了描绘字体需要的范围
mPaint.getTextBounds(pro, 0, pro.length(), mTextBound);
canvas.drawText(pro, getWidth() / 2-mTextBound.width() * 1.0f / 2,
getHeight()/2+mTextBound.height() * 1.0f / 2, mPaint);
}
}

自定义进度条之圆角进度条问题

Android自定义进度条是开发中比较常见的一个需求,在之前的博客中也介绍过如何通过自定义ProgressBar的样式来实现自定义水平进度条和环形进度条。本文主要是对近期一个项目中的圆角进度条的实现做...
  • mq2856992713
  • mq2856992713
  • 2016年12月18日 16:18
  • 1288

Android自定义水平进度条

先上效果图为什么要有自定义控件? 1、特定的显示风格 2、处理特有的用户交互 3、优化布局(如列表中通过自定义控件,实现复杂的自定义布局,减少messure) 4、封装等如何自定义控件 1、...
  • e_Inch_Photo
  • e_Inch_Photo
  • 2017年08月09日 21:21
  • 530

Android自定义可拖动进度条

如题,看效果图: 该自定义组件的优势: 1、使用简单; 2、可随意改变圆点、直线的颜色和大小; 当然,也许你会吐槽,系统不是提供了 seekBar 吗,怎么不用 seekBar。 我想说,...
  • yanjunhui2011
  • yanjunhui2011
  • 2017年02月20日 17:32
  • 685

Android 自定义View 实现较美观的loading进度条的绘制

1、首先绘制得底部的边框: 左右两个半圆环,中间上下两条平行线 //边框背景 mPaint.setColor(mProgressBankground...
  • RichieZhu
  • RichieZhu
  • 2016年10月19日 20:55
  • 1067

Android自定义水平进度条控件

ZzHorizontalProgressBarA Horizontal ProgressBar that is customized easily.功能简介: 1.支持自定义进度颜色; 2.支持自...
  • zhouzhuo810
  • zhouzhuo810
  • 2016年09月23日 17:58
  • 441

Android 可拖动进度条:SeekBar之自定义进度条

目录一、自定义进度条样式 二、自定义滑块样式一、自定义进度条样式1、方式一 我们还可以找到 progress_horizontal.xml的内容,大致如下,我们只需要对该内容进行修改即可以改变...
  • danfengw
  • danfengw
  • 2015年09月07日 08:49
  • 2574

android进度条seekbar自定义样式

SeekBar是ProgressBar的扩展,在其基础上增加了一个可拖动的thumb(注:就是那个可拖动的图标)。用户可以触摸thumb并向左或向右拖动,再或者可以使用方向键都可以设置当前的进度等级。...
  • qq_22157767
  • qq_22157767
  • 2016年10月02日 19:36
  • 350

android自定义view之半圆形进度条

安卓自定义VIEW之半圆进度条
  • baidu_34934230
  • baidu_34934230
  • 2016年08月26日 10:46
  • 1319

Android用ClipDrawable自定义各种进度条(包括竖直和水平)

这里两年前在eoe写的一个帖子,这次也搬过来统一管理: ============== 以前我自定义的进度条是从android的源码中扒出来的一个XML,然后把里面的图片给替换了。一直不知道它的具体原理...
  • wei1583812
  • wei1583812
  • 2015年09月17日 16:38
  • 2473

android 自定义进度条下载apk并更新

下载文件使用子线程,更新到UI上使用handler,效果如图: 主要代码如下: public void downFile(final String httpUrl,final Handle...
  • a394268045
  • a394268045
  • 2016年03月03日 22:35
  • 1755
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义android进度条
举报原因:
原因补充:

(最多只允许输入30个字)