Android客户端实现图片轮播控件

本文和大家一起写一个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的默认行为就好,要注意增加任何功能都要考虑应用场景,避免画蛇添足。

以上就是本文的全部内容,希望对大家的学习有所帮助。

(0)

相关推荐

  • RollViewPager无限轮播使用方法详解

    支持无限循环. 触摸时会暂停播放,直到结束触摸一个延迟周期以后继续播放. 看起来就像这样.指示器可以为点可以为数字还可以自定义,位置也可以变.. 主要操作过程: 1.在gradle中导入包: compile 'com.jude:rollviewpager:1.2.9' 2.设置播放时间间隔.透明度.指示器(指示器可以是默认原点,数字,也可以自定义图片) 3.设置适配器,本demo中是StaticPagerAdapter,这个比较简单,用的比较多,有其他需要的可以看github源码. 主要需要设置

  • RollViewPager图片轮播效果开源框架使用方法详解

    RollViewPager是一个自动轮播的Viewpager,支持无限循环. 触摸时会暂停播放,直到结束触摸一个延迟周期以后继续播放. 看起来就像这样.指示器可以为点可以为数字还可以自定义,位置也可以变. 附上RollViewPager Github地址:https://github.com/Jude95/RollViewPager 使用Android Studio开发在gradle添加依赖: compile 'com.jude:rollviewpager:1.4.5' 在布局文件当中使用: <

  • Android使用开源框架ANDROID-IMAGE-INDICATOR实现图片轮播部署

    之前的博文中有介绍关于图片轮播的实现方式,分别为(含超链接): 1.<Android中使用ViewFlipper实现屏幕切换> 2.<Android中使用ViewPager实现屏幕页面切换和页面轮播效果> 3.<Android中使用ImageViewSwitcher实现图片切换轮播导航效果> 今天通过使用GitHub中的开源项目android-image-indicator来简单实现APP自带图片的轮播以及加载网络图片进行轮播. 一.从GitHub上下载项目 GitHu

  • Android ViewPager实现图片轮播效果

    在app中图片的轮播显示可以说是非常常见的实现效果了,其实现原理不过是利用ViewPager,然后利用handler每隔一定的时间将ViewPager的currentItem设置为当前item的position+1即可.先来看看效果图吧: 就是实现这样的一个轮播广告的效果. 因为这个是自己为了练习仿照某旅游类App做的,所以这里的数据是使用抓包工具抓取的,准备数据等工作就不在这里赘述了,反正数据的添加大体都是相同的.我的思路是这样的,从网络上实时的获取数据(当然你也可以将数据写死),然后通过网络

  • Android实现图片轮播切换实例代码

    利用Android的ViewFlipper和AnimationUtils实现图片带有动画的轮播切换,其中当点击"上一张"图片时,切换到上一张图片:当点击"下一张"图片时,切换到下一张图片.其效果图如下: 设置布局文件,其内容如下: activity_image_flipper_shade.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xm

  • Android实现图片轮播效果的两种方法

    大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁琐) 这种发放需要:两个动画效果,一个布局,一个主类来实现,不多说了,来看代码吧: public class IamgeTrActivity extends Activity { /** Called when the activity is first created. */ public ImageView image

  • Android线程实现图片轮播

    一.实现效果 本篇文章实现了简单的图片轮播,初始化3张资源图片,初始化3秒更换一次图片背景,轮换播放. 二.知识点 Thread线程start() .sleep();handler机制;Android 控件imageView.setBackgroundResource(id); 还算是较为简单的,涉及的基本都是基础知识. 三.基本思路 1.初始化资源文件 2.创建一个实例化线程对象 new Thread() 3.handler 机制,sendMessage(msg); 来处理线程信息,以改变当前

  • Android实现广告图片轮播效果

    本文实例介绍了Android广告轮播图效果实现方法,分享给大家供大家参考,具体内容如下 首先看下一下布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:

  • Android自动播放Banner图片轮播效果

    先看一下效果图 支持本地图片以及网络图片or本地网络混合. 使用方式: <com.jalen.autobanner.BannerView android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="230dip"> </com.jalen.autobanner.BannerView> 核心代码: int length

  • Android开发之滑动图片轮播标题焦点

    先给大家这是下效果图: 谷歌提供的v4包,ViewPager 在布局文件中,先添加<android.support.v4.view.ViewPager/>控件,这个只是轮播的区域 在布局文件中,布置标题描述部分 线性布局,竖向排列,背景色黑色半透明,这个布局和上面的ViewPager底部对齐layout_alignBottom="@id/xxx" <TextView/>居中显示, 小点部分,先放过空的LinearLayout,id是ll_points在代码中对其

随机推荐