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 = mList.size();
 View view = LayoutInflater.from(mContext).inflate(R.layout.banner_view,this,true);
 LinearLayout ll = (LinearLayout) view.findViewById(R.id.ll_points);
 vp= (ViewPager) view.findViewById(R.id.vp);
 ll.removeAllViews();
 LinearLayout.LayoutParams ll_parmas = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
 ll_parmas.leftMargin=5;
 ll_parmas.rightMargin=5;
 for(int i=0;i<length;i++){
  ImageView img = new ImageView(mContext);
  img.setLayoutParams(ll_parmas);
  if(i==0){
  img.setImageResource(R.mipmap.dot_focus);
  }else{
  img.setImageResource(R.mipmap.dot_blur);
  }
  ll.addView(img);
  mImgs.add(img);

  final ImageView imgforview = new ImageView(mContext);
  imgforview.setOnClickListener(this);
  imgforview.setScaleType(ImageView.ScaleType.FIT_XY);
  if(mList.get(i).getType()==0){//本地图片
  imgforview.setImageResource(mList.get(i).getDrawableforint());

  }else{//网络
  Glide.with(mContext).load(mList.get(i).getDrawableforurl()).diskCacheStrategy(DiskCacheStrategy.ALL).into(imgforview);
//  Glide.with(mContext).load(mList.get(i).getDrawableforurl()).listener(new RequestListener<String, GlideDrawable>() {
//   @Override
//   public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
//   Log.d("yu","Faile:"+e.toString());
//   return false;
//   }
//
//   @Override
//   public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
//    imgforview.setImageDrawable(resource);
//   return false;
//   }
//  }).into(imgforview);
//  Log.d("yu","url: "+mList.get(i).getDrawableforurl());
  }
  mViews.add(imgforview);
 }

 vp.setAdapter(new MyAdapter());
 vp.addOnPageChangeListener(onPageChange);

自动轮播利用的是handler的postdelay方法。

private Runnable task = new Runnable() {
 @Override
 public void run() {
  if(isAuto){
  currentItem = currentItem%(mViews.size());
//  Log.d("yu","runalbe "+currentItem);
  if(currentItem==0){
   vp.setCurrentItem(currentItem,false);
  }else{
   vp.setCurrentItem(currentItem);
  }
  currentItem++;
  mHandle.postDelayed(task,delaytime);
  }else{
  mHandle.postDelayed(task,delaytime);
  }
 }
 };

利用isAuto判断是否正在自动轮播 如果为false 不自动切换item。isAuto赋值操作位于OnPageChangeListener的onPageScrollStateChanged方法中:

 public void onPageScrollStateChanged(int state) {

  switch (state){
  case ViewPager.SCROLL_STATE_IDLE://用户什么都没有操作
   isAuto=true;
   currentItem = vp.getCurrentItem();
//   Log.d("yu","IDLE"+currentItem);
//   if(vp.getCurrentItem()==mViews.size()){
//   vp.setCurrentItem(0,false);
//   }
   break;
  case ViewPager.SCROLL_STATE_DRAGGING://正在滑动
   isAuto =false;
   break;
  case ViewPager.SCROLL_STATE_SETTLING://滑动结束
   isAuto=true;
   break;

  }
 }

当状态为SCROLL_STATE_DRAGGING时 说明用户正在操作 ,看下源码中的解释:

 /**
 * Indicates that the pager is in an idle, settled state. The current page
 * is fully in view and no animation is in progress.
 */
 public static final int SCROLL_STATE_IDLE = 0;

 /**
 * Indicates that the pager is currently being dragged by the user.
 */
 public static final int SCROLL_STATE_DRAGGING = 1;

 /**
 * Indicates that the pager is in the process of settling to a final position.
 */
 public static final int SCROLL_STATE_SETTLING = 2;

大致意思呢就是 0代码没有任何操作。1页面正在被用户拖动。2代表成功切换至下一页面。

源码地址:https://github.com/yudehai0204/autoBanner

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

时间: 2016-07-04

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

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

Android ViewPager实现图片轮播效果

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

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

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

RollViewPager无限轮播使用方法详解

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

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

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

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

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

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

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:

jQuery实现仿路边灯箱广告图片轮播效果

特效介绍 本图片幻灯就像路边灯箱广告,路边大广告牌效果,LED切换效果,并且会一直保持在页面最低端. 演示图 使用方法 1.在head区域引入style.css. 复制代码 代码如下: <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/> 2.html代码放在</body>上面: <div cla

Android UI实现广告Banner轮播效果

本篇博客要分享的一个效果是实现广告Banner轮播效果,这个效果也比较常见,一些视频类应用就经常有,就拿360影视大全来举例吧: 用红框框住的那个效果就是小巫今天要分享的,先来思考一下会用到什么控件?有什么用户体验? 控件我们可能一下子就可以想到的自然是ViewPager,没错!用到的就是ViewPager,那么它会有什么用户体验呢,它可能有以下几个体验: 1. 间隔不停的切换图片,指示器也跟着变 2. 点击图片可以跳转到指定的页面 如何实现? 布局开始着手 /BannerAutoScrollD

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使用ViewPager实现轮播效果

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

非常棒的jQuery图片轮播效果

本文实例为大家分享了jQuery图片轮播效果,很个性,具体内容如下 购物产品展示:图片轮播器,效果如下所示: 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果 两个区域:    最外层容器区域,如上图红色线框矩形    选项卡区域 两个事件:     鼠标悬浮或鼠标划入mouseover     鼠标离开mouseleave /**大屏广告滚动样式**/ <!DOCTYPE html> <html lang="en"> <head> &l

使用JQuery实现图片轮播效果的实例(推荐)

[效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片 4,设置setInterval,定时执行切换函数 [代码说明] filter(":visible") :获取所有可见的元素 unbind():从匹配的元素中删除绑定的事件 siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元