Banner图片轮播器实现ViewPager图片切换效果及下方小圆点

野性酷女 2023-01-24 02:27 30阅读 0赞

# Banner图片轮播器实现ViewPager图片切换效果及下方小圆点 #

## 在build.gradle中加载依赖 ##

//banner
        implementation 'com.youth.banner:banner:1.4.10'

## 在Manifest.xml中添加权限 ##

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

## xml实现 ##

*  直接在需要的位置插入banner就可以了
 *  高度、宽度自己根据情况定义

<com.youth.banner.Banner
                android:id="@+id/banner"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:layout_alignParentBottom="true"
                android:layout_marginBottom="5dp" />

## java代码实现 ##

1.  新建一个类，重写图片加载器

public class GlideImageLoader extends ImageLoader { 
        @Override
        public void displayImage(Context context, Object path, ImageView imageView) { 
    
    	//以下根据自己需要任选一种
    	
            //Glide 加载图片简单用法
            Glide.with(context).load(path).into(imageView);
    
            //Picasso 加载图片简单用法
            Picasso.with(context).load(path).into(imageView);
            
            //用fresco加载图片简单用法，记得要写下面的createImageView方法
            Uri uri = Uri.parse((String) path);
            imageView.setImageURI(uri);
        }
        
        //提供createImageView 方法，如果不用可以不重写这个方法，主要是方便自定义ImageView的创建
        @Override
        public ImageView createImageView(Context context) { 
            //使用fresco，需要创建它提供的ImageView，当然你也可以用自己自定义的具有图片加载功能的ImageView
            SimpleDraweeView simpleDraweeView=new SimpleDraweeView(context);
            return simpleDraweeView;
        }
    }

## 在layout对应的Activity/Fragment中配置Banner ##

--------------------------简单使用-------------------------------
    @Override
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Banner banner = (Banner) findViewById(R.id.banner);
        //设置图片加载器
        banner.setImageLoader(new GlideImageLoader());
        //设置图片集合
        banner.setImages(images);
        //banner设置方法全部调用完毕时最后调用
        banner.start();
    }
    --------------------------详细使用-------------------------------
    @Override
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Banner banner = (Banner) findViewById(R.id.banner);
        //设置banner样式
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);
        //设置图片加载器
        banner.setImageLoader(new GlideImageLoader());
        //设置图片集合
        banner.setImages(images);
        //设置banner动画效果
        banner.setBannerAnimation(Transformer.DepthPage);
        //设置标题集合（当banner样式有显示title时）
        banner.setBannerTitles(titles);
        //设置自动轮播，默认为true
        banner.isAutoPlay(true);
        //设置轮播时间
        banner.setDelayTime(1500);
        //设置指示器位置（当banner模式中有指示器时）
        banner.setIndicatorGravity(BannerConfig.CENTER);
        //banner设置方法全部调用完毕时最后调用
        banner.start();
    }
    -----------------当然如果你想偷下懒也可以这么用--------------------
    @Override
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Banner banner = (Banner) findViewById(R.id.banner);
        banner.setImages(images).setImageLoader(new GlideImageLoader()).start();
    }

参考：https://github.com/youth5201314/banner/tree/release-1.4.10