Android条纹进度条的实现(调整view宽度仿进度条)

前言

本文主要给大家介绍了关于android条纹进度条(调整view宽度仿进度条)的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧

方法如下：

美工同学指定了一个进度条样式

进度条样式

这斑斓的进度条，如果要自己画实在是劳民伤财。于是请美工切了一张素材。

素材样例

如果用shape或者.9图片不太好处理这个条纹。转变思路，放置2张图片。一张作为背景（底，bottom），一张作为进度条图片（cover）。

进度改变时，改变上面图片的宽度。

这就要求上面的图片是圆角的。自定义imageview，调用canvas.clippath来切割画布。

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()方法。

回到我们要的进度条。布局文件中放置好层叠的图片。

 <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

 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并传入进度，就可以看到效果了。

这只是实现效果的一种方法，如果有更多的想法，欢迎和我交流~

相关代码请参阅：

https://github.com/rustfisher/aboutview/blob/master/app/src/main/java/com/rust/aboutview/activity/roundcorneractivity.java

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);
     }
    });
   }
  }
 }

}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。