android的轮播图Banner之本地加载和网络加载图片

「爱情、让人受尽委屈。」 2022-04-15 04:53 701阅读 0赞

GitHub地址：[https://github.com/youth5201314/banner][https_github.com_youth5201314_banner]

前言

关于轮播图 我个人是比较喜欢 闲来无事的时候 可以整理自己的照片 做一个demo 看看动态的效果   
挺不错的！   
每个App也基本都有一些广告位置 只要打开这个页面就会无限轮播广告图片   
看多了我们也会记得这个效果 那么他是怎么实现的呢？今天我就学习了一下 写了一个demo来练练手

先看效果图吧

导入依赖的包

版本可自行调整 我用的是1.4.10 里面的动画Animation 和样式Style更多一些

//轮播依赖  
implementation'com.youth.banner:banner:1.4.10'  
//Glide框架  
implementation "com.github.bumptech.glide:glide:4.6.1"  
  
权限问题

如果你从SD卡读取图片 别忘了加读写权限  
下面有从网络加载图片的方法加了相关网络权限  
<uses-permission android:name="android.permission.INTERNET" /> //网络权限  
<uses-permission android:name="android.permission.READ\_EXTERNAL\_STORAGE" /> //读取SD卡  
  
布局资源

<?xml version="1.0" encoding="utf-8"?>  
<android.support.constraint.ConstraintLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:app="http://schemas.android.com/apk/res-auto"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout\_width="match\_parent"  
    android:layout\_height="match\_parent"  
    tools:context=".MainActivity">

<com.youth.banner.Banner  
        android:id="@+id/banner"  
        android:layout\_width="match\_parent"  
        android:layout\_height="150dp"  
        app:layout\_constraintBottom\_toBottomOf="parent"  
        app:layout\_constraintTop\_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>  
  
MainActivity的代码

这个demo加载的图片是本地的

public class MainActivity extends AppCompatActivity implements OnBannerListener \{  
    private Banner mBanner;  
    private MyImageLoader mMyImageLoader;  
    private ArrayList<Integer> imagePath;  
    private ArrayList<String> imageTitle;

@Override  
    protected void onCreate(Bundle savedInstanceState) \{  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity\_main);  
        initData();  
        initView();  
    \}

private void initData() \{  
        imagePath = new ArrayList<>();  
        imageTitle = new ArrayList<>();  
        imagePath.add(R.mipmap.seabird);  
        imagePath.add(R.mipmap.seabird);  
        imagePath.add(R.mipmap.seabird);  
        imageTitle.add("我是海鸟一号");  
        imageTitle.add("我是海鸟二号");  
        imageTitle.add("我是海鸟三号");  
    \}

private void initView() \{  
        mMyImageLoader = new MyImageLoader();  
        mBanner = findViewById(R.id.banner);  
        //设置样式，里面有很多种样式可以自己都看看效果  
        mBanner.setBannerStyle(BannerConfig.CIRCLE\_INDICATOR\_TITLE);  
        //设置图片加载器  
        mBanner.setImageLoader(mMyImageLoader);  
        //设置轮播的动画效果,里面有很多种特效,可以都看看效果。  
        mBanner.setBannerAnimation(Transformer.ZoomOutSlide);  
        //轮播图片的文字  
        mBanner.setBannerTitles(imageTitle);  
        //设置轮播间隔时间  
        mBanner.setDelayTime(3000);  
        //设置是否为自动轮播，默认是true  
        mBanner.isAutoPlay(true);  
        //设置指示器的位置，小点点，居中显示  
        mBanner.setIndicatorGravity(BannerConfig.CENTER);  
        //设置图片加载地址  
        mBanner.setImages(imagePath)  
                //轮播图的监听  
                .setOnBannerListener(this)  
                //开始调用的方法，启动轮播图。  
                .start();

/\*\*  
     \* 轮播图的监听  
     \*  
     \* @param position  
     \*/  
    @Override  
    public void OnBannerClick(int position) \{  
        Toast.makeText(this, "你点了第" + (position + 1) + "张轮播图", Toast.LENGTH\_SHORT).show();  
    \}

/\*\*  
     \* 图片加载类  
     \*/  
    private class MyImageLoader extends ImageLoader \{  
        @Override  
        public void displayImage(Context context, Object path, ImageView imageView) \{  
            Glide.with(context.getApplicationContext())  
                    .load(path)  
                    .into(imageView);  
        \}  
    \}  
\}  
  
加载网络图片方法

如果你的demo一片空白 没有图片 请注意敲黑板！！,敲黑板！！,敲黑板！！极大可能是没有网络权限   
布局就不上传了 主要代码如下

public class MainActivity extends AppCompatActivity implements OnBannerListener \{  
    private Banner banner;  
    private ArrayList<String> list\_path;  
    private ArrayList<String> list\_title;

@Override  
    protected void onCreate(Bundle savedInstanceState) \{  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity\_main);  
        initView();  
        initData();  
    \}

private void initData() \{  
        list\_path.add("https://gss0.baidu.com/94o3dSag\_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/  
        sign=e9873bfca944ad342eea8f81e09220cc/a8ec8a13632762d08fa73daea8ec08fa513dc602.jpg");

list\_path.add("https://gss0.baidu.com/94o3dSag\_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/  
         sign=e9873bfca944ad342eea8f81e09220cc/a8ec8a13632762d08fa73daea8ec08fa513dc602.jpg");

list\_path.add("https://gss0.baidu.com/94o3dSag\_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/   
         sign=e9873bfca944ad342eea8f81e09220cc/a8ec8a13632762d08fa73daea8ec08fa513dc602.jpg");

list\_title.add("我爱NBA");  
        list\_title.add("我爱科比布莱恩特");  
        list\_title.add("我爱NBA");  
        list\_title.add("我爱科比布莱恩特");  
    \}

private void initView() \{  
        banner = findViewById(R.id.banner);  
        list\_path = new ArrayList<>();  
        list\_title = new ArrayList<>();  
        banner.setBannerStyle(BannerConfig.CIRCLE\_INDICATOR\_TITLE\_INSIDE);  
        banner.setImageLoader(new MyLoader());  
        banner.setBannerAnimation(Transformer.Default);  
        banner.setBannerTitles(list\_title);  
        banner.setDelayTime(3000);  
        banner.isAutoPlay(true);  
        banner.setIndicatorGravity(BannerConfig.CENTER);  
        banner.setImages(list\_path)  
                .setOnBannerListener(this)  
                .start();  
    \}

/\*\*  
     \* 轮播监听  
     \*  
     \* @param position  
     \*/  
    @Override  
    public void OnBannerClick(int position) \{  
        Toast.makeText(this, "你点了第" + (position + 1) + "张轮播图", Toast.LENGTH\_SHORT).show();  
    \}

/\*\*  
     \* 网络加载图片  
     \* 使用了Glide图片加载框架  
     \*/  
    private class MyLoader extends ImageLoader \{  
        @Override  
        public void displayImage(Context context, Object path, ImageView imageView) \{  
            Glide.with(context.getApplicationContext())  
                    .load((String) path)  
                    .into(imageView);  
        \}  
    \}  
\}  
效果图

[https_github.com_youth5201314_banner]: https://github.com/youth5201314/banner