欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android中自定义进度条详解

程序员文章站 2022-07-03 19:08:48
android原生控件只有横向进度条一种,而且没法变换样式,比如原生rom的样子 很丑是吧,当伟大的产品设计要求更换前背景,甚至纵向,甚至圆弧状的,咋办,比如:...

android原生控件只有横向进度条一种,而且没法变换样式,比如原生rom的样子

Android中自定义进度条详解

很丑是吧,当伟大的产品设计要求更换前背景,甚至纵向,甚至圆弧状的,咋办,比如:

Android中自定义进度条详解

ok,我们开始吧:

一)变换前背景

先来看看progressbar的属性:

复制代码 代码如下:

<progressbar
            android:id="@+id/progressbar"
            style="?android:attr/progressbarstylehorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dip"
            android:layout_torightof="@+id/progressbarv"
            android:indeterminate="false"
            android:padding="2dip"
            android:progress="50" />

根据style="?android:attr/progressbarstylehorizontal",我们找到源码中的style.xml

复制代码 代码如下:

<style name="widget.progressbar.horizontal">
        <item name="android:indeterminateonly">false</item>
        <item name="android:progressdrawable">@android:drawable/progress_horizontal</item>
        <item name="android:indeterminatedrawable">@android:drawable/progress_indeterminate_horizontal</item>
        <item name="android:minheight">20dip</item>
        <item name="android:maxheight">20dip</item>
    </style>

看到:

复制代码 代码如下:

<item name="android:progressdrawable">@android:drawable/progress_horizontal</item>

木有,继续发掘源码,找到drawable下面的progress_horizontal.xml,这就是我们今天的主角了:
复制代码 代码如下:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <gradient
                    android:startcolor="#ff9d9e9d"
                    android:centercolor="#ff5a5d5a"
                    android:centery="0.75"
                    android:endcolor="#ff747674"
                    android:angle="270"
            />
        </shape>
    </item>
    
    <item android:id="@android:id/secondaryprogress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startcolor="#80ffd300"
                        android:centercolor="#80ffb600"
                        android:centery="0.75"
                        android:endcolor="#a0ffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startcolor="#ffffd300"
                        android:centercolor="#ffffb600"
                        android:centery="0.75"
                        android:endcolor="#ffffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
</layer-list>

看到android:id="@android:id/progress"木有,看到android:id="@android:id/secondaryprogress"木有
把这个文件复制到自己工程下的drawable,就可以随心所欲的修改shape的属性,渐变,圆角等等
那么怎么放一个图片进去呢,ok,新建progress_horizontal1.xml:

复制代码 代码如下:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item android:id="@android:id/progress" android:drawable="@drawable/progressbar" />
    
</layer-list>

在android:drawable中指定你处理好的图片
然后回到布局中:

复制代码 代码如下:

<progressbar
            android:id="@+id/progressbar1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/progressbar"
            android:layout_margin="5dip"
            android:layout_torightof="@+id/progressbarv"
            android:background="@drawable/progress_bg"
            android:indeterminate="false"
            android:indeterminateonly="false"
            android:maxheight="20dip"
            android:minheight="20dip"
            android:padding="2dip"
            android:progress="50"
            android:progressdrawable="@drawable/progress_horizontal1" />

android:background="@drawable/progress_bg"指定背景
android:progressdrawable="@drawable/progress_horizontal1"前景使用上面的progress_horizontal1
ok,搞定

Android中自定义进度条详解

注意看,四角还是有圆倒角的,貌似是系统自己加上去的,总之我的图片里面是没有做这个倒角处理的
二)纵向进度条

还是得从源码入手,看回progress_horizontal.xml

复制代码 代码如下:

<item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startcolor="#ffffd300"
                        android:centercolor="#ffffb600"
                        android:centery="0.75"
                        android:endcolor="#ffffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>

为什么shape外面要包一层clip呢,官方文档解释是clipdrawable是可以自我复制的,来看看定义

复制代码 代码如下:

<?xml version="1.0" encoding="utf-8"?>
<clip
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:cliporientation=["horizontal" | "vertical"]
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                     "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                     "center" | "fill" | "clip_vertical" | "clip_horizontal"] />

android:cliporientation有两个属性,默认为horizontal
android:gravity有两个属性,默认为left
那我们试试改成vertical和bottom会有什么效果,新建一个progress_vertical.xml,把源码progress_horizontal.xml的内容复制过来,这里去掉了secondaryprogress,修改了clip,shape的渐变中心centery改为centerx

复制代码 代码如下:

<item android:id="@android:id/progress">
        <clip
            android:cliporientation="vertical"
            android:gravity = "bottom">
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startcolor="#ffffd300"
                        android:centercolor="#ffffb600"
                        android:centerx="0.75"
                        android:endcolor="#ffffcb00"
                        android:angle="90"
                />
            </shape>
        </clip>
    </item>

布局中android:progressdrawable="@drawable/progress_vertical"
ok,搞定,就是这么简单:

Android中自定义进度条详解

三)弧形bar

这个也许算不上是进度条,用的也不多,最多也就仪表盘用用,不然谁会把进度条整成圆弧的呢。好吧这个可不是改改源码就能搞定的,看代码:

复制代码 代码如下:

public class arcs extends view {  
    private paint marcpaint;  
    private paint marcbgpaint;  
  
    private rectf moval;  
    private float msweep = 0;  
    private int mspeedmax = 200;
    private int mthreshold = 100;
    private int mincspeedvalue = 0;
    private int mcurrentspeedvalue = 0; 
    private float mcenterx;  
    private float mcentery;  
    private float mspeedarcwidth;  
 
    private final float speed_value_inc = 2; 
 
    .......... 
 

首先是一堆成员变量,两个paint用来画圆弧一个前景一个背景,一个rectf圆弧就画在上面,然后是一些控制参数比如sweep圆弧扫过的角度,xy坐标等等。

复制代码 代码如下:

marcpaint = new paint(paint.anti_alias_flag);
        marcpaint.setstyle(paint.style.stroke);
        marcpaint.setstrokewidth(mspeedarcwidth);
//        mpaint.setstrokecap(paint.cap.round);
        marcpaint.setcolor(0xff81ccd6);
        blurmaskfilter mblur = new blurmaskfilter(8, blurmaskfilter.blur.inner);
        marcpaint.setmaskfilter(mblur);
        
        marcbgpaint = new paint(paint.anti_alias_flag);
        marcbgpaint.setstyle(paint.style.stroke);
        marcbgpaint.setstrokewidth(mspeedarcwidth+8);
        marcbgpaint.setcolor(0xff171717);
        
        blurmaskfilter mbgblur = new blurmaskfilter(8, blurmaskfilter.blur.inner);
      marcbgpaint.setmaskfilter(mbgblur);

设置两个画笔,颜色,宽度,样式等等,blurmaskfilter笔是边缘模糊效果,有几种,可以自己尝试。

复制代码 代码如下:

@override
protected void onsizechanged(int w, int h, int ow, int oh) {
        super.onsizechanged(w, h, ow, oh);
        log.i("onsizechanged w", w+"");
        log.i("onsizechanged h", h+"");
        mcenterx = w * 0.5f;  // remember the center of the screen
        mcentery = h - mspeedarcwidth;
        moval = new rectf(mcenterx - mcentery, mspeedarcwidth, mcenterx + mcentery, mcentery * 2);
    }

重写父类view的onsizechanged,为的是自己根据布局中的大小做居中处理

复制代码 代码如下:

@override  
    protected void ondraw(canvas canvas) { 
        drawspeed(canvas); 
        calcspeed(); 
    } 
 
private void drawspeed(canvas canvas) { 
        canvas.drawarc(moval, 179, 181, false, marcbgpaint); 
 
        msweep = (float) mincspeedvalue / mspeedmax * 180; 
        if (mincspeedvalue > mthreshold) { 
            marcpaint.setcolor(0xffff0000); 
        } 
        else { 
            marcpaint.setcolor(0xff00b0f0); 
        } 
         
        canvas.drawarc(moval, 180, msweep, false, marcpaint);         
    } 
 
private void calcspeed() { 
        if (mincspeedvalue < mcurrentspeedvalue) { 
            mincspeedvalue += speed_value_inc; 
            if (mincspeedvalue > mcurrentspeedvalue) { 
                mincspeedvalue = mcurrentspeedvalue; 
            } 
            invalidate(); 
        } 
        else if (mincspeedvalue > mcurrentspeedvalue) { 
            mincspeedvalue -= speed_value_inc; 
            if (mincspeedvalue < mcurrentspeedvalue) { 
                mincspeedvalue = mcurrentspeedvalue; 
            } 
            invalidate(); 
        } 
    } 

重写ondraw以便重绘canvas
drawspeed里面
通过计算msweep = (float) mincspeedvalue / mspeedmax * 180;
然后canvas.drawarc(moval, 180, msweep, false, marcpaint);
会根据msweep的变化,画出相应长度的弧度来
根据与阈值的对比,还可以设定不同的 颜色:

复制代码 代码如下:

if (mincspeedvalue > mthreshold) {
   marcpaint.setcolor(0xffff0000);
  }
  else {
   marcpaint.setcolor(0xff00b0f0);
  }

calcspeed通过一个步进来控制增量或减量,以使弧度自然过渡,减少跳跃
ok,大功告成。

Android中自定义进度条详解