Android 自定义View——动态进度条

合集下载

progressbar的用法

progressbar的用法

progressbar的用法ProgressBar 是 Android 平台中常用的一个视图控件,它用于显示一个表示进度的动态条,可以用于展示下载、上传、转换等操作的进度。

ProgressBar 支持多种样式,如水平进度条、圆形进度条等,而且还可以自定义样式,非常灵活和实用。

本文将介绍 ProgressBar 控件的用法和实例。

一、ProgressBar 控件的属性ProgressBar 控件最常用的属性如下表所示:| 属性名称 | 描述 | | --- | --- | | android:id | 控件的唯一 id | | android:layout_width | 控件的宽度 | | android:layout_height | 控件的高度 | | android:layout_margin | 控件的外边距 | |android:max | 进度条的最大值 | | android:progress | 进度条的当前值 | | android:progressDrawable | 进度条的背景 | | android:secondaryProgress | 二级进度的当前值 | | android:indeterminate | 是否在不知道进度时显示一个不确定的进度条 | |android:indeterminateDrawable | 不确定进度条的图象资源 | | android:indeterminateDuration | 不确定进度条的动画时长 | | android:minWidth | 进度条的最小宽度 | | android:minHeight | 进度条的最小高度 | | android:visibility | 控件的可见性 |ProgressBar 的属性可用于配置进度条的样式和行为,下面将介绍其中一些重要的属性。

1. max 和 progressmax 属性用于设置进度条的最大值,progress 属性用于设置进度条的当前进度值。

Android使用Kotlin实现多节点进度条

Android使用Kotlin实现多节点进度条

Android使⽤Kotlin实现多节点进度条时间轴主要使⽤Recyclerview来实现。

开发语⾔使⽤Kotlin,代码相对java少了许多也简洁许多源代码效果图:MainActivity.ktpackage com.example.lee.linenodeimport android.annotation.SuppressLintimport android.os.Buildimport android.support.v7.app.AppCompatActivityimport android.os.Bundleimport android.support.v7.widget.LinearLayoutManagerimport kotlinx.android.synthetic.main.activity_main.*import kotlinx.android.synthetic.main.item_line_node.view.*class MainActivity : AppCompatActivity() {private var list = arrayListOf<StepBean>()private var lineNodeAdapter: LineNodeAdapter<StepBean>? = nulloverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(yout.activity_main)initRecyclerView()}private fun initRecyclerView() {getData()//创建⼀个继承于抽象类(LineNodeAdapter)的实例lineNodeAdapter = object : LineNodeAdapter<StepBean>(this, list) {override fun convert(viewHolder: LineNodeViewHolder, t: StepBean) {viewHolder.itemView.title_txt.text = t.titleviewHolder.itemView.time_txt.text = t.timeviewHolder.itemView.num_txt.text = t.num.toString()if (t.num == 1) {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {viewHolder.itemView.left_view.background = null}}if (t.num == 4) {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {viewHolder.itemView.right_view.background = null}}if (t.num < 3) viewHolder.itemView.num_txt.setBackgroundResource(R.drawable.shap_line_number_circle_red)}}val linearLayoutManager = LinearLayoutManager(this)linearLayoutManager.orientation = LinearLayoutManager.HORIZONTAL//使⽤来⾃主代码集的 yout.activity_main,⽽不是 findViewById(R.id.ln_recycler_view) as Recyclerviewln_recycler_youtManager = linearLayoutManagerln_recycler_view.adapter = lineNodeAdapter}private fun getData() {for (i in 1..4) {list.add(StepBean(i, "2017-9-27\n17:1$i", "步骤$i"))}}}activity_main.xml<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.RecyclerViewandroid:id="@+id/ln_recycler_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true" /></RelativeLayout>LineNodeAdapter.kt //RecyclerView的适配器package com.example.lee.linenodeimport android.content.Contextimport android.support.v7.widget.RecyclerViewimport android.support.v7.widget.RecyclerView.Adapterimport youtInflaterimport android.view.Viewimport android.view.ViewGroupimport kotlinx.android.synthetic.main.item_line_node.view.*/*** Created by lee on 17-9-27.*/abstract class LineNodeAdapter<T>(val context: Context, val list: List<T>) : Adapter<LineNodeAdapter.LineNodeViewHolder>() { override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): LineNodeViewHolder {return LineNodeViewHolder(LayoutInflater.from(context).inflate(yout.item_line_node, parent, false))}override fun onBindViewHolder(viewHolder: LineNodeViewHolder, position: Int) {convert(viewHolder, list.get(position))}abstract fun convert(viewHolder: LineNodeViewHolder, t: T)override fun getItemCount(): Int {return list.size}class LineNodeViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {}}item_line_node.xml //这个⽂件是时间轴item的布局⽂件<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center_horizontal"android:orientation="vertical"><TextViewandroid:id="@+id/title_txt"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:text="步骤" /><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:gravity="center_vertical"android:orientation="horizontal"><Viewandroid:id="@+id/left_view"android:layout_width="30dp"android:layout_height="1dp"android:layout_centerVertical="true"android:background="#A6A6A6" /><TextViewandroid:id="@+id/num_txt"android:layout_width="20dp"android:layout_height="20dp"android:background="@drawable/shap_line_number_circle_grey"android:gravity="center"android:text="1"android:textColor="@color/colorWhite" /><Viewandroid:id="@+id/right_view"android:layout_width="30dp"android:layout_height="1dp"android:layout_centerVertical="true"android:background="#A6A6A6" /></LinearLayout><TextViewandroid:id="@+id/time_txt"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:gravity="center_horizontal"android:text="2017-09-27\n15:56" /></LinearLayout>StepBean.kt //时间节点实体类package com.example.lee.linenode/*** Created by lee on 17-9-27.*/class StepBean(var num: Int, var time: String, var title: String)//直接在主构造函数⾥声明属性以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。

Android编程实现自定义ProgressBar样式示例(背景色及一级、二级进度条颜色)

Android编程实现自定义ProgressBar样式示例(背景色及一级、二级进度条颜色)

Android编程实现⾃定义ProgressBar样式⽰例(背景⾊及⼀级、⼆级进度条颜⾊)本⽂实例讲述了Android编程实现⾃定义ProgressBar样式。

分享给⼤家供⼤家参考,具体如下:效果图如下,本例中设置了第⼀级进度条和第⼆级进度条。

样式资源:progressbar_bg.xml,放在drawable⽂件夹下:<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="/apk/res/android"><!--3个层的顺序即为显⽰时的叠加顺序--><!--背景⾊--><item android:id="@android:id/background"><shape><corners android:radius="5dip" /><solid android:color="#CCCCCC" /></shape></item><!--⼆级进度条的颜⾊--><item android:id="@android:id/secondaryProgress"><clip><shape><corners android:radius="5dip" /><solid android:color="#88F56100" /></shape></clip></item><!--⼀级进度条的颜⾊,也可以直接替换成图⽚--><item android:id="@android:id/progress"><clip><shape><corners android:radius="5dip" /><solid android:color="#F56100" /></shape></clip></item></layer-list>布局代码:<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><ProgressBarandroid:id="@+id/progress_bar"style="?android:attr/progressBarStyleHorizontal"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="100dp"android:minHeight="20dp"android:padding="10dp"android:progressDrawable="@drawable/progressbar_bg" /></LinearLayout>更多关于Android相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家Android程序设计有所帮助。

Android自定义进度条-带文本(文字进度)的水平进度条(ProgressBar)

Android自定义进度条-带文本(文字进度)的水平进度条(ProgressBar)

Android⾃定义进度条-带⽂本(⽂字进度)的⽔平进度条(ProgressBar)⽔平进度条,显⽰进度的⽂本随着进度⽽移动。

效果如下,截的静态图。

代码如下 TextProgressBar.javapublic class TextProgressBar extends ProgressBar {private Paint mPaint;private String text;private float rate;public TextProgressBar(Context context, AttributeSet attrs) {super(context, attrs);// TODO Auto-generated constructor stubinitView();}public TextProgressBar(Context context) {super(context);initView();}private void initView() {mPaint = new Paint();mPaint.setAntiAlias(true);mPaint.setColor(Color.BLUE);}@Overridepublic synchronized void setProgress(int progress) {setText(progress);super.setProgress(progress);}private void setText(int progress) {rate = progress * 1.0f / this.getMax();int i = (int) (rate * 100);this.text = String.valueOf(i) + "%";}@Overrideprotected synchronized void onDraw(Canvas canvas) {// TODO Auto-generated method stubsuper.onDraw(canvas);Rect rect = new Rect();mPaint.getTextBounds(text, 0, this.text.length(), rect);// int x = (getWidth()/2) - rect.centerX();// int y = (getHeight()/2) - rect.centerY();int x = (int) (getWidth() * rate);if (x == getWidth()) {// 如果为百分之百则在左边绘制。

android setprogressdrawable用法 -回复

android setprogressdrawable用法 -回复

android setprogressdrawable用法-回复Android的setProgressDrawable()方法是用于设置进度条的Drawable 样式的。

进度条是在Android应用程序中常用的一种视图,用于显示任务或操作的进度。

setProgressDrawable()方法有两个参数,分别是start和end。

start 参数是一个Drawable对象,表示进度条的开始部分的样式;end参数是一个Drawable对象,表示进度条的结束部分的样式。

要使用setProgressDrawable()方法,首先需要创建一个进度条的样式。

可以使用XML定义样式,也可以使用代码创建Drawable对象。

下面将详细介绍这两种方式。

一、使用XML定义样式1. 创建一个名为progress_bar_style.xml的XML文件,放在res/drawable文件夹下。

2. 在progress_bar_style.xml文件中,定义进度条的样式。

可以使用<layer-list>标签来定义多层次的Drawable对象。

例如,下面的XML代码定义了一个带有两层样式的进度条:xml<layer-list xmlns:android="<item android:id="@android:id/background"android:drawable="@drawable/progress_background" /> <item android:id="@android:id/progress"android:drawable="@drawable/progress_bar" /></layer-list>这个样式包含了两个Drawable对象。

第一个是ID为android:id/background的Drawable对象,表示进度条的背景部分的样式;第二个是ID为android:id/progress的Drawable对象,表示进度条的进度部分的样式。

Android自定义SeekBar实现视频播放进度条

Android自定义SeekBar实现视频播放进度条

Android⾃定义SeekBar实现视频播放进度条本⽂实例为⼤家分享了Android实现视频播放进度条的具体代码,供⼤家参考,具体内容如下⾸先来看⼀下效果图,如下所⽰:其中进度条如下:接下来说⼀说我的思路,上⾯的进度拖动条有⾃定义的Thumb,在Thumb正上⽅有⼀个PopupWindow窗⼝,窗⼝⾥⾯显⽰当前的播放时间。

在SeekBar右边有⼀个⽂本框显⽰当前播放时间/总时间。

step1、先来看⼀看PopupWindow的布局⽂件,seek_popu.xml,效果如下图所⽰:<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/seek_dialog_bg" ><!-- 展现当前播放进度时间的⽂本框--><TextViewandroid:id="@+id/dialogSeekTime"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dip"android:layout_marginTop="12dip"android:text="@string/unknow_seek_time"android:textColor="@color/black"android:textSize="12sp" /></RelativeLayout>step2、⾃定义⼀个SeekBarimport com.canplay.video.R;import android.content.Context;import android.util.AttributeSet;import youtInflater;import android.view.View;import android.widget.PopupWindow;import android.widget.SeekBar;import android.widget.TextView;/*** ⾃定义进度拖动条控件*/public class MySeekBar extends SeekBar {/*** 定义⼀个展现时间的PopupWindow*/private PopupWindow mPopupWindow;private View mView;/*** 显⽰时间的TextView*/private TextView dialogSeekTime;/*** ⽤来表⽰该组件在整个屏幕内的绝对坐标,其中 mPosition[0] 代表X坐标,mPosition[1] 代表Y坐标。

Android实现带节点的进度条

Android实现带节点的进度条

Android实现带节点的进度条⽇常的开发中经常会需要⽤到⾃定义View,这次刚好有个需求,需要⽤到带有节点的进度条。

东西很简单直接继承View就⾏了。

⾸先定义⼀些需要的属性/*** 背景画笔*/private Paint bgPaint;/*** 前景画笔*/private Paint forePaint;/*** 选中画笔*/private Paint selectPaint;/*** 未选中画笔*/private Paint unselectPaint;/*** 背景颜⾊*/private int bgColor = Color.parseColor("#9C9C9C");/*** 前景颜⾊*/private int foreColor = Color.parseColor("#8A2BE2");/*** 默认⾼度*/private int defaultHeight;/*** 节点⽂字*/private List<String> nodeList;private List<Rect> mBounds;/*** 节点圆的半径*/private int radius;/*** ⽂字和节点进度条的top*/private int marginTop;/*** 两个节点之间的距离*/private int dividWidth;/*** 选中位置*/private int selectIndex;然后在构造⽅法中初始化这些数据private void init(Context context) {radius = SizeUtils.dp2px(context,4);defaultHeight = SizeUtils.dp2px(context,30);marginTop = SizeUtils.dp2px(context,5);bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);bgPaint.setColor(bgColor);bgPaint.setStyle(Paint.Style.FILL);forePaint = new Paint(Paint.ANTI_ALIAS_FLAG);forePaint.setColor(foreColor);forePaint.setStyle(Paint.Style.FILL);unselectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);unselectPaint.setColor(bgColor);unselectPaint.setTextSize(SizeUtils.sp2px(context,10));selectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);selectPaint.setColor(foreColor);selectPaint.setTextSize(SizeUtils.sp2px(context,10));}设置节点⽂字/*** 设置数据* @param nodeDatas*/public void setNodeList(List<String> nodeDatas){if(nodeDatas != null){nodeList = nodeDatas;}//测量⽂字所占⽤的空间measureText();}/*** 设置选中位置* @param selectIndex*/public void setSelectIndex(int selectIndex){this.selectIndex = selectIndex;invalidate();}/*** 测量⽂字的长宽*/private void measureText(){mBounds = new ArrayList<>();for (int i = 0; i < nodeList.size(); i++) {Rect mBound = new Rect();unselectPaint.getTextBounds(nodeList.get(i),0,nodeList.get(i).length(),mBound); mBounds.add(mBound);}}最后重要的步骤,开始在onDraw中绘制节点进度条和绘制⽂字1、绘制灰⾊背景线条if(nodeList == null || nodeList.isEmpty()){return;}bgPaint.setStrokeWidth(radius/2);//绘制灰⾊的背景线条canvas.drawLine(radius,radius,getWidth()-radius,radius,bgPaint);2、绘制节点上的圆和两个节点之间的间隔线条//画节点圆//每个圆相隔的距离dividWidth = (getWidth()-radius*2)/(nodeList.size() - 1);forePaint.setStrokeWidth(radius/2);for (int i = 0; i < nodeList.size(); i++) {if(i == selectIndex){for (int j = 0; j <= i; j++) {canvas.drawCircle(radius+ j * dividWidth, radius, radius , forePaint);canvas.drawLine(radius,radius,j*dividWidth,radius,forePaint);}}else if(i>selectIndex){canvas.drawCircle(radius + i * dividWidth, radius, radius, bgPaint);}}3、绘制节点上的⽂字for (int i = 0; i < nodeList.size(); i++) {int currentTextWidth=mBounds.get(i).width();if (i==0){if (i==selectIndex){canvas.drawText(nodeList.get(i), 0, radius*2 + marginTop + mBounds.get(i).height()/2, selectPaint);}else if(i>selectIndex) {canvas.drawText(nodeList.get(i), 0, radius*2 + marginTop + mBounds.get(i).height()/2, unselectPaint);}}else if (i==nodeList.size()-1){if (i==selectIndex){for (int j = 0; j <= i; j++) {if(j == 0){canvas.drawText(nodeList.get(j), 0, radius*2 + marginTop + mBounds.get(j).height()/2, selectPaint);}else if(j == i){canvas.drawText(nodeList.get(j), getWidth() - currentTextWidth, radius*2 + marginTop + mBounds.get(j).height()/2, selectPaint);}else{canvas.drawText(nodeList.get(j), radius + j * dividWidth - currentTextWidth / 2, radius*2 + marginTop + mBounds.get(j).height()/2, selectPaint); }}}else if(i>selectIndex) {canvas.drawText(nodeList.get(i), getWidth() - currentTextWidth, radius*2 + marginTop + mBounds.get(i).height()/2, unselectPaint);}}else {if (i==selectIndex){for (int j = 0; j <= i; j++) {if(j>0){canvas.drawText(nodeList.get(j), radius + j * dividWidth - currentTextWidth / 2, radius*2 + marginTop + mBounds.get(j).height()/2, selectPaint); }else{canvas.drawText(nodeList.get(j), 0, radius*2 + marginTop + mBounds.get(j).height()/2, selectPaint);}}}else if(i>selectIndex) {canvas.drawText(nodeList.get(i), radius + i * dividWidth - currentTextWidth / 2, radius*2 + marginTop + mBounds.get(i).height()/2, unselectPaint); }}}有时候可能需要的是下⾯这种进度条只需要修改onDraw中绘制节点圆和⽂字的⽅法就可以了for (int i=0; i < nodeList.size();i++) {if (i==selectIndex){canvas.drawCircle(radius+ i * dividWidth, radius, radius , forePaint);}else {canvas.drawCircle(radius + i * dividWidth, radius, radius, bgPaint);}}for (int i=0; i<nodeList.size();i++){int currentTextWidth=mBounds.get(i).width();if (i==0){if (i==selectIndex){canvas.drawText(nodeList.get(i), 0, radius*2 + marginTop + mBounds.get(i).height()/2, selectPaint);}else {canvas.drawText(nodeList.get(i), 0, radius*2 + marginTop + mBounds.get(i).height()/2, unselectPaint);}}else if (i==nodeList.size()-1){if (i==selectIndex){canvas.drawText(nodeList.get(i), getWidth() - currentTextWidth, radius*2 + marginTop + mBounds.get(i).height()/2, selectPaint);}else {canvas.drawText(nodeList.get(i), getWidth() - currentTextWidth, radius*2 + marginTop + mBounds.get(i).height()/2, unselectPaint);}}else {if (i==selectIndex){canvas.drawText(nodeList.get(i), radius + i * dividWidth - currentTextWidth / 2, radius*2 + marginTop + mBounds.get(i).height()/2, selectPaint); }else {canvas.drawText(nodeList.get(i), radius + i * dividWidth - currentTextWidth / 2, radius*2 + marginTop + mBounds.get(i).height()/2, unselectPaint); }}}点击节点进⾏节点切换// 实现节点切换,把注释打开就⾏了@Overridepublic boolean onTouchEvent(MotionEvent event) {float eventX;float eventY;int i = event.getAction();if (i == MotionEvent.ACTION_DOWN) {} else if (i == MotionEvent.ACTION_MOVE) {} else if (i == MotionEvent.ACTION_UP) {eventX = event.getX();eventY = event.getY();//计算选中的indexfloat select = eventX / dividWidth;float xs = select - (int) (select);//selectIndex = (int) select + (xs > 0.5 ? 1 : 0);}//invalidate();return true;}以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。

android setprogressdrawable用法

android setprogressdrawable用法

android setprogressdrawable用法Android SetProgressDrawable是一个用于设置进度条样式的API,它允许您自定义进度条的外观和样式。

通过使用SetProgressDrawable,您可以根据需要创建自定义进度条样式,并与其他应用程序界面元素集成。

SetProgressDrawable提供了几个不同的方法,可以用于设置自定义进度条样式。

以下是一些基本用法:1. 使用ProgressDrawable类ProgressDrawable类是SetProgressDrawable的基础,它提供了用于创建自定义进度条样式的各种方法。

您可以使用ProgressDrawable类创建进度条,并使用SetProgressDrawable将其应用于Activity或Fragment中的ProgressBar组件。

示例代码:```javaProgressDrawable drawable = (ProgressDrawable) progressBar.getIndeterminateDrawable();drawable.start(); // 启动进度条```2. 使用setCurrent方法您可以使用setCurrent方法设置进度条的当前值,以控制进度条的显示范围。

通过将进度条设置为特定的百分比值,您可以控制进度条的显示样式。

示例代码:```javaint progress = 50; // 设置进度条的百分比值progressBar.setProgress(progress); // 设置进度条当前值```3. 使用setBuilder方法SetProgressDrawable提供了一个Builder类,用于构建自定义进度条样式。

您可以使用Builder类设置进度条的颜色、大小、背景等属性,以创建具有自定义样式的进度条。

示例代码:```javaSetProgressDrawable.Builder builder = new SetProgressDrawable.Builder(context);builder.color(Color.RED) // 设置进度条颜色.size(100) // 设置进度条宽度和高度.background(R.drawable.progress_background); // 设置背景图片ProgressDrawable drawable = builder.create(); // 创建自定义进度条样式progressBar.setProgressDrawable(drawable); // 将自定义样式应用于ProgressBar组件```二、注意事项在使用SetProgressDrawable时,请注意以下几点:1. SetProgressDrawable仅适用于ProgressBar组件,不适用于SeekBar组件。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

Android 自定义View——动态进度条这个是看了梁肖的demo,根据他的思路自己写了一个,但是我写的这个貌似计算还是有些问题,从上面的图就可以看出来,左侧、顶部、右侧的线会有被截掉的部分,有懂得希望能给说一下,改进一下,这个过程还是有点曲折的,不过还是觉得收获挺多的。

比如通动画来进行动态的展示(之前做的都是通过Handler进行更新的所以现在换一种思路觉得特别好),还有圆弧的起止角度,矩形区域的计算等!关于绘制我们可以循序渐进,比如最开始先画圆,然后再画周围的线,最后设置动画部分就可以了。

不多说了,上代码了。

代码自定义Viewpublic class ColorProgressBar extends View{//下面这两行在本demo中没什么用,只是前几天看别人的代码时学到的按一定尺寸,设置其他尺寸的方式,自动忽略或者学习一下也不错// private int defaultStepIndicatorNum= (int) TypedValue.applyDimension(PLEX_UNIT_DIP,40,getResources().getDisplay Metrics());// int mCircleRadius=0.28f*defaultStepIndicatorNum;//布局的宽高private int mWidth;private int mHeight;//直径private int mDiameter=500;//底层圆画笔private Paint mPaintbg;//顶层圆的画笔private Paint mPaintft;//周围线的画笔private Paint mPaintLine;//外层线条的长度private int mLongItem=dip2px(20);//线条与圆的间距private int mDistanceItem=dip2px(10);//进度条的最大宽度(取底层进度条与顶层进度条宽度最大的)private int mProgressWidth;//底层圆的颜色private int mBackColor;//顶层圆的颜色private int mFrontColor;//底层圆、顶层圆的宽度private float mBackWidth;private float mFrontWidth;//设置进度private float currentvalue;//通过动画演示进度private ValueAnimator animator;private int curvalue;public ColorProgressBar(Context context) {this(context,null,0);}public ColorProgressBar(Context context, AttributeSet attrs) {this(context, attrs,0);}public ColorProgressBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr);TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.ColorProgressBar);mBackColor= ta.getColor(R.styleable.ColorProgressBar_back_color, Color.BLACK);mFrontColor=ta.getColor(R.styleable.ColorProgressBar_front_color,mBackColor);mBackWidth=ta.getDimension(R.styleable.ColorProgressBar_back_width,dip2px(10));mFrontWidth=ta.getDimension(R.styleable.ColorProgressBar_front_width,dip2px(10));mProgressWidth=mBackWidth>mFrontWidth?(int)mBackWidth:(int)mFrontWidth;//注意释放资源ta.recycle();init();}/*** 都是画笔初始化*/private void init() {mPaintbg=new Paint(Paint.ANTI_ALIAS_FLAG);mPaintbg.setStrokeWidth(mProgressWidth);mPaintbg.setColor(mBackColor);mPaintbg.setStrokeCap(Paint.Cap.ROUND);mPaintbg.setStyle(Paint.Style.STROKE);mPaintft=new Paint(Paint.ANTI_ALIAS_FLAG);mPaintft.setColor(mFrontColor);mPaintft.setStyle(Paint.Style.STROKE);mPaintft.setStrokeWidth(mFrontWidth);mPaintft.setStrokeCap(Paint.Cap.ROUND);mPaintLine=new Paint(Paint.ANTI_ALIAS_FLAG);mPaintLine.setColor(Color.BLACK);mPaintLine.setStrokeWidth(5);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);// 宽度=高度=(长指针+指针与圆盘的间距+进度条的粗细+半径)*2Log.e("测量数据","LongItem:"+mLongItem+"mDistanceItem:"+mDistanceItem+"mProgressWidth:"+mProgressWidth+"mDia meter:"+mDiameter/2);mWidth=(int)2*(mLongItem+mDistanceItem+mProgressWidth*2+mDiameter/2);mHeight=(int)2*(mLongItem+mDistanceItem+mProgressWidth*2+mDiameter/2);Log.e("自定义View","高度"+mHeight+"宽度"+mWidth);setMeasuredDimension(mWidth,mHeight);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//绘制底层圆弧,矩形的具体计算见图片canvas.drawArc(newRectF(mProgressWidth/2+mDistanceItem+mLongItem,mProgressWidth/2+mDistanceItem+mLon gItem,mWidth-mProgressWidth/2-mDistanceItem-mLongItem,mHeight-mProgressWidth/2-mDist anceItem-mLongItem),0,360,true,mPaintbg);// SweepGradient gradient=new SweepGradient();//绘制边缘线canvas.save();canvas.rotate(144,mWidth/2,mHeight/2);for(int i=0;i<=30;i++){canvas.rotate(-9,mWidth/2,mHeight/2);if(i%5==0){canvas.drawLine(mWidth/2,5,mWidth/2,mLongItem,mPaintbg);}else {canvas.drawLine(mWidth/2,25,mWidth/2,mLongItem,mPaintLine);}}canvas.restore();//给画笔设置渐变SweepGradient sweepGradient=new SweepGradient(mWidth/2,mHeight/2,Color.RED,Color.YELLOW);mPaintft.setShader(sweepGradient);//绘制顶层圆弧,currentvalue在改变时呈现动态效果canvas.drawArc(newRectF(mProgressWidth/2+mDistanceItem+mLongItem,mProgressWidth/2+mDistanceItem+mLon gItem,gressWidth/2-mDistanceItem-mLongItem,mHeight-mProgr essWidth/2-mDistanceItem-mLongItem),135,currentvalue,false,mPaintft);mPaintft.setTextSize(100);mPaintft.setTextAlign(Paint.Align.CENTER);//绘制文本canvas.drawText(String.format("%.0f",currentvalue),mWidth/2,mHeight/2+50,mPaintft);invalidate();}/*** 设置动画* @param value*/public void setCurrentValue(float value){// currentvalue=value;animator=ValueAnimator.ofFloat(currentvalue,value);animator.setDuration(3000);animator.setTarget(currentvalue);animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {currentvalue= (float) valueAnimator.getAnimatedValue();curvalue=curvalue/10;}});animator.start();}private int dip2px(float dip){float density=getContext().getResources().getDisplayMetrics().density;return (int)(dip*density+0.5f);}}Activity调用@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(yout.colorprogressbar);mBtStart1= (ton) findViewById(R.id.bt1);bar1= (ColorProgressBar) findViewById(R.id.cp1);mBtStart1.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {bar1.setCurrentValue(270);}});}自定义属性<declare-styleable name="ColorProgressBar"><attr name="back_color" format="color"></attr><attr name="front_color" format="color"></attr><attr name="back_width" format="dimension"></attr><attr name="front_width" format="dimension"></attr></declare-styleable>布局注意:为了使用自定义属性需要添加一行代码(AS)布局<LinearLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><Buttonandroid:id="@+id/bt1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="start1"/><workdemo.colorprogressbar.widget.ColorProgressBar android:id="@+id/cp1"android:layout_width="232dp"android:layout_height="match_parent"android:layout_gravity="center_horizontal"app:back_color="@color/colorPrimary"app:front_color="@color/colorAccent"android:background="@mipmap/ic_launcher"/> </LinearLayout>。

相关文档
最新文档