Android客户端实现图片轮播控件
作者:absfree 发布时间:2023-08-12 17:01:57
本文和大家一起写一个Android图片轮播控件,供大家参考,具体内容如下
1. 轮播控件的组成部分
我们以知乎日报Android客户端的轮播控件为例,分析一下轮播控件的主要组成:
首先我们要有用来显示图片的View对象,根据上图中底部中央的5个点,我们知道需要5个ImageView来显示需要轮播的图片,另外还需要5个ImageView来显示5个点。现在考虑以下轮播组件应该具有的行为,首先需要每隔一定时间间隔切换到下一张图片,并且图片间切换的效果应该是平滑的,就像“翻书”一样。由此我们可以想到将5个图片当做ViewPager的Page,这样图片切换时自然会有平滑的效果。接下来,我们还要给底部的5个小点找一个父容器,由于它们是线性排列的,所以用LinearLayout是再合适不过了。然后,我们还要把ViewPager和容纳5个点的LinearLayout放入一个父容器中,这里我们选择使用垂直排列子View的LinearLayout。
这样一来,我们就得到了轮播控件的布局文件(carousel_layout.xml):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="@+id/dots"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:orientation="horizontal"
android:padding="8dp" >
</LinearLayout>
</LinearLayout>
通过对轮播控件的组成部分进行分析,我们已经确定了用什么“数据结构”来表示一个轮播组件,那么接下来,我们要做的就是实现轮播组件的”算法“,也就是业务逻辑。
2. 轮播组件的行为分析
轮播控件首先要具有的行为是自动播放,也就是每隔一定事件间隔(通常是3到5秒),便自动”翻到下一页“。为了实现这一点,我们可以维护一个currentItem变量来记录当前正在显示的图片,然后设置一个定时任务,调用ViewPager的setCurrentItem方法设置当前要显示的图片,并将currentItem设为下一张要显示的图片。有一点需要我们注意的便是播放到最后一张图片时,下一个被显示的应该是第一个图片,而且切换的效果也不再是平滑的。
轮播控件的还要能响应我们的滑动动作,也就是我们能够通过左右滑动来在不同的图片之间切换,这个行为ViewPager自动为我们提供了。另外还有一个轮播控件应该具备的行为是:当切换到指定图片时,相应的圆点应该以区别其他4个圆点的颜色显示,以便用户能够知道当前正在播放的是第几个图片。要实现这一点也不复杂,只需要为ViewPager添加一个OnPageChangeListener * ,然后重写相应的回调方法即可,这样当用户选定了某个Page时,onPageSelected方法会被回调,系统会传入当前Page的索引,我们便可以根据这个索引设置相应的圆点颜色。
3. 轮播控件的具体实现
经过以上的分析,我们已经清楚的了解了轮播组件的表示及业务逻辑,接下来只要我们用Java把这些描述出来就大功告成了。
(1)定时任务
我们需要定时执行“改变ViewPager当前Page为下一个Page”这一任务,这里我们采用Handler来实现,代码如下:
mHandler.postDelayed(task, DELAY);
private final Runnable task = new Runnable() {
@Override
public void run() {
if (isAutoPlay) {
currentItem = (currentItem + 1) % (mTopStories.size());
mVP.setCurrentItem(currentItem);
mHandler.postDelayed(task, DELAY);
} else {
mHandler.postDelayed(task, DELAY);
}
}
};
在以上代码中,DELAY代表我们设置的一个延迟常量(单位ms)。由于我们需要的是循环播放,因此第5张显示完毕后应该显示第一张,所以我们要想第6行那样进行一个模运算,这样currentItem就在0到4之间不停变化了。注意第5行有一个isAutoPlay变量,这个变量表示当前是否应该自动播放。那么什么时候不应该自动播放呢?我们知道当我们滑动手指切换图片时,图片会“跟随”着我们的手,就好比我们翻书页的时候,只有松开了手书页才能落下。所以我们正在“拖动”图片时,也就是我们的手还没松开时,轮播控件是不应该自动播放的。为了实现这一点,我们只需重写OnPageChangeListener中的onPageScrollStateChanged方法,在当前状态为“拖动”时设置isAutoPlay变量为false。从第10行我们可以知道,当autoPlay为false时,不会改变当前显示的图片,仅仅会等过了DELAY指定的时间后再执行下一次定时任务。
(2)OnPageChangeListener
上面我们提到了要给ViewPager添加一个OnPageChangeListener * 对象,来实现小圆点颜色的改变以及autoPlay变量的赋值。具体的实现请看以下代码,代码的含义都很直接:
class TopOnPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
for (int i = 0; i < mDotsIV.size(); i++) {
if (i == position) {
mDotsIV.get(i).setImageResource(R.drawable.dot_focus);
} else {
mDotsIV.get(i).setImageResource(R.drawable.dot_blur);
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
switch (state) {
//SCROLL_STATE_DRAGGING
case 1:
isAutoPlay = false;
break;
//SCROLL_STATE_SETTLING
case 2:
isAutoPlay = true;
break;
default:
break;
}
}
}
在以上代码的第10到16行,我们重写了onPageSelected方法,position参数表示当前Page的索引。这个方法中,我们设置当前图片对应的圆点图片为dot_focus,设置其他圆点的图片为dot_blur,这样用户就能知道当前的位置。在第21行到32行,我们重写了onPageScrollStateChanged方法,state参数代表了当前的“滚动状态,这个值为1表示当前用户正在”拖动“的过程中,因此要设置isAutoPlay为false;这个值为2表示用户松开了手,图片正在”滚动“中,这时我们就要把isAutoPlay设回默认值true,恢复自动播放。
(3) 更进一步
有时候我们希望能够从最后一页直接“翻到”第一页,而这种行为默认不被PagerView所支持,要想实现这个行为,我们可以在PagerView中增加一些“辅助页”,并重写OnPageChangeLisener中的相关方法。然而我们在很多场景中只需要保持PagerView的默认行为就好,要注意增加任何功能都要考虑应用场景,避免画蛇添足。
猜你喜欢
- 尝试了各种防止中文乱码的方式,但是还是乱码;最后还是细节问题导致;解决方式:以及俩种方式是百度的,我的问题不是这俩块1.在requestMa
- 重写addResourceHandlers映射文件路径在看一个博客源码发现页面的图片所映射的地址在SpringBoot静态资源文件夹下找不到
- C 预处理器不是编译器的组成部分,但是它是编译过程中一个单独的步骤。简言之,C 预处理器只不过是一个文本替换工具而已,它们会指示编译器在实际
- Java基础将Bean属性值放入Map中的实例利用发射将Java对象的属性值以属性名称为键,存储到Map中的简单实现。包括自身属性及从父类继
- 对于某些程序,我们只允许它使用某些特定端口、网络类型或者特定IP类型等信息。这时候,需要使用到防火墙里面的“高级设置”,创建某些特定的入站或
- 在网上也没有找到好的解决方案,于是自己研究了下给解决了,分享给大家,希望对大家能有所帮助。一、异常信息这种情况是因为FTP设置的默认目录引发
- 本文实例讲述了spring AOP的Around增强实现方法。分享给大家供大家参考,具体如下:一 配置<?xml version=&q
- 在互联网的服务端开发的时候,我们很经常要在一个项目中去调用不同的数据库。在这种情况下,必然要涉及到多数据源问题。那么,我们该如何解决多数据源
- 前言以多个客户端和一个服务端的socket通信为例,服务端启动时创建一个固定大小的线程池。服务端每接收到一个连接请求后(通信任务),交给线程
- using System; using System.Collections.Generic; using System.Linq; usi
- Cookie1. 概念是服务器通知客户端保存键值对的一种技术。cookie 是 servlet(服务器) 发送到 Web 浏览器(客户端)的
- 实例如下:public String stripHtml(String content) { // <p>段落替换为换行 con
- 实践过程效果代码public partial class Form1 : Form {
- 对于数据的访问来说,肯定是在有缓存的情况下运行快一些。对于Hibernate这种与数据库结合紧密的框架来说,在调用数据的时候肯定会有缓存的出
- 本文以新建的CUDA的.cu程序来进行说明,同样也适用于C程序。一,发现问题1,首先我们在vs2019中创建了工程以后(我所创建的工程名称为
- 关键字 static1. 概述static 是一种修饰符static 是Java中表静态的关键字它可以修饰成员变量、成员方法、代码块被sta
- 现在版本更新有两种处理方式:跳转到App应用市场,通过应用市场下载更新安装。在App内进行Apk下载,下载完成后更新安装。实现思路:请求后台
- 一、背景在开发过程中,我们的软件会面对不同的运行环境,比如开发环境、测试环境、生产环境,而我们的软件在不同的环境中,有的配置可能会不一样,比
- 一、概述1、Ribbon是什么Ribbon是Netflix发布的开源项目,Spring Cloud Ribbon是基于Netflix Rib
- 背景java程序员一般写的是后端服务是JavaWeb类型的项目,主要包括Http接口和dubbo接口,Http接口一般采用的rest风格,那