第7章 图片定时滑动播放效果 授课老师：高成珍 QQ号： QQ群： 、

Presentation on theme: "第7章 图片定时滑动播放效果 授课老师：高成珍 QQ号： QQ群： 、"— Presentation transcript:

1 第7章 图片定时滑动播放效果 授课老师：高成珍 QQ号：1281147324 QQ群：287966120、314753495
网络资源：

2 自定义控件—图片轮播效果 效果描述 该控件中包含多张图片，并且图片是按照从左到右的顺序依次摆放的，图片间可以切换，并且能够展示切换过程。在此，图片间的切换有如下三种方式。 ①定时切换，即每隔一定的时间（在此为8秒）图片自动切换到下一张图片。 ②手势滑动切换，即该控件能够监听用户的触摸事件，根据用户手势切换到上一张或下一张图片。 ③单击小圆圈切换，一个小圆圈对应一张图片，红色的小圆圈对应当前显示的图片，单击某个小圆圈后，能够切换到该圆圈所对应的图片。

3 自定义控件—图片轮播效果 1. 自定义容器类，继承自ViewGroup
ViewGroup是所有容器类的基类，它自身并没有指定容器中各子控件的摆放规则，而是提供了一个抽象方法onLayout()，由其子类实现该方法来指定具体的摆放规则。当容器里的控件大小发生变化时，会自动回调该方法。本例指定容器里的控件从左到右摆放，即控件的水平位置根据其在容器中的序号来计算，而垂直位置都是从顶部开始。关键代码如下：

4 自定义控件—图片轮播效果 2. 向容器中添加图片
MyImageTopView控件的主要作用就是在多个图片之间滑动切换，首先需要为其初始化一些图片，在此为其单独写了一个方法initImages(int[] imgIds)，根据数组中的图片个数，创建相应的图片控件，然后将其添加到容器中。

5 自定义控件—图片轮播效果 3. 定时轮播功能 创建定时器，发送消息 什么时候启动定时器？ 接收和处理消息
要想实现定时轮播功能，必定需要启动一个线程用于计时，到了指定的时间，即执行图片切换功能。Android中明确规定子线程不能操作UI主线程，在此通过Handler消息传递机制实现子线程与主线程间通信。具体步骤如下。 ①创建和启动定时器 ②通过Handler定时发送消息 ③Handler接收消息并处理消息 ④实现图片滑动切换 创建定时器，发送消息 什么时候启动定时器？ 接收和处理消息

6 自定义控件—图片轮播效果 ④实现图片滑动切换 启动滑动动画 更改滚动条位置
由于需要展示图片滑动切换的过程，因此，首先需要知道滑动的距离，然后设置滑动的时间，接着根据距离和时间生成滑动补间动画。滑动结束后，需要记录当前显示的图片。关键代码如下。 启动滑动动画 更改滚动条位置

7 自定义控件—图片轮播效果 4. 手势滑动切换功能 应该在哪里为控件注册触摸事件监听器？ 触摸事件监听器
要想实现手势滑动切换功能，首先需要为该控件添加触摸事件监听器，然后创建手势监听器，并将触摸事件转交给手势监听器处理，最后根据用户的手势操作切换到上一张或下一张。具体步骤如下。 ①创建触摸事件监听器，并为控件注册该监听器 ②创建手势监听器，并将触摸事件转交给手势监听器处理 ③重写手势监听器中的onScroll()和onFling()方法，处理用户操作 ④实现图片滑动切换 触摸事件监听器 应该在哪里为控件注册触摸事件监听器？

8 自定义控件—图片轮播效果 手 势 监 测 器 Android中手势检测器能够识别用户的各种触摸操作，并针对不同的操作调用相应的方法进行处理，本案例中主要处理onScroll()和onFling()两种操作。

9 自定义控件—图片轮播效果 onScroll()方法实现 onFling()方法实现

10 自定义控件—图片轮播效果 5. 单击小圆圈切换图片 ①修改布局文件，在图片底部添加小圆圈 ② 初始化小圆圈控件，圆圈的个数由图片数决定
要想实现单击小圆圈切换图片功能的关键在于小圆圈和图片之间建立一一对应的关系。一个小圆圈代表一张图片，小圆圈有两种状态，红色表示当前显示的图片，黄色表示未显示的图片。同时，当图片切换后，相应的小圆圈状态也要随之变化，小圆圈与图片之间是双向互联关系，相互影响。具体步骤如下。 ①修改布局文件，在图片底部添加小圆圈 ② 初始化小圆圈控件，圆圈的个数由图片数决定 ③为圆圈控件添加事件处理，让图片切换到指定图片 ④图片切换后，需改变小圆圈的状态 如何让小圆圈与图片之间建立一一对应的关系？

11 自定义控件—图片轮播效果 初始化小圆圈并为其添加单击事件处理 将所有的小圆圈设置为黄色

12 自定义控件 在Android中，所有的控件都是从View类继承而来，View类中只提供了一些共同的属性、方法，类似于Java中Object类是所有类的超类一样。View对象可以理解为屏幕上一块空白的矩形区域，不同的控件通过继承View类，然后重写它的一些方法，或者额外添加一些方法，进行扩展，从而形成了风格迥异、功能强大的控件。基于这个原理，开发者完全可以通过继承View类或者View类的已有子类来创建具有自己风格的控件。具体步骤如下： 1）定义控件的类名，并让该类继承View类或一个现有的View的子类。本例中希望创建一个可以容纳其它控件的容器控件，因此选择继承View类的子类ViewGroup。

13 自定义控件 2）为自定义控件添加构造方法，然后选择性的重写父类的方法。自定义控件时，必须提供构造方法，构造方法是创建自定义控件的最基本方式，无论是通过Java代码还是布局文件创建该控件，都会执行构造方法。View类本身不存在无参数的构造方法，子类必须显示调用父类的构造方法，否则会报错。此外，可根据业务需要重写父类的部分方法。例如onDraw()方法用于绘制界面。本例中重写了父类的onLayout()方法和computeScroll()方法，这些方法是系统根据情景自动调用的。 3）使用自定义的控件，既可以通过Java代码来创建，也可以通过XML布局文件进行创建，在XML布局文件中，该控件的标签是完整的包名+类名，而不再仅仅是原来的类名。并且要求该控件定义时，构造方法中要提供AttributeSet类型参数。

14 手势检测 所谓手势，其实是指用户手指或触摸笔在触摸屏上的连续触碰行为，例如在屏幕上从左到右划出的一个动作，Android中提供了手势检测，并为手势检测提供了相应的监听器。Android中的手势检测类是GestureDetector，创建该类的对象时，需传递两个参数：当前的上下文对象Context，以及手势监听器OnGestureListener。 使用Android中的手势检测只需要两个步骤： (1)创建一个手势检测类GestureDetector的对象，并指定手势监听器； (2)为当前页面或者特定控件添加触摸事件监听器，例如本例中就是为MyImageTopView控件添加触摸事件监听器，然后在触摸事件处理中将触摸事件转交给GestureDetector处理。

15 手势检测监听器 boolean onDown(MotionEvent e)：手指刚刚接触到触摸屏的那一刹那，触发该方法；
void onShowPress(MotionEvent e)：手指按在触摸屏上，触发该方法，它的时间范围在按下起效，在长按之前； boolean onSingleTapUp(MotionEvent e)：手指离开触摸屏的那一刹那，触发该方法； boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)：手指在触摸屏上滑动时触发该方法，该方法四个参数分别表示滚动开始时的触摸事件，滚动结束时的触摸事件，X轴滚动的距离，Y轴滚动的距离； void onLongPress(MotionEvent e)：手指按在屏幕上持续一段时间，并且没有松开时触发该方法； boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)：手指在触摸屏上迅速移动，并松开时触发该方法，该方法四个参数分别表示开始移动时的触摸事件、松开时的触摸事件、X轴的速度、Y轴的速度。 手势检测监听器

16 手势检测执行过程 当用户触摸手机屏幕时，系统会自动生成一个触摸事件MotionEvent，该事件将会被触摸事件监听器OnTouchListener监听到，然后会调用该监听器的onTouch()方法，并将触摸事件作为参数传递给该方法，然而在onTouch()方法内部又调用GestureDetector的onTouch()方法，同样将触摸事件传递给它，一旦执行该方法，将会被手势监听器监听到，从而会调用手势监听器中的相关方法进行处理。 课后练习题 （1）请简单描述用户触摸屏幕到手势执行的过程。 （2）以下哪个方法不是OnGestureListener接口中声明的方法。（） A、onDown() B、onUp() C、onScroll() D、onFling()

17