Android 自定义实现轮播图效果

2017-11-02 10.46.27.gif

本次使用ViewGroup实现自定义轮播效果，Demo地址戳这里👇

ViewGroup

• 我们知道ViewGroup就是View的容器类，我们经常用的LinearLayout，RelativeLayout等都是ViewGroup的子类，因为ViewGroup有很多子View，所以它的整个绘制过程相对于View会复杂一点，但是还是三个步骤measure，layout，draw，我们一次说明。

• ViewGroup相当于一个放置View的容器，并且我们在写布局xml的时候，会告诉容器（凡是以layout为开头的属性，都是为用于告诉容器的），我们的宽度（layout_width）、高度（layout_height）、对齐方式（layout_gravity）等；当然还有margin等；于是乎，ViewGroup的职能为：给childView计算出建议的宽和高和测量模式 ；决定childView的位置；为什么只是建议的宽和高，而不是直接确定呢，别忘了childView宽和高可以设置为wrap_content，这样只有childView才能计算出自己的宽和高。

• Measure
  - Measure过程还是测量ViewGroup的大小，如果layout_widht和layout_height是match_parent或具体的xxxdp，就很简单了，直接调用setMeasuredDimension()方法，设置ViewGroup的宽高即可，如果是wrap_content，就比较麻烦了，我们需要遍历所有的子View，然后对每个子View进行测量，然后根据子View的排列规则，计算出最终ViewGroup的大小。

Measure

• Layout
  • layout过程其实就是对子View的位置进行排列，onLayout方法给我一个机会，来按照我们想要的规则自定义子View排列。
  • 其中view.layout（left,top,right,bottom）方法可以对子View的位置进行设置。

Layout

• Draw
  • ViewGroup在draw阶段，其实就是按照子类的排列顺序，调用子类的onDraw方法，因为我们只是View的容器， 本身一般不需要draw额外的修饰，所以往往在onDraw方法里面，只需要调用ViewGroup的onDraw默认实现方法即可。
  • LayoutParams
    ViewGroup还有一个很重要的知识LayoutParams，LayoutParams存储了子View在加入ViewGroup中时的一些参数信息，在继承ViewGroup类时，一般也需要新建一个新的LayoutParams类，就像SDK中我们熟悉的LinearLayout.LayoutParams，RelativeLayout.LayoutParams类等一样，那么可以这样做，在你定义的ViewGroup子类中，新建一个LayoutParams类继承与ViewGroup.LayoutParams。
  • 不需要重写，使用ViewGroup默认实现即可。

View中还有三个比较重要的方法

• requestLayout
  View重新调用一次layout过程。
• invalidate
  View重新调用一次draw过程
• forceLayout
  标识View在下一次重绘，需要重新调用layout过程。

ViewGroup中 onInterceptTouchEvent(MotionEvent ev)方法是为了拦截事件的。

• 因为事件默认会往下传递，如果发现该事件我应该捕获那就让它返回true。然后就会交给onTouchEvent处理。返回false则交给子View处理。

处理事件

两种方式实现轮播图

• 1、利用 scrollTo scrollBy 完成轮播图的手动轮播

  • 1: 滑动之前的x坐标和滑动之后的x坐标，求出此次过程中移动的距离，利用scrollBy 方法实现图片的滑动。

  • 2: 刚开始坐标是固定的。

  • 3: 在不断滑动的过程中，会不断的调用ACTION_MOVE 方法，此时将移动之前的值和之后的值进行保存，算出移动的距离。

  • 4: 在抬起时，计算需要滑动到哪张图片上。

  • scrollTo（int x,int y）：
    假设偏移位置发生了改变，就会给mScrollX和mScrollY赋新值，改变当前位置。
    注意：x,y代表的不是坐标点。而是偏移量。
    比如：
    我要移动view到坐标点（100，100），那么我的偏移量就是(0,，0) - （100，100） = （-100 ，-100） ，我就要运行view.scrollTo(-100,-100),达到这个效果。

  • scrollBy（int x,int y）：
    表示在原先偏移的基础上在发生偏移，通俗的说就是相对我们当前位置偏移。

  • 当手指从屏幕左侧even.getX的值是由0往正数加的 所以scrollBy里是-distance（viewgroup里的的内容相较于屏幕是往左移所以是-）。而getScrollX的值和even.getX是刚好相反的，当手指从屏幕左侧往右滑动的时候，getScrollX的值是从0变为负数，所以求index的时候可以直接用该值去加屏幕的一半。

• 2、利用 scroller 对象 完成轮播图的手动轮播

  • 创建scroller对象

      scroller = new Scroller(getContext());
    

  • 必须实现computeScroll方法

computeScroll scroller.startScroll

实现自动轮播效果

• 使用Timer、 TimeTask、Handler三者结合实现自动轮播效果

• 开启任务

  
  Timer、 TimeTask

• 发送信息

  
  Handler

创建FragemntLayout

• 1、继承三个构造方法

三个构造方法

• 2、添加BannerGroupView视图

BannerGroupView

• 3、添加DotImageView视图

DotImageView

• 4、添加数据源并布局

添加数据源并布局

加载底部的圆点指示器

• 创建资源文件
  • 正常的圆点

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color= "@android:color/white" />
    <size android:height="7.5dp" android:width="7.5dp"/>
</shape>

• 高亮的圆点

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color= "@android:color/holo_green_light" />
    <size android:height="7.5dp" android:width="7.5dp"/>
</shape>

选中事件回调处理

选中事件回调处理