前言
本文主要给大家介绍了关于android条纹进度条(调整view宽度仿进度条)的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧
方法如下:
美工同学指定了一个进度条样式
进度条样式
这斑斓的进度条,如果要自己画实在是劳民伤财。于是请美工切了一张素材。
素材样例
如果用shape或者.9图片不太好处理这个条纹。转变思路,放置2张图片。一张作为背景(底,bottom),一张作为进度条图片(cover)。
进度改变时,改变上面图片的宽度。
这就要求上面的图片是圆角的。自定义imageview,调用canvas.clippath
来切割画布。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
public class roundcornerimageview extends android.support.v7.widget.appcompatimageview { private float mradius = 18 ; private path mclippath = new path(); private rectf mrect = new rectf(); public roundcornerimageview(context context) { super (context); } public roundcornerimageview(context context, attributeset attrs) { super (context, attrs); } public roundcornerimageview(context context, attributeset attrs, int defstyle) { super (context, attrs, defstyle); } public void setradiusdp( float dp) { mradius = dp2px(dp, getresources()); postinvalidate(); } public void setradiuspx( int px) { mradius = px; postinvalidate(); } @override protected void ondraw(canvas canvas) { mrect.set( 0 , 0 , this .getwidth(), this .getheight()); mclippath.reset(); // remember to reset path mclippath.addroundrect(mrect, mradius, mradius, path.direction.cw); canvas.clippath(mclippath); super .ondraw(canvas); } private float dp2px( float value, resources resources) { return typedvalue.applydimension(typedvalue.complex_unit_dip, value, resources.getdisplaymetrics()); } } |
每次绘制都切割一次圆角。记得调用path.reset()
方法。
回到我们要的进度条。布局文件中放置好层叠的图片。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<relativelayout android:id= "@+id/progress_layout" android:layout_width= "190dp" android:layout_height= "10dp" android:layout_centerinparent= "true" > <imageview android:id= "@+id/p_bot_iv" android:layout_width= "190dp" android:layout_height= "10dp" android:src= "@drawable/shape_round_corner_bottom" /> <com.rustfisher.view.roundcornerimageview android:id= "@+id/p_cover_iv" android:layout_width= "100dp" android:layout_height= "10dp" android:scaletype= "centercrop" android:src= "@drawable/pic_cover_blue_white" /> </relativelayout> |
需要在代码中动态地改变cover的宽度;dialog中提供如下方法改变layoutparams
1
2
3
4
5
6
7
8
9
10
11
|
public void updatepercent( int percent) { mpercent = percent; mpercenttv.settext(string.format(locale.china, "%2d%%" , mpercent)); float percentfloat = mpercent / 100 .0f; final int ivwidth = mbotiv.getwidth(); relativelayout.layoutparams lp = (relativelayout.layoutparams) mprogressiv.getlayoutparams(); int marginend = ( int ) (( 1 - percentfloat) * ivwidth); lp.width = ivwidth - marginend; mprogressiv.setlayoutparams(lp); mprogressiv.postinvalidate(); } |
显示出dialog并传入进度,就可以看到效果了。
这只是实现效果的一种方法,如果有更多的想法,欢迎和我交流~
相关代码请参阅:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
package com.rust.aboutview.activity; import android.os.bundle; import android.os.handler; import android.os.looper; import android.support.annotation.nullable; import android.support.v4.app.dialogfragment; import android.support.v7.app.appcompatactivity; import android.view.view; import com.rust.aboutview.r; import com.rust.aboutview.widget.roundcornerprogressdialog; import com.rustfisher.view.roundcornerimageview; import butterknife.bindview; import butterknife.butterknife; import butterknife.onclick; /** * 圆角图片示例 * created by rust on 2018/5/23. */ public class roundcorneractivity extends appcompatactivity implements view.onclicklistener { @bindview (r.id.r_iv_1) roundcornerimageview mriv1; @bindview (r.id.r_iv_2) roundcornerimageview mriv2; @bindview (r.id.r_iv_3) roundcornerimageview mriv3; @bindview (r.id.r_iv_4) roundcornerimageview mriv4; private handler mmainhandler = new handler(looper.getmainlooper()); private roundcornerprogressdialog mroundcornerprogressdialog; private progressthread mprogressthread; @override protected void oncreate( @nullable bundle savedinstancestate) { super .oncreate(savedinstancestate); setcontentview(r.layout.act_round_corner); initui(); } private void initui() { butterknife.bind( this ); mriv1.setradiusdp( 12 ); mriv2.setradiusdp( 23 ); mriv3.setradiuspx( 40 ); mriv4.setradiuspx( 200 ); } @onclick (r.id.pop_dialog_btn) @override public void onclick(view v) { switch (v.getid()) { case r.id.pop_dialog_btn: poproundprogressdialog(); break ; } } private void poproundprogressdialog() { if ( null == mroundcornerprogressdialog) { mroundcornerprogressdialog = new roundcornerprogressdialog(); } mroundcornerprogressdialog.setstyle(dialogfragment.style_normal, r.style.apptranslucentorigin); mroundcornerprogressdialog.show(getsupportfragmentmanager(), roundcornerprogressdialog.f_tag); if ( null != mprogressthread) { mprogressthread.interrupt(); try { mprogressthread.join( 400 ); } catch (interruptedexception e) { e.printstacktrace(); } mprogressthread = null ; } mprogressthread = new progressthread(); mprogressthread.start(); } private class progressthread extends thread { private int progress = 0 ; @override public void run() { super .run(); while (!isinterrupted()) { progress++; try { thread.sleep( 50 ); } catch (interruptedexception e) { e.printstacktrace(); break ; } if (progress > 100 ) { progress = 0 ; } final int p = progress; mmainhandler.post( new runnable() { @override public void run() { mroundcornerprogressdialog.updatepercent(p); } }); } } } } |
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对服务器之家的支持。
原文链接:https://www.jianshu.com/p/f7e151c2cb57