深度剖析之 GuideBackgroundColorAnimation
2016-01-04 18:29
399 查看
剖析项目名称: GuideBackgroundColorAnimation
剖析原项目地址:https://github.com/TaurusXi/GuideBackgroundColorAnimation
剖析理由:只知其然而不知其所以然,如此不好。想要快速的进阶,不走寻常路,剖析开源项目,深入理解扩展知识,仅仅这样还不够,还需要如此:左手爱哥的设计模式,右手重构改善既有设计,如此漫长打坐,回过头再看来时的路,书已成山,相信翔哥说的,量变引起质变
![](https://raw.githubusercontent.com/TaurusXi/GuideBackgroundColorAnimation/master/art/sample.gif)
上图效果是一个ViewPage+GuideBackgroundColorAnimation实现的,涉及到的知识点主要有属性动画、PageChangeListener,下面来了解GuideBackgoundColorAnimation的本质。
然而从构造函数看不出什么特别之处,就new 了一个ViewPager的监听实现类PageChangeListener
继续跟进seek方法,里面只做了两件事:创建ValueAnimator和setCurrentPlayTime(playTime)。ArgbEvaluator是一个十六进制的颜色计算的,setCurrentPlayTime方法:如果animation还没有开始,那么它会等到被设置这个时间后才开始。如果animation已经运行,那么setCurrentTime()会将当前的进度设置为这个值,然后从这个点继续播放。
对外部提供一个方法setViewPager()
综合所学知识,在还没坏掉的脑子里找到项目CircleIndicator,配合GuideBackgroundColorAnimation启动页的引导界面就瞬间感觉高大上了O(∩_∩)O~,下面是实践效果图:
![](https://img-blog.csdn.net/20160104181934930)
上图CircleIndicator的效果不太明显,接着看下图你就明了了
![](https://raw.githubusercontent.com/ongakuer/CircleIndicator/master/screenshot.gif)
简单提一下用法,Android Studio 导入项目:
先来看看自定义的具体属性含义
app:ci_width 圆的宽度
app:ci_height 圆的高度
app:ci_margin 圆的间距宽度
app:ci_drawable 选中的图片
app:ci_drawable_unselected 没有选中是的图片
app:ci_animator 动画
下面是Xml引用:
代码调用实例(同上必须设置Adapter后调用):
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,谢..)
剖析原项目地址:https://github.com/TaurusXi/GuideBackgroundColorAnimation
剖析理由:只知其然而不知其所以然,如此不好。想要快速的进阶,不走寻常路,剖析开源项目,深入理解扩展知识,仅仅这样还不够,还需要如此:左手爱哥的设计模式,右手重构改善既有设计,如此漫长打坐,回过头再看来时的路,书已成山,相信翔哥说的,量变引起质变
![](https://raw.githubusercontent.com/TaurusXi/GuideBackgroundColorAnimation/master/art/sample.gif)
上图效果是一个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的效果不太明显,接着看下图你就明了了
![](https://raw.githubusercontent.com/ongakuer/CircleIndicator/master/screenshot.gif)
简单提一下用法,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,谢..)
相关文章推荐
- UI控件之UITableView
- UI测试常见BUG汇总——适用于新手
- iOS UIView的clipsTobounds属性
- Maximum Value二分二分 暴力暴力
- PHP之include/require深入了解
- UI基础类 UIView
- iOS8开发~UI布局(三)深入理解autolayout
- iOS8开发~UI布局(二)storyboard中autolayout和size class的使用详解
- iOS8开发~UI布局(一)初探Size Class
- msm8660 ics lcd blueScreen issue
- UILabel字间距行间距
- iOS个人整理01-创建UI工程及UIView简单使用
- Query在线选座订座(影院篇)
- UITableView 总结
- UIView常见属性
- UILable,UIFont,UIButton常见属性
- SynchronousQueue、LinkedBlockingQueue、ArrayBlockingQueue性能测试
- SynchronousQueue、LinkedBlockingQueue、ArrayBlockingQueue性能测试
- 内部跳转(请求转发)request.getRequsetDispatcher()和外部跳转(重定向)response.sendRedirect()的区别
- google的guice入门详解