最近项目中要实现一个循环滚动的banner,效果如下图

  

  这个自己写实在是不方便,而且写出来也很难保证没有bug和性能缺陷,好在网上有人开源了一个实现滚动banner的RollViewPager框架,亲测方便可行。这篇博文简单记录一下如何使用开源框架RollViewPager实现Android滚动banner,想要深入学习可以去github下载源码:https://github.com/Jude95/RollViewPager

  这里主要实现的效果有:1. 图片无限自动轮播

             2. 触摸时暂停轮播

             3. 指示器可以为普通圆点、数字以及自定义图片

             4. 实现点击事件

  操作流程

  

  1. 在gradle中添加依赖(最新版本见github上的文档,这里使用1.3.2),然后同步gradle

  

  2. 编写布局文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="edu.neu.steve.rollviewpagerdemo.MainActivity">

    <com.jude.rollviewpager.RollPagerView
        android:id="@+id/roll_view_pager"
        android:layout_width="match_parent"
        android:layout_height="210dp"
        app:rollviewpager_play_delay="3000"
        app:rollviewpager_hint_paddingBottom="8dp"
        />

</LinearLayout>

  3. 编写MainActivity.java

package edu.neu.steve.rollviewpagerdemo;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;

import com.jude.rollviewpager.RollPagerView;
import com.jude.rollviewpager.adapter.LoopPagerAdapter;
import com.jude.rollviewpager.hintview.ColorPointHintView;

public class MainActivity extends AppCompatActivity
{

    private RollPagerView mRollViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRollViewPager = (RollPagerView) findViewById(R.id.roll_view_pager);
        mRollViewPager.setAnimationDurtion(500);     //设置切换时间
        mRollViewPager.setAdapter(new TestLoopAdapter(mRollViewPager)); //设置适配器
        mRollViewPager.setHintView(new ColorPointHintView(this, Color.WHITE, Color.GRAY));// 设置圆点指示器颜色
        // mRollViewPager.setHintView(new IconHintView(this, R.drawable.point_focus, R.drawable.point_normal));
    }

    private class TestLoopAdapter extends LoopPagerAdapter
    {
        private int[] imgs = {R.drawable.img0, R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4,};  // 本地图片
        private int count = imgs.length;        // banner上图片的数量

        public TestLoopAdapter(RollPagerView viewPager)
        {
            super(viewPager);
        }

        @Override
        public View getView(ViewGroup container, int position)
        {
            final int picNo = position + 1;
            ImageView view = new ImageView(container.getContext());
            view.setImageResource(imgs[position]);
            view.setScaleType(ImageView.ScaleType.CENTER_CROP);
            view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            view.setOnClickListener(new View.OnClickListener()      // 点击事件
            {
                @Override
                public void onClick(View v)
                {
                    Toast.makeText(MainActivity.this, "点击了第" + picNo + "张图片", Toast.LENGTH_SHORT).show();
                }

            });

            return view;
        }

        @Override
        public int getRealCount()
        {
            return count;
        }

    }
}

  4. 导入本地图片资源(略)

  5. 加载网络图片资源

  通常在我们的APP中banner的内容是从服务器端获取的。在Activity创建时(onCreate方法中)客户端要向服务器发送GET请求,目的是拿到banner图片的URL,当客户端拿到服务器返回的banner图片URL后通知banner更新图片(必须严格按照顺序进行)

mRollViewPager.setAdapter(new TestLoopAdapter(mRollViewPager)); // 设置适配器(请求网络图片,适配器要在网络请求完成后再设置)
mRollViewPager.getViewPager().getAdapter().notifyDataSetChanged();// 更新banner图片

  然后在自定义适配器TestLoopAdapter的getView方法中加载网络图片。这里使用Picasso,一行代码搞定!

Picasso.with(mContext).load(bannerPictureURLs.get(position)).into(view);  // 加载网络图片

  通过上述代码配合网络请求即可完成在banner中加载网络图片的功能,网络请求推荐使用OkHttp来实现,这里不再赘述。

用RollViewPager实现Android滚动banner的更多相关文章

  1. IOS无限自动循环滚动banner(源码)

    本文转载至 http://blog.csdn.net/iunion/article/details/19080259  目前有很多APP都开始使用一些滚动banner,我自己也做了一个,部分算法没有深 ...

  2. Android滚动页面位置指示器:CircleIndicator

     Android滚动页面位置指示器:CircleIndicator CircleIndicator是github上的一个开源的用于页面滚动时候的位置指示器,指示当前页面在总的页面中的位置和前后位置 ...

  3. Android实现Banner界面广告图片循环轮播(包括实现手动滑动循环)

    前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以 ...

  4. Android滚动截屏,ScrollView截屏

    在做分享功能的时候,需要截取全屏内容,一屏展示不完的内容,一般我们会用到 ListView 或 ScrollView 一: 普通截屏的实现 获取当前Window 的 DrawingCache 的方式, ...

  5. android 滚动视图(ScrollView)

    为了可以让内嵌布局管理器之中加入多个显示的组件,而且又保证程序不这么冗余,所以可以通过 Activity程序进行控制,向内嵌布局管理器中添加多个组件. ScrollView提供一个显示的容器,可以包含 ...

  6. Android——滚动视图(ScrollView)图片视图(ImageView)、状态开关按钮(ToggleButton)、时钟

    xml <?xml version="1.0" encoding="utf-8"?> <!--滚动视图--> <ScrollVie ...

  7. android滚动图片

    关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...

  8. android 滚动栏下拉反弹的效果(相似微信朋友圈)

    微信朋友圈上面的图片封面,QQ空间说说上面的图片封面都有下拉反弹的效果,这些都是使用滚动栏实现的.下拉,当松开时候.反弹至原来的位置.下拉时候能看到背景图片.那么这里简介一下这样的效果的实现. 本文源 ...

  9. android 滚动时间选择器

    一.概述 滚动时间选择现在貌似很常用,所以就总结一下,显示效果一般般 , 做个参考吧! 以上就是效果图,可以滚动选择 日期时间, 由于是在 5.0系统运行的,貌似5.0系统做了什么变动,下面的 &qu ...

随机推荐

  1. SQL高级查询——50句查询(含答案) ---参考别人的,感觉很好就记录下来留着自己看。

    --一个题目涉及到的50个Sql语句 --(下面表的结构以给出,自己在数据库中建立表.并且添加相应的数据,数据要全面些. 其中Student表中,SId为学生的ID) ---------------- ...

  2. firefox vimperator插件

    firefox vimperator插件实在是强大,最喜欢的几个功能做个笔记. 如何复制网页上的文字:c进入caret模式,定位cursor到要复制的开始位置--v进入visual模式,用hjkl键选 ...

  3. (l老陈-小石头)典型用户、用户故事、用例图

    一.典型用户 老陈 小石头 二.用户故事 老陈:作为一个家长,我希望能利用软件在电脑上储存一些数学题目,以便在繁忙的工作中也能帮助到孩子提高数学. 小石头:作为一个小学二年级的小学生,我希望能利用软件 ...

  4. 我的OpenCV学习笔记:VideoCapture类

    opnCV  学习博客http://blog.csdn.net/thefutureisour/article/details/7472104 1 OpneCV中的数据共享机制 OpenCV是一个很不错 ...

  5. 每天学习一点点--word-break和word-wrap用法和区别

    有时候一个又臭又长的单词出现在一个并不宽到足以容纳这个单词时会出现内容溢出容器这种情况: <!DOCTYPE html> <html lang="en"> ...

  6. ajax的status为201依然触发jquery的error事件的问题

    昨天在调试一个ajax的时候发现,即使status是201,仍然会触发jquery的error事件.statusText是"parseerror". 通过在stackoverflo ...

  7. win7 64位安装pygame

    需要的工具包 Python安装包 Pip安装包(版本无要求) Pygame安装包(版本需要与python匹配) http://jingyan.baidu.com/article/425e69e6ed3 ...

  8. Android常见的控件

    1.Log类的使用 (1)Log.v()    v是verbose  提醒的意思 (2)Log.d()   d是debug调试 (3)Log.i()    i是info信息的意思 (4)Log.w() ...

  9. js 反显查询。

    反显就是点击查询之后,查询条件消失,正常解决很容易,就是查询的表单value等于返回过来的值 ,比如这样,初始化时候的devNumber是空的,点击查询的时候会有值,我们在返回来显示就可以了. < ...

  10. jquery 无缝滚动 jquery.kxbdmarquee

    DEMO http://code.ciaoca.com/jquery/kxbdmarquee/demo/ 官网 http://code.ciaoca.com/jquery/kxbdmarquee/ D ...