Android ViewPager实现图片轮播效果

在app中图片的轮播显示可以说是非常常见的实现效果了,其实现原理不过是利用ViewPager,然后利用handler每隔一定的时间将ViewPager的currentItem设置为当前item的position+1即可。先来看看效果图吧:

就是实现这样的一个轮播广告的效果。

因为这个是自己为了练习仿照某旅游类App做的,所以这里的数据是使用抓包工具抓取的,准备数据等工作就不在这里赘述了,反正数据的添加大体都是相同的。我的思路是这样的,从网络上实时的获取数据(当然你也可以将数据写死),然后通过网络工具类和json解析类完成对数据的解析与封装从List集合。根据集合的长度来决定ViewPager有多少page页面,下面的小圆点有多少。在函数中首先要设置一个boolean类型的标志位,用来判断是否停止轮播的(我们要在此页面不可见(onStop()方法内)的时候结束轮播),定义一个全局变量来记录当前的小圆点的位置。
private boolean isStop = false;  //标志位,判断是否停止轮播
private int previousPointEnale = 0;  //标记上一个小圆点的位置

然后我们就要为ViewPager的轮播做准备了,比如说动态的根据数据条目来生成小圆点,定义适配器等,代码如下:

/**
   * banner的图片轮播事件初始化
   */
  private void initCycleEvent() {
    //根据解析到的图片的个数,初始化小圆点
    LinearLayout.LayoutParams params;
    for (int i = 0; i < imageViewList.size(); i++) {
      View dot = new View(getActivity());
      dot.setBackgroundResource(R.drawable.point_background);
      params = new LinearLayout.LayoutParams(15, 15);
      params.leftMargin = 10;
      dot.setLayoutParams(params);
      dot.setEnabled(false);
      ll_dot_group.addView(dot);
    }

    //定义匿名适配器
    adapter = new PagerAdapter() {
      @Override
      public int getCount() {
        //因为要实现轮播,所以将数值设置的大一些
        return Integer.MAX_VALUE;
      }

      @Override
      public boolean isViewFromObject(View view, Object object) {
        return view == object;
      }

      @Override
      public Object instantiateItem(ViewGroup container, final int position) {
        imageViewList.get(position % imageViewList.size()).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
            Intent intent = new Intent(getActivity(), WebViewActivity.class);
            intent.putExtra("url", bannerList.get(position % imageViewList.size()).getUrl());
            startActivity(intent);
          }
        });
        container.addView(imageViewList.get(position % imageViewList.size()));
        return imageViewList.get(position % imageViewList.size());
      }

      @Override
      public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(imageViewList.get(position % imageViewList.size()));
      }
    };
    vp_banner.setAdapter(adapter);
    //初始化第一个page页和第一个小圆点
    vp_banner.setCurrentItem(0);
    ll_dot_group.getChildAt(0).setEnabled(true);
    //为viewPager设置监听
    vp_banner.addOnPageChangeListener(new MyPageChangeListener());
  }

这里小圆点我们没有用图片,而是用自定义的<selector>和<shape>结合来展示出来的。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/point_bg_enable" android:state_enabled="true"/>
   <item android:drawable="@drawable/point_bg_normal" android:state_enabled="false"/>

</selector>

小圆点获取焦点的时候显示的是这个<shape>资源文件:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval" >

  <corners android:radius="3dp" />

  <solid android:color="#AAFFFFFF" />

</shape>

失去焦点的时候:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval" >

  <corners android:radius="3dp" />

  <solid android:color="#55000000" />

</shape>

适配器PagerAdapter中的getCount()方法,这个方法是返回要展示生成的ViewPager的page页的个数的,instantiateItem()方法(加载page页)的执行次数是根据getCount()的返回值来决定的,所以我们这里因为要"无限"循环,所以将其设置的大一些,使用INTEGER.MAX整数的最大值来表示。imageViewList是存储我们要展示的imageView的集合,正常情况下不需要轮播的时候,我们直接根据position来addView()即可,但是因为要实现轮播,所以我们利用position和imageViewList集合的长度使用求余的方法来确定图片的下标

position % imageViewList.size()

下面是定义适配器和动态生成标识图片位置的小圆点的代码:

/**
   * banner的图片轮播事件初始化
   */
  private void initCycleEvent() {
    //根据解析到的图片的个数,初始化小圆点
    LinearLayout.LayoutParams params;
    for (int i = 0; i < imageViewList.size(); i++) {
      View dot = new View(getActivity());
      dot.setBackgroundResource(R.drawable.point_background);
      params = new LinearLayout.LayoutParams(15, 15);
      params.leftMargin = 10;
      dot.setLayoutParams(params);
      dot.setEnabled(false);
      ll_dot_group.addView(dot);
    }

    //定义匿名适配器
    adapter = new PagerAdapter() {
      @Override
      public int getCount() {
        //因为要实现轮播,所以将数值设置的大一些
        return Integer.MAX_VALUE;
      }

      @Override
      public boolean isViewFromObject(View view, Object object) {
        return view == object;
      }

      @Override
      public Object instantiateItem(ViewGroup container, final int position) {
        imageViewList.get(position % imageViewList.size()).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
            Intent intent = new Intent(getActivity(), WebViewActivity.class);
            intent.putExtra("url", bannerList.get(position % imageViewList.size()).getUrl());
            startActivity(intent);
          }
        });
        container.addView(imageViewList.get(position % imageViewList.size()));
        return imageViewList.get(position % imageViewList.size());
      }

      @Override
      public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(imageViewList.get(position % imageViewList.size()));
      }
    };
    vp_banner.setAdapter(adapter);
    //初始化第一个page页和第一个小圆点
    vp_banner.setCurrentItem(0);
    ll_dot_group.getChildAt(0).setEnabled(true);
    //为viewPager设置监听
    vp_banner.addOnPageChangeListener(new MyPageChangeListener());
  }

记住在addView()和removeView()的时候都是要根据求余的值来找到对应位置的应该展示的imageView。初始化工作完成,下面应该是完成对轮播的操作了,这里我们开启一个线程来每相隔一定的时间,获取当前ViewPager的page页的position,然后+1,再设置当前page页下标为这个新的值即可:

/**
   * 开启轮播线程的方法
   */
  private void startBannerScrollThread() {
    new Thread(new Runnable() {
      @Override
      public void run() {
        //先判断是否停止轮播
        while (!isStop) {
          SystemClock.sleep(2000);
          handler.post(new Runnable() {
            @Override
            public void run() {
              int newindex = vp_banner.getCurrentItem() + 1;
              vp_banner.setCurrentItem(newindex);
            }
          });
        }
      }
    }).start();
  }

当然,因为每个图片展示给我们的时候,在图片下方的指示性小圆点要有相应的变化,所以在ViewPager中我们还要处理它的滑动事件,所以我们自定义了一个类,实现了ViewPager.OnPageChangeListener接口,在onPageSelected()方法中处理相应的事件:

   /**
* viewPager滑动监听事件
   */
  class MyPageChangeListener implements ViewPager.OnPageChangeListener {

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
      //获取新的一页的位置
      int newPosition = position % imageViewList.size();
      //将上一个小圆点的背景设为默认那个
      ll_dot_group.getChildAt(previousPointEnale).setEnabled(false);
      //设置当前page页的小圆点样式
      ll_dot_group.getChildAt(newPosition).setEnabled(true);
      //把新的位置赋值给previousPointEnale
      previousPointEnale = newPosition;
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
  }

关键的代码和思路就是这样的,这里还有一篇我参照的文章,写的不错,下面把链接放在这里:

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

时间: 2016-09-08

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

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

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

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

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

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

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

本文和大家一起写一个Android图片轮播控件,供大家参考,具体内容如下 1. 轮播控件的组成部分 我们以知乎日报Android客户端的轮播控件为例,分析一下轮播控件的主要组成: 首先我们要有用来显示图片的View对象,根据上图中底部中央的5个点,我们知道需要5个ImageView来显示需要轮播的图片,另外还需要5个ImageView来显示5个点.现在考虑以下轮播组件应该具有的行为,首先需要每隔一定时间间隔切换到下一张图片,并且图片间切换的效果应该是平滑的,就像"翻书"一样.由此我们可

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实现图片轮播效果的两种方法

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

RollViewPager无限轮播使用方法详解

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

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在代码中对其

Android线程实现图片轮播

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

android使用ViewPager实现轮播效果

ViewPager:一个可以实现视图左右滑动切换的控件. ViewPager的基本使用: ViewPager的视图需要通过PagerAdapter来实现显示. PagerAdapter的主要方法: ● getCount 视图的数量 ● instantiateItem 添加视图 ● destroyItem 销毁视图 ● isViewFromObject 是否由对象创建视图 ViewPager的常用方法: setAdapter 设置适配器 addOnPageChangeListener 监听页面切换

Android实现图片轮播效果

本文实例讲述了JaAndroid实现图片轮播效果代码,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 首先看下一下布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_par

Android开发使用Handler实现图片轮播功能示例

本文实例讲述了Android使用Handler实现图片轮播功能.分享给大家供大家参考,具体如下: 提前定义好一个Runnable接口,然后用handler调用. Mainactivity代码如下: package com.example.handle_01; import android.os.Handler; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.wid