Android实现蜗牛进度条效果

Android实现蜗牛进度条效果,第1张

概述友好的界面可以给用户留下深刻印象,为APP加分,今天实现的这个进度条,以蜗牛爬动的方式告诉用户当前进度,体验比较棒,这里分享一下。

友好的界面可以给用户留下深刻印象,为APP加分,今天实现的这个进度条,以蜗牛爬动的方式告诉用户当前进度,体验比较棒,这里分享一下。

这里创建一组帧动画作为进度条的标志,如下:

<?xml version="1.0" enCoding="utf-8"?><animation-List xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:oneshot="false">  <item androID:drawable="@drawable/s1" androID:duration="300" />  <item androID:drawable="@drawable/s2" androID:duration="300" />  <item androID:drawable="@drawable/s3" androID:duration="300" />  <item androID:drawable="@drawable/s4" androID:duration="300" />  <item androID:drawable="@drawable/s5" androID:duration="300" /></animation-List>

设置了onshot属性值为false,保证动画可以一直循环。这里添加了5张图片,每隔300毫秒进行轮换,会形成一组流畅的动画。

自定义view继承自Seekbar,如下:

public class Snailbar extends Seekbar {  public Snailbar(Context context) {    super(context);    init();  }  public Snailbar(Context context,AttributeSet attrs) {    super(context,attrs);    init();  }  public Snailbar(Context context,AttributeSet attrs,int defStyleAttr) {    super(context,attrs,defStyleAttr);    init();  }  private voID init() {      setMax(100);//设置最大进度    setThumbOffset(dip2px(getContext(),20));    setBackgroundResource(R.drawable.sbg);//设置背景    int padding = dip2px(getContext(),(float)20);    setpadding(padding,padding,padding);//设置内边距    setProgressDrawable(getResources().        getDrawable(R.drawable.snailbar_define_style));  }  @OverrIDe  protected voID onAttachedToWindow() {    super.onAttachedToWindow();    AnimationDrawable drawable =        (AnimationDrawable)this.getThumb();    drawable.start();  }  public int dip2px(Context context,float dpValue) {    final float scale = context.getResources()        .getdisplayMetrics().density;    return (int) (dpValue * scale + 0.5f);  }}

在布局文件中引入这个控件,代码如下:

<relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:background="#deeaeb">  <linearLayout    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent"    androID:gravity="center"    androID:orIEntation="vertical">    <TextVIEw      androID:ID="@+ID/seekbar_percent"      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:layout_margintop="10dp"      androID:text="Snailbar"      androID:textSize="24sp"      androID:textStyle="bold" />    <TextVIEw      androID:ID="@+ID/seekbar_status"      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:text="snailbar status"      androID:textSize="14sp" />    <ad.pintextvIEw.Snailbar      androID:ID="@+ID/seekbar"      androID:layout_wIDth="match_parent"      androID:layout_height="wrap_content"      androID:layout_margintop="30dp"      androID:thumb="@drawable/snailanim"/>  </linearLayout></relativeLayout>

在MainActivity.Java中进行逻辑的控制,代码如下:

public class MainActivity extends AppCompatActivity {  private Seekbar seekbar;  private TextVIEw seekbar_status;  int len = 0;  @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentVIEw(R.layout.activity_main);    seekbar = (Seekbar) findVIEwByID(R.ID.seekbar);    seekbar.setMax(100);    seekbar_status = (TextVIEw) findVIEwByID(R.ID.seekbar_status);    handler.sendEmptyMessage(1);  }  private Handler handler = new Handler() {    @OverrIDe    public voID handleMessage(Message msg) {      switch (msg.what) {        case 1:          handleHandler();          break;      }    }  };  private voID handleHandler() {    if (seekbar.getProgress() < 100) {      if (seekbar.getProgress() < 20) {        len += 2;        handler.sendEmptyMessageDelayed(1,500);        seekbar_status.setText("normal download speed.");      } else if (seekbar.getProgress() > 21          && seekbar.getProgress() < 26) {        len += 1;        handler.sendEmptyMessageDelayed(1,1000);        seekbar_status.            setText("Sundden speed down or disconnet...");      } else {        len += 2;        handler.sendEmptyMessageDelayed(1,50);        seekbar_status.setText("Sundden speed up.");      }      seekbar.setProgress(len);    }  }}

逻辑也比较简单,用Handler自组建一个循环,首先判断进度小于20的时候每隔500毫秒发送一个Message消息(正常进度);判断进度为21-26的时候每隔1000毫秒发送一个消息(最慢进度);判断进度为27-100时每隔50毫秒发送一个Message消息(最快进度)。

运行这个实例如下:

通过上面的动图可以看出,笨蜗牛爬到最后的时候还在动手动脚动脑袋,似乎不太合乎情理。我们可以监听Seekbar的进度,当进度为100的时候停止动画,在上面的代码添加监听进度的代码如下:

seekbar.setonSeekbarchangelistener(new Seekbar.OnSeekbarchangelistener() {  @OverrIDe  public voID onProgressChanged(Seekbar seekbar,int i,boolean b) {    if(seekbar.getProgress()==100){      AnimationDrawable drawable =          (AnimationDrawable)seekbar.getThumb();      drawable.stop();    }  }  @OverrIDe  public voID onStartTrackingtouch(Seekbar seekbar) {  }  @OverrIDe  public voID onStopTrackingtouch(Seekbar seekbar) {  }});

每次进度变化都会不断回调方法onProgressChanged,因此在这个方法中判断若进度为100,就停止动画,这时再次运行实例如下:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android实现蜗牛进度条效果全部内容,希望文章能够帮你解决Android实现蜗牛进度条效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1145951.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存