美文网首页Android开发实战总结
Android 自定义实现轮播图效果

Android 自定义实现轮播图效果

作者: AKyS佐毅 | 来源:发表于2017-11-02 14:24 被阅读37次
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>

选中事件回调处理

选中事件回调处理

相关文章

网友评论

    本文标题:Android 自定义实现轮播图效果

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