美文网首页手机移动程序开发Android开发经验谈移动开发
代码打造一直变色的炫彩动态ProgressBar(原创)

代码打造一直变色的炫彩动态ProgressBar(原创)

作者: NB一沓 | 来源:发表于2018-07-21 14:02 被阅读52次

    本文讲的是如何动态修改安卓原生progresbar颜色,最终打造一款一直变色的炫彩progressbar。

    先上图:

    aaaa.gif
    感觉如何,是不是很酷炫呢,下面我们将用两种方式去实现它。

    基础知识准备

    在开始写代码之前,我们先了解一下progresbar的相关知识
    progressbar的样式可以在style.xml里控制:

      <style name="MyProgressBar" parent="Base.Widget.AppCompat.ProgressBar">
            <item name="android:indeterminateTint">@color/colorYellow</item>
            <item name="android:minHeight">200dp</item>>
            <item name="android:minWidth">200dp</item>>
        </style>
    

    其中我们把android:indeterminateTint设置了黄色,现在我们看下效果何


    yellowBar.gif

    原来白色的进度圈被设置成了黄色:-P

    可见android:indeterminateTint是控制圈圈颜色属性的

    实现炫彩ProgressBar

    既然有了改变圈圈颜色的属性,我们开始思考怎么实现第一张图的炫彩效果,就是用代码动态的去设置progressbar的indeterminateTint属性值。
    研究progresbar的源码发现,其并没有提供 设置indeterminateTint的方法,但有个方法引起了我的注意:

     public void setIndeterminateTintList(ColorStateList tint) {
            throw new RuntimeException("Stub!");
        }
    

    只要在代码中给调用setIndeterminateTintList 给progressbar设置不同的ColorStateList 即可。

    下面贴出代码

        ArrayList<Integer>list=new ArrayList<>();
            list.add(AzulApp.getInstance().getResources().getColor(R.color.f));
            list.add(AzulApp.getInstance().getResources().getColor(R.color.colorPrimary));
            list.add(AzulApp.getInstance().getResources().getColor(R.color.colorAccent));
            list.add(AzulApp.getInstance().getResources().getColor(R.color.d));
            list.add(AzulApp.getInstance().getResources().getColor(R.color.e));
            list.add(AzulApp.getInstance().getResources().getColor(R.color.c));
            list.add(AzulApp.getInstance().getResources().getColor(R.color.a));
            list.add(AzulApp.getInstance().getResources().getColor(R.color.colorYellow));
            list.add(AzulApp.getInstance().getResources().getColor(R.color.f));
    
     Observable.interval(0,400, TimeUnit.MILLISECONDS)
                      .subscribe(n->{
                        ColorStateList colorStateList = ColorStateList.valueOf(list.get((int) (n%list.size())));
                      circleProgressBar.setIndeterminateTintList(colorStateList);
                    });
    

    代码讲解:先把各种颜色放到list里面,用list生成ColorStateList对象,
    在用Rxjava实现计时功能,每400ms就 设置一下circleProgressBar.setIndeterminateTintList,这样就可以有炫彩效果了

    扩展

    indeterminateTint控制了progressbar颜色属性,那就可以用属性动画去做。
    indeterminateTint没有get,set方法
    1.我们先对indeterminateTint的属性添加get,set方法,方式是给progressbar做一个包装类,把get set写进去,包装类代码

    public class ColorfulProgressBar extends ProgressBar {
    
    
        public int TintColor;
    
        public ColorfulProgressBar(Context context) {
            super(context);
        }
    
        public ColorfulProgressBar(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public ColorfulProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        @TargetApi(Build.VERSION_CODES.LOLLIPOP)
        public ColorfulProgressBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
            super(context, attrs, defStyleAttr, defStyleRes);
        }
    
        public int getTintColor() {
            return TintColor;
        }
    
    
        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        public void setTintColor(int tintColor) {
            TintColor = tintColor;
            setIndeterminateTintList(ColorStateList.valueOf(TintColor));
        }
    
    
    
    
    }
    

    2.对包装的TintColor属性设置属性动画实现变色

            ObjectAnimator.ofInt(circleProgressBar,"TintColor",AzulApp.getInstance().getResources().getColor(R.color.colorPrimary),AzulApp.getInstance().getResources().getColor(R.color.colorAccent))
            .setDuration(2000).start();
    

    相关文章

      网友评论

        本文标题:代码打造一直变色的炫彩动态ProgressBar(原创)

        本文链接:https://www.haomeiwen.com/subject/wmrhmftx.html