服务器之家

服务器之家 > 正文

Android中自定义进度条详解

时间:2021-03-12 15:47     来源/作者:Android开发网

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中自定义进度条详解

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部