Android开发 Banner Activity和Fragment中网络图片和本地图片轮播教程示示例

最新推荐文章于 2024-04-09 08:22:33 发布

CoomCon

最新推荐文章于 2024-04-09 08:22:33 发布

阅读量1.2k

点赞数

分类专栏： Android 文章标签： android banner

本文链接：https://blog.csdn.net/CoomCon/article/details/102749370

版权

Android 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文主要介绍android开发中，com.youth.banner的使用。
包含本地res中加载、和网络图片网址加载方式。
包含activity和fragment中使用。Fragment的后续更新。
目前以下是acitvity中使用方法。

1.资源图片

下面四张图片就是使用的资源，其网络地址如下（后面是加入代码中）

list_path.add("https://img-blog.csdnimg.cn/20191025202219499.jpg");
list_path.add("https://img-blog.csdnimg.cn/20191025202237531.jpg");
list_path.add("https://img-blog.csdnimg.cn/20191025202245720.jpg");
list_path.add("https://img-blog.csdnimg.cn/20191025202300909.jpg");

在这里插入图片描述

2.环境配置

(1. build.gradle中加入dependency

    //轮播图.
    implementation 'com.youth.banner:banner:1.4.10'
    implementation 'com.github.bumptech.glide:glide:4.7.1'

(2. .manifest中加入permission

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

(3. .activity_main.layout中加入com.youth.banner

    <com.youth.banner.Banner
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="150dp" />

在这里插入图片描述

3.实现方法（网络图片）

initView() 方法 onCreate中，放在setcontentview（）之后。

private void initView() {
        banner = (Banner) findViewById(R.id.banner);
        //放图片地址的集合
        list_path = new ArrayList<>();
        //放标题的集合
        list_title = new ArrayList<>();

        list_path.add("https://img-blog.csdnimg.cn/20191025202219499.jpg");
        list_path.add("https://img-blog.csdnimg.cn/20191025202237531.jpg");
        list_path.add("https://img-blog.csdnimg.cn/20191025202245720.jpg");
        list_path.add("https://img-blog.csdnimg.cn/20191025202300909.jpg");
        list_title.add("Test1");
        list_title.add("Test2");
        list_title.add("Test3");
        list_title.add("Test4");
        //设置内置样式，共有六种可以点入方法内逐一体验使用。
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
        //设置图片加载器，图片加载器在下方
        banner.setImageLoader(new MyLoader());
        //设置图片网址或地址的集合
        banner.setImages(list_path);
        //设置轮播的动画效果，内含多种特效，可点入方法内查找后内逐一体验
        banner.setBannerAnimation(Transformer.Default);
        //设置轮播图的标题集合
        banner.setBannerTitles(list_title);
        //设置轮播间隔时间
        banner.setDelayTime(3000);
        //设置是否为自动轮播，默认是“是”。
        banner.isAutoPlay(true);
        //设置指示器的位置，小点点，左中右。
        banner.setIndicatorGravity(BannerConfig.CENTER)
                //以上内容都可写成链式布局，这是轮播图的监听。比较重要。方法在下面。
                .setOnBannerListener(this)
                //必须最后调用的方法，启动轮播图。
                .start();
    }

    //轮播图的监听方法
    @Override
    public void OnBannerClick(int position) {
        Log.i("tag", "你点了第"+position+"张轮播图");
    }
    //自定义的图片加载器
    private class MyLoader extends ImageLoader {
        @Override
        public void displayImage(Context context, Object path, ImageView imageView) {
            Glide.with(context).load((String) path).into(imageView);
        }
    }

3.实现方法（本地图片）

本地的ArrayList为Integer.记得声明变量arrayListlocal.

private  ArrayList<Integer> arrayListlocal;


    private void initView() {
        banner = (Banner) findViewById(R.id.banner);
        //放图片地址的集合
        //list_path = new ArrayList<>();
        //放标题的集合
        list_title = new ArrayList<>();
        arrayListlocal = new ArrayList<>();
        /*
        list_path.add("https://img-blog.csdnimg.cn/20191025202219499.jpg");
        list_path.add("https://img-blog.csdnimg.cn/20191025202237531.jpg");
        list_path.add("https://img-blog.csdnimg.cn/20191025202245720.jpg");
        list_path.add("https://img-blog.csdnimg.cn/20191025202300909.jpg");
        */
        arrayListlocal.add(R.drawable.banner1);
        arrayListlocal.add(R.drawable.banner2);
        arrayListlocal.add(R.drawable.banner3);
        arrayListlocal.add(R.drawable.banner4);

        list_title.add("Test1");
        list_title.add("Test2");
        list_title.add("Test3");
        list_title.add("Test4");
        //设置内置样式，共有六种可以点入方法内逐一体验使用。
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
        //设置图片加载器，图片加载器在下方
        banner.setImageLoader(new MyImageLoader());
        //设置图片网址或地址的集合
        banner.setImages(arrayListlocal);
        //banner.setImages(list_path);
        //设置轮播的动画效果，内含多种特效，可点入方法内查找后内逐一体验
        banner.setBannerAnimation(Transformer.Default);
        //设置轮播图的标题集合
        banner.setBannerTitles(list_title);
        //设置轮播间隔时间
        banner.setDelayTime(3000);
        //设置是否为自动轮播，默认是“是”。
        banner.isAutoPlay(true);
        //设置指示器的位置，小点点，左中右。
        banner.setIndicatorGravity(BannerConfig.CENTER)
                //以上内容都可写成链式布局，这是轮播图的监听。比较重要。方法在下面。
                .setOnBannerListener(this)
                //必须最后调用的方法，启动轮播图。
                .start();
    }


    private class MyImageLoader extends ImageLoader {
        @Override
        public void displayImage(Context context, Object path, ImageView imageView) {
            Glide.with(context.getApplicationContext())
                    .load(path)
                    .into(imageView);
        }
    }