Android 网络加载图片实现页面轮播

效果图:

加入依赖:

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

页面布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
    tools:context=".Banner.BannnerMainActivity">

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

</LinearLayout>

逻辑功能实现:

• 实现网络加载图片:

package com.example.myapplication8.Banner;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.example.myapplication8.R;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;
import com.youth.banner.listener.OnBannerListener;
import com.youth.banner.loader.ImageLoader;

import java.util.ArrayList;

public class BannnerMainActivity extends AppCompatActivity implements OnBannerListener {

    private Banner mBanner;
    private ArrayList  list_path;
    private  ArrayList  list_title;

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

        intiView();

    }

    private void intiView() {
        mBanner = findViewById(R.id.banner);
        // 放图片的集合
        list_path = new ArrayList<>();
        // 放标题的集合
        list_title = new ArrayList<>();
        list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic21363tj30ci08ct96.jpg");
        list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic259ohaj30ci08c74r.jpg");
        list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic2b16zuj30ci08cwf4.jpg");
        list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic2e7vsaj30ci08cglz.jpg");

  /*      list_path.add(R.mipmap.b1);
        list_path.add(R.mipmap.b2);
        list_path.add(R.mipmap.b3);
        list_path.add(R.mipmap.b4);*/

        list_title.add("何以解忧");
        list_title.add("唯有暴富");
        list_title.add("热爱生活");
        list_title.add("一切顺利");

        // 设置样式
        mBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
        // 设置图片加载器,图片在加载器下方
        mBanner.setImageLoader(new MyLoader());
        // 设置图片网址或者地址
        mBanner.setImages(list_path);
        // 设置轮播动画
        mBanner.setBannerAnimation(Transformer.Default);
        // 设置轮播标题的集合
        mBanner.setBannerTitles(list_title);
        // 设置轮播间隔
        mBanner.setDelayTime(3000);
        // 设置自动轮播,默认是
        mBanner.isAutoPlay(true);
        // 设置指示器的位置:小点点  左中右
        mBanner.setIndicatorGravity(BannerConfig.CENTER)
                // 以上内容都可以写成链式布局,这是轮播的监听,比较重要,方法写在下面
               .setOnBannerListener(this)
                // 必须最后调用start方法,启动轮播图
               .start();
    }

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


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

}

• 本地加载:

package com.example.myapplication8.Banner;

import android.content.Context;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.bumptech.glide.Glide;
import com.example.myapplication8.R;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;
import com.youth.banner.listener.OnBannerListener;
import com.youth.banner.loader.ImageLoader;

import java.util.ArrayList;

public class BannerMain2Activity extends AppCompatActivity implements OnBannerListener {

    private Banner mBanner;  //banner组件
    private ArrayList imgList;  // 图片资源
    private ArrayList titleList; //轮播标题

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

    private void initView() {
        // 初始化两个集合,图片资源可以是本地,也可以是网络加载
        imgList = new ArrayList<>();
        imgList.add(R.mipmap.b1);
        imgList.add(R.mipmap.b2);
        imgList.add(R.mipmap.b3);
        imgList.add(R.mipmap.b4);
        titleList = new ArrayList<>();
        titleList.add("我是banner1");
        titleList.add("我是banner2");
        titleList.add("我是banner3");
        titleList.add("我是banner4");

        mBanner = (Banner) findViewById(R.id.banner);
        // 设置样式
        mBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
        // 设置图片加载器,图片在加载器下方
        mBanner.setImageLoader(new MyImageLoader());
        // 设置图片地址
        mBanner.setImages(imgList);
        // 设置 轮播动画
        mBanner.setBannerAnimation(Transformer.Default);
        // 设置 轮播标题的集合
        mBanner.setBannerTitles(titleList);
        // 设置轮播间隔
        mBanner.setDelayTime(3000);
        // 设置是否自动轮播
        mBanner.isAutoPlay(true);
        // 设置指示器的位置
        mBanner.setIndicatorGravity(BannerConfig.CENTER)
                .setOnBannerListener(this)
                .start();

    }

    /**
     * 轮播图的点击事件
     * @param position
     */
    @Override
    public void OnBannerClick(int position) {
        Toast.makeText(this,"你点击了第"+(position+1)+"张轮播图",Toast.LENGTH_LONG).show();

    }

    /**
     * 重写图片加载器
     */
    public class MyImageLoader extends ImageLoader {
        @Override
        public void displayImage(Context context, Object path, ImageView imageView) {
            Glide.with(context)
                    .load(path)
                    .into(imageView);
        }
    }
}