码迷，mamicode.com
首页 > 移动开发 > 详细

Android 高手进阶之自定义View，自定义属性（带进度的圆形进度条）

时间：2015-07-15 18:48:40      阅读：140      评论：0      收藏：0      [点我收藏+]

标签：

 

转载地址：http://blog.csdn.net/xiaanming/article/details/10298163

很多的时候，系统自带的View满足不了我们功能的需求，那么我们就需要自己来自定义一个能满足我们需求的View,自定义View我们需要先继承View，添加类的构造方法，重写父类View的一些方法，例如onDraw，为了我们自定义的View在一个项目中能够重用，有时候我们需要自定义其属性，举个很简单的例子，我在项目中的多个界面使用我自定义的View，每个界面该自定义View的颜色都不相同，这时候如果没有自定义属性，那我们是不是需要构建不同颜色的View出来呢，这样子我们的代码就会显得很沉厄，所以这时候我们就需要自定义其属性来满足我们不同的需求，自定义属性呢，我们需要在values下建立attrs.xml文件，在其中定义我们需要定义的属性，然后在自定义View中也要做相对应的修改，我们还是用一个小例子来看看自定义View和自定义属性的使用

 

今天带大家来自己定义一个带进度的圆形进度条，我们还是先看一下效果吧

技术分享

从上面可以看出，我们可以自定义圆环的颜色，圆环进度的颜色，是否显示进度的百分比，进度百分比的颜色，以及进度是实心还是空心等等，这样子是不是很多元化很方便呢？接下来我们就来教大家怎么来定义

 

1.在values下面新建一个attrs.xml，现在里面定义我们的属性，不同的属性对应不同的format，属性对应的format可以参考http://blog.csdn.net/pgalxx/article/details/6766677，介绍的还是比较详细，接下来我贴上我在自定义这个进度条所用到的属性

 

[html] view plaincopy技术分享技术分享
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <resources>  
  3.     <declare-styleable name="RoundProgressBar">    
  4.         <attr name="roundColor" format="color"/>  
  5.         <attr name="roundProgressColor" format="color"/>  
  6.         <attr name="roundWidth" format="dimension"></attr>  
  7.         <attr name="textColor" format="color" />    
  8.         <attr name="textSize" format="dimension" />   
  9.         <attr name="max" format="integer"></attr>   
  10.         <attr name="textIsDisplayable" format="boolean"></attr>  
  11.         <attr name="style">  
  12.             <enum name="STROKE" value="0"></enum>  
  13.             <enum name="FILL" value="1"></enum>  
  14.         </attr>  
  15.     </declare-styleable>   
  16. </resources>  

2.自定义View的属性我们算是定义好了，接下来就是怎么获取属性和代码的编写了，我们需要在构造方法中获取我们自己定义的相关属性，我们先调用context.obtainStyledAttributes(attrs,R.styleable.RoundProgressBar)来获取TypedArray，然后从TypedArray获取我们定义的属性，例如

 

 

[java] view plaincopy技术分享技术分享
 
  1. roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED);  
  2.         roundProgressColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, Color.GREEN);  
  3.         textColor = mTypedArray.getColor(R.styleable.RoundProgressBar_textColor, Color.GREEN);  
  4.         textSize = mTypedArray.getDimension(R.styleable.RoundProgressBar_textSize, 15);  
  5.         roundWidth = mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 5);  
  6.         max = mTypedArray.getInteger(R.styleable.RoundProgressBar_max, 100);  
  7.         textIsDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgressBar_textIsDisplayable, true);  
  8.         style = mTypedArray.getInt(R.styleable.RoundProgressBar_style, 0);  
上面的代码中，如roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED); getColor方法的第一个参数是我们在XML文件中定义的颜色，如果我们没有给我们自定义的View定义颜色，他就会使用第二个参数中的默认值，即Color.RED

 

 

3.为了方便大家理解，我将自定义View的全部代码贴出来，里面的代码我也有详细的注释

 

[java] view plaincopy技术分享技术分享
 
  1. package com.example.roundprogressbar;  
  2.   
  3. import android.content.Context;  
  4. import android.content.res.TypedArray;  
  5. import android.graphics.Canvas;  
  6. import android.graphics.Color;  
  7. import android.graphics.Paint;  
  8. import android.graphics.RectF;  
  9. import android.graphics.Typeface;  
  10. import android.util.AttributeSet;  
  11. import android.util.Log;  
  12. import android.view.View;  
  13.   
  14. import com.example.circlepregress.R;  
  15.   
  16. /** 
  17.  * 仿iphone带进度的进度条，线程安全的View，可直接在线程中更新进度 
  18.  * @author xiaanming 
  19.  * 
  20.  */  
  21. public class RoundProgressBar extends View {  
  22.     /** 
  23.      * 画笔对象的引用 
  24.      */  
  25.     private Paint paint;  
  26.       
  27.     /** 
  28.      * 圆环的颜色 
  29.      */  
  30.     private int roundColor;  
  31.       
  32.     /** 
  33.      * 圆环进度的颜色 
  34.      */  
  35.     private int roundProgressColor;  
  36.       
  37.     /** 
  38.      * 中间进度百分比的字符串的颜色 
  39.      */  
  40.     private int textColor;  
  41.       
  42.     /** 
  43.      * 中间进度百分比的字符串的字体 
  44.      */  
  45.     private float textSize;  
  46.       
  47.     /** 
  48.      * 圆环的宽度 
  49.      */  
  50.     private float roundWidth;  
  51.       
  52.     /** 
  53.      * 最大进度 
  54.      */  
  55.     private int max;  
  56.       
  57.     /** 
  58.      * 当前进度 
  59.      */  
  60.     private int progress;  
  61.     /** 
  62.      * 是否显示中间的进度 
  63.      */  
  64.     private boolean textIsDisplayable;  
  65.       
  66.     /** 
  67.      * 进度的风格，实心或者空心 
  68.      */  
  69.     private int style;  
  70.       
  71.     public static final int STROKE = 0;  
  72.     public static final int FILL = 1;  
  73.       
  74.     public RoundProgressBar(Context context) {  
  75.         this(context, null);  
  76.     }  
  77.   
  78.     public RoundProgressBar(Context context, AttributeSet attrs) {  
  79.         this(context, attrs, 0);  
  80.     }  
  81.       
  82.     public RoundProgressBar(Context context, AttributeSet attrs, int defStyle) {  
  83.         super(context, attrs, defStyle);  
  84.           
  85.         paint = new Paint();  
  86.   
  87.           
  88.         TypedArray mTypedArray = context.obtainStyledAttributes(attrs,  
  89.                 R.styleable.RoundProgressBar);  
  90.           
  91.         //获取自定义属性和默认值  
  92.         roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED);  
  93.         roundProgressColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, Color.GREEN);  
  94.         textColor = mTypedArray.getColor(R.styleable.RoundProgressBar_textColor, Color.GREEN);  
  95.         textSize = mTypedArray.getDimension(R.styleable.RoundProgressBar_textSize, 15);  
  96.         roundWidth = mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 5);  
  97.         max = mTypedArray.getInteger(R.styleable.RoundProgressBar_max, 100);  
  98.         textIsDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgressBar_textIsDisplayable, true);  
  99.         style = mTypedArray.getInt(R.styleable.RoundProgressBar_style, 0);  
  100.           
  101.         mTypedArray.recycle();  
  102.     }  
  103.       
  104.   
  105.     @Override  
  106.     protected void onDraw(Canvas canvas) {  
  107.         super.onDraw(canvas);  
  108.           
  109.         /** 
  110.          * 画最外层的大圆环 
  111.          */  
  112.         int centre = getWidth()/2; //获取圆心的x坐标  
  113.         int radius = (int) (centre - roundWidth/2); //圆环的半径  
  114.         paint.setColor(roundColor); //设置圆环的颜色  
  115.         paint.setStyle(Paint.Style.STROKE); //设置空心  
  116.         paint.setStrokeWidth(roundWidth); //设置圆环的宽度  
  117.         paint.setAntiAlias(true);  //消除锯齿   
  118.         canvas.drawCircle(centre, centre, radius, paint); //画出圆环  
  119.           
  120.         Log.e("log", centre + "");  
  121.           
  122.         /** 
  123.          * 画进度百分比 
  124.          */  
  125.         paint.setStrokeWidth(0);   
  126.         paint.setColor(textColor);  
  127.         paint.setTextSize(textSize);  
  128.         paint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体  
  129.         int percent = (int)(((float)progress / (float)max) * 100);  //中间的进度百分比，先转换成float在进行除法运算，不然都为0  
  130.         float textWidth = paint.measureText(percent + "%");   //测量字体宽度，我们需要根据字体的宽度设置在圆环中间  
  131.           
  132.         if(textIsDisplayable && percent != 0 && style == STROKE){  
  133.             canvas.drawText(percent + "%", centre - textWidth / 2, centre + textSize/2, paint); //画出进度百分比  
  134.         }  
  135.           
  136.           
  137.         /** 
  138.          * 画圆弧 ，画圆环的进度 
  139.          */  
  140.           
  141.         //设置进度是实心还是空心  
  142.         paint.setStrokeWidth(roundWidth); //设置圆环的宽度  
  143.         paint.setColor(roundProgressColor);  //设置进度的颜色  
  144.         RectF oval = new RectF(centre - radius, centre - radius, centre  
  145.                 + radius, centre + radius);  //用于定义的圆弧的形状和大小的界限  
  146.           
  147.         switch (style) {  
  148.         case STROKE:{  
  149.             paint.setStyle(Paint.Style.STROKE);  
  150.             canvas.drawArc(oval, 0, 360 * progress / max, false, paint);  //根据进度画圆弧  
  151.             break;  
  152.         }  
  153.         case FILL:{  
  154.             paint.setStyle(Paint.Style.FILL_AND_STROKE);  
  155.             if(progress !=0)  
  156.                 canvas.drawArc(oval, 0, 360 * progress / max, true, paint);  //根据进度画圆弧  
  157.             break;  
  158.         }  
  159.         }  
  160.           
  161.     }  
  162.       
  163.       
  164.     public synchronized int getMax() {  
  165.         return max;  
  166.     }  
  167.   
  168.     /** 
  169.      * 设置进度的最大值 
  170.      * @param max 
  171.      */  
  172.     public synchronized void setMax(int max) {  
  173.         if(max < 0){  
  174.             throw new IllegalArgumentException("max not less than 0");  
  175.         }  
  176.         this.max = max;  
  177.     }  
  178.   
  179.     /** 
  180.      * 获取进度.需要同步 
  181.      * @return 
  182.      */  
  183.     public synchronized int getProgress() {  
  184.         return progress;  
  185.     }  
  186.   
  187.     /** 
  188.      * 设置进度，此为线程安全控件，由于考虑多线的问题，需要同步 
  189.      * 刷新界面调用postInvalidate()能在非UI线程刷新 
  190.      * @param progress 
  191.      */  
  192.     public synchronized void setProgress(int progress) {  
  193.         if(progress < 0){  
  194.             throw new IllegalArgumentException("progress not less than 0");  
  195.         }  
  196.         if(progress > max){  
  197.             progress = max;  
  198.         }  
  199.         if(progress <= max){  
  200.             this.progress = progress;  
  201.             postInvalidate();  
  202.         }  
  203.           
  204.     }  
  205.       
  206.       
  207.     public int getCricleColor() {  
  208.         return roundColor;  
  209.     }  
  210.   
  211.     public void setCricleColor(int cricleColor) {  
  212.         this.roundColor = cricleColor;  
  213.     }  
  214.   
  215.     public int getCricleProgressColor() {  
  216.         return roundProgressColor;  
  217.     }  
  218.   
  219.     public void setCricleProgressColor(int cricleProgressColor) {  
  220.         this.roundProgressColor = cricleProgressColor;  
  221.     }  
  222.   
  223.     public int getTextColor() {  
  224.         return textColor;  
  225.     }  
  226.   
  227.     public void setTextColor(int textColor) {  
  228.         this.textColor = textColor;  
  229.     }  
  230.   
  231.     public float getTextSize() {  
  232.         return textSize;  
  233.     }  
  234.   
  235.     public void setTextSize(float textSize) {  
  236.         this.textSize = textSize;  
  237.     }  
  238.   
  239.     public float getRoundWidth() {  
  240.         return roundWidth;  
  241.     }  
  242.   
  243.     public void setRoundWidth(float roundWidth) {  
  244.         this.roundWidth = roundWidth;  
  245.     }  
  246.   
  247.   
  248.   
  249. }  

4.通过上面几步我们就实现了自定义View,和自定义View的属性，当然使用过程中还是有一点变化，我们必须在界面布局的最顶层加上

 

 xmlns:android_custom="http://schemas.android.com/apk/res/com.example.circlepregress"这个即命名空间，

 

  • 红色部分是自定义属性的前缀，什么意思呢？对于android系统控件我们定义其控件属性是用android:XXX="XXXXXXX",而我们自己定义的就用android_custom:XXX = "XXXXXX"
  • 绿色部分则是我们的包的名字

 

通过上面这两步我们就能自己定义属性了,我贴出自定义View在XML中使用情况

 

[java] view plaincopy技术分享技术分享
 
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  2.     xmlns:android_custom="http://schemas.android.com/apk/res/com.example.circlepregress"  
  3.     xmlns:tools="http://schemas.android.com/tools"    
  4.     android:layout_width="match_parent"    
  5.     android:layout_height="match_parent" >    
  6.     
  7.     
  8.     <com.example.roundprogressbar.RoundProgressBar    
  9.         android:id="@+id/roundProgressBar2"    
  10.         android:layout_width="80dip"    
  11.         android:layout_height="80dip"    
  12.         android:layout_alignLeft="@+id/roundProgressBar1"    
  13.         android:layout_alignParentBottom="true"    
  14.         android:layout_marginBottom="78dp"    
  15.             
  16.             
  17.         android_custom:roundColor="#D1D1D1"    
  18.         android_custom:roundProgressColor="@android:color/black"    
  19.         android_custom:textColor="#9A32CD"    
  20.         android_custom:textIsDisplayable="false"    
  21.         android_custom:roundWidth="10dip"    
  22.         android_custom:textSize="18sp"/>    
  23. </RelativeLayout>   

 

 

 

今天就到此结束，如果大家有什么疑问，请留言，我会及时回复大家的

 

项目源码，点击下载

Android 高手进阶之自定义View，自定义属性（带进度的圆形进度条）

标签：

原文地址：http://www.cnblogs.com/exmyth/p/4649022.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！