使用Banner实现图片的轮番显示的效果，替换ViewPager + CirclePagerIndicator

最新推荐文章于 2021-12-29 11:24:20 发布

原创最新推荐文章于 2021-12-29 11:24:20 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Banner #替换ViewPage #轮番显示

第三方框架-库等专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一款名为Banner的安卓库的使用方法，该库能够轻松实现ViewPager与CirclePagerIndicator的效果。文章提供了详细的步骤说明，包括引入依赖、设置权限、配置布局及编写主代码等，并附带了一个完整的示例应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天接触到了Banner，超级好用。
可以很方便的实现ViewPager + CirclePagerIndicator的效果。

源码来自于github：https://github.com/youth5201314/banner

我自己的完整代码已上传至我的资源：Banner的使用源代码.rar

github里面把使用方法介绍的十分清楚明了，而且真的是很easy~啊，大爱。

看效果：
这里写图片描述

效果还不错吧，有动画，可以自动跳转，也可手动滑动，有文本切换，还有小圆点的切换。
而代码量却是非常的少，用法也是相当的简单，特别适合我这样的手残党。

再简单看下过程吧：
1.在build.gradle文件中:
这里写图片描述

2. AndroidManifest.xml中添加权限
这里我被坑过，忘了加权限，又没报错，找了好久，发现后差点把自己扔了。。。

 <uses-permission android:name="android.permission.INTERNET"/>
 <uses-permission      android:name="android.permission.READ_EXTERNAL_STORAGE"/>

3.布局文件中添加Banner

    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="200dp"/>

4.activity的主代码

package com.example.chenjunmei.junmeiviewpagerabout;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;
import com.youth.banner.loader.ImageLoader;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class JMBannerTestActivity extends Activity {
    private Banner banner;

    //准备的标题文本集合
    String[] titles = new String[]{"《神奇动物》中文终极预告",
     "《罗曼蒂克消亡史》预告", "《承诺》首款预告", 
     "《娃娃老板》预告片"};

     //准备图片url的集合
    String[] imgUrlStrs = new String[]{
            "http://img5.mtime.cn/mg/2016/09/29/101927.61748190.jpg",
            "http://img5.mtime.cn/mg/2016/10/17/172246.85687810.jpg",
            "http://img31.mtime.cn/mg/2016/09/10/140500.21315060.jpg",
            "http://img5.mtime.cn/mg/2016/10/18/102203.49333729.jpg"
    };


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

        List<String> imageUrls = new ArrayList<String>();

        //将图片url的字符串放到List集合中
        for (int i = 0; i < imgUrlStrs.length; i++) {
            imageUrls.add(imgUrlStrs[i]);
        }

        Banner banner = (Banner) findViewById(R.id.banner);

        //设置banner样式（显示圆形指示器和标题）
          banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);
        //设置图片加载器
        banner.setImageLoader(new GlideImageLoader());
        //设置图片集合
        banner.setImages(imageUrls);
        //设置banner动画效果（正方体旋转式）
        banner.setBannerAnimation(Transformer.CubeOut);
        //设置标题集合（当banner样式有显示title时）
        banner.setBannerTitles(Arrays.asList(titles));
        //设置自动轮播，默认为true
        banner.isAutoPlay(true);
        //设置轮播时间
        banner.setDelayTime(2000);
        //设置指示器位置：左侧显示（当banner模式中有指示器时）
        banner.setIndicatorGravity(BannerConfig.LEFT);
        //banner设置方法全部调用完毕时最后调用
        banner.start();

    }

//图片加载器
class GlideImageLoader extends ImageLoader {
        @Override
         public void displayImage(Context context, Object path, ImageView imageView) {

            //Picacco加载图片简单用法   
                    Picasso.with(JMBannerTestActivity.this).load((String) path).into(imageView);
        }
    }
}