用RollViewPager实现Android滚动banner

时间：2022-04-01 16:16:14

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

　　用RollViewPager实现Android滚动banner

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

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

　　　　　　　　　　　　　2. 触摸时暂停轮播

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

　　　　　　　　　　　　　4. 实现点击事件

　　操作流程

　　

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

　　用RollViewPager实现Android滚动banner

　　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来实现，这里不再赘述。

相关文章