深度剖析之 GuideBackgroundColorAnimation

最新推荐文章于 2018-12-14 16:15:43 发布

AnalyzeSystem

最新推荐文章于 2018-12-14 16:15:43 发布

阅读量1.3k

点赞数

分类专栏： Android 文章标签：开源项目

本文链接：https://blog.csdn.net/AnalyzeSystem/article/details/50457438

版权

Android 专栏收录该内容

92 篇文章 3 订阅

订阅专栏

剖析项目名称： GuideBackgroundColorAnimation
剖析原项目地址：https://github.com/TaurusXi/GuideBackgroundColorAnimation
剖析理由：只知其然而不知其所以然，如此不好。想要快速的进阶，不走寻常路，剖析开源项目，深入理解扩展知识，仅仅这样还不够，还需要如此：左手爱哥的设计模式，右手重构改善既有设计，如此漫长打坐，回过头再看来时的路，书已成山，相信翔哥说的，量变引起质变

上图效果是一个ViewPage+GuideBackgroundColorAnimation实现的，涉及到的知识点主要有属性动画、PageChangeListener,下面来了解GuideBackgoundColorAnimation的本质。

/**
 * Created by TaurusXi on 2014/5/20.
 */
public class ColorAnimationView extends View implements ValueAnimator.AnimatorUpdateListener, Animator.AnimatorListener {

    private static final int RED = 0xffFF8080;
    private static final int BLUE = 0xff8080FF;
    private static final int WHITE = 0xffffffff;
    private static final int GREEN = 0xff80ff80;
    private static final int DURATION = 3000;
    ValueAnimator colorAnim = null;

    private PageChangeListener mPageChangeListener;

    ViewPager.OnPageChangeListener onPageChangeListener;

    public void setOnPageChangeListener(ViewPager.OnPageChangeListener onPageChangeListener) {
        this.onPageChangeListener = onPageChangeListener;
    }

    public ColorAnimationView(Context context) {
        this(context, null, 0);

    }

    public ColorAnimationView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ColorAnimationView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPageChangeListener = new PageChangeListener();
    }
}

然而从构造函数看不出什么特别之处，就new 了一个ViewPager的监听实现类PageChangeListener

private class PageChangeListener
            implements ViewPager.OnPageChangeListener {

        private int viewPagerChildCount;

        /**
         * 供外部设置，simple:setAadapter（）方法传入item个数，通过构造函数初始化的实例调用该方法赋值
         **/
        public void setViewPagerChildCount(int viewPagerChildCount) {
            this.viewPagerChildCount = viewPagerChildCount;
        }

        public int getViewPagerChildCount() {
            return viewPagerChildCount;
        }

        @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            //ViewPager的Item个数大于1则可以滑动（个人觉得这里用ViewPager的Adapter.getCount比较合适，count的判断应该是>0,这样逻辑要严谨点，） 
            int count = getViewPagerChildCount() - 1;
            if (count != 0) {
                //根据位置和偏移计算比例progress
                float length = (position + positionOffset) / count;
                int progress = (int) (length * DURATION);
                ColorAnimationView.this.seek(progress);
            }
            // call the method by default
            if (onPageChangeListener!=null){
            //如果调用者还需要PageChangeListener监听绑定后这里就可以回调    onPageChangeListener.onPageScrolled(position,positionOffset,positionOffsetPixels);
            }

        }

        //...................此处略......................
    }

继续跟进seek方法，里面只做了两件事：创建ValueAnimator和setCurrentPlayTime(playTime)。ArgbEvaluator是一个十六进制的颜色计算的，setCurrentPlayTime方法：如果animation还没有开始，那么它会等到被设置这个时间后才开始。如果animation已经运行，那么setCurrentTime()会将当前的进度设置为这个值，然后从这个点继续播放。

private void seek(long seekTime) {
        if (colorAnim == null) {
            createDefaultAnimation();
        }
        colorAnim.setCurrentPlayTime(seekTime);
    }

private void createAnimation(int... colors) {
        if (colorAnim == null) {
            colorAnim = ObjectAnimator.ofInt(this,
                    "backgroundColor", colors);
            colorAnim.setEvaluator(new ArgbEvaluator());
            colorAnim.setDuration(DURATION);
            colorAnim.addUpdateListener(this);
        }
    }

对外部提供一个方法setViewPager()

/**
     * 这是你唯一需要关心的方法
     * @param mViewPager  你必须在设置 Viewpager 的 Adapter 这后，才能调用这个方法。
     * @param obj ,这个obj实现了 ColorAnimationView.OnPageChangeListener ，实现回调
     * @param count   ,viewpager孩子的数量
     * @param colors int... colors ，你需要设置的颜色变化值~~ 如何你传人 空，那么触发默认设置的颜色动画
     * */
    /**
     * This is the only method you need care about.
     * @param mViewPager  ,you need set the adpater before you call this.
     * @param count   ,this param set the count of the viewpaper's child
     * @param colors ,this param set the change color use (int... colors),
     *               so,you could set any length if you want.And by default.
     *               if you set nothing , don't worry i have already creat
     *               a default good change color!
     * */
    public void setViewPager(ViewPager mViewPager, int count, int... colors) {
//      this.mViewPager = mViewPager;
        if (mViewPager.getAdapter() == null) {
            throw new IllegalStateException(
                    "ViewPager does not have adapter instance.");
        }

        mPageChangeListener.setViewPagerChildCount(count);

         /***如果没有传入colors就调用默认的，个人觉得这里有点点问题，使用者在使用时不想传入colors，item的个数如果不止4个，那么效果就不理想，建议优化：新增方法  
         public void setmViewPager(ViewPager mViewPager){
                   //adapter加入非空判断
                   ...........
                  setViewPager(mViewPager,mViewPager.getAdapter().getCount(),new int[]{})
         }
         ***/ 
        if (colors.length == 0) {
            createDefaultAnimation();
        } else {
            createAnimation(colors);
        }
    }

综合所学知识，在还没坏掉的脑子里找到项目CircleIndicator，配合GuideBackgroundColorAnimation启动页的引导界面就瞬间感觉高大上了O(∩_∩)O~，下面是实践效果图：

上图CircleIndicator的效果不太明显，接着看下图你就明了了

简单提一下用法，Android Studio 导入项目：

dependencies {
    compile 'me.relex:circleindicator:1.1.7@aar'
}

先来看看自定义的具体属性含义

app:ci_width 圆的宽度
app:ci_height 圆的高度
app:ci_margin 圆的间距宽度
app:ci_drawable 选中的图片
app:ci_drawable_unselected 没有选中是的图片
app:ci_animator 动画

下面是Xml引用：

<me.relex.circleindicator.CircleIndicator
        android:id="@+id/circleIndicator"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_gravity="bottom"
        app:ci_width="10dp"
        app:ci_height="10dp"
        app:ci_margin="5dp"
        app:ci_animator="@animator/indicator_no_animator"
        app:ci_drawable="@drawable/white_radius"
        app:ci_drawable_unselected="@drawable/black_radius"
        />

代码调用实例（同上必须设置Adapter后调用）：

viewPager.setAdapter(adpter);
circleIndicator.setViewPager(viewPager);

CircleIndicator的实现原理和这个相差不大都是关联ViewPager，通过ViewPager的监听回调改变UI，这里就不细说，不过有个建议，如果你对于drawable相关属性还需要xml配合觉得麻烦，可以自己尝试使用color属性，在CircleIndicator构造方法解析属性成color，new 出需要的drawable。

目前很多应用的引导页都还有一个按钮“立即体验”、“马上进入”等button在最后一个界面显示，提供两种方案，一个是Fragment不再是new ImageView()作为contentView，引用xml布局，另一种方案是自定义View绘制圆角矩形和文字，提供一个方法供调用setText（），onTouch监听区域是否在矩形范围内执行相应回调(个人功力深厚可以选择第二种)，与这两个开源项目结合起来，同样通过onPageChangeListener控制CircleIndicator和Button的显示和隐藏

代码太简单了，就不贴Demo了，逗逼下班开撸了（惫懒的我对于优化没了兴趣，如果谁有写了，请@me,谢..）