Android的轮播图Banner之本地加载和网络加载图片(含demo)

前言

关于轮播图我个人是比较喜欢闲来无事的时候可以整理自己的照片
做一个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.ConstraintLayoutxmlns: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.Bannerandroid: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;@Overrideprotected 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);//设置是否为自动轮播，默认是truemBanner.isAutoPlay(true);//设置指示器的位置，小点点，居中显示mBanner.setIndicatorGravity(BannerConfig.CENTER);//设置图片加载地址mBanner.setImages(imagePath)//轮播图的监听.setOnBannerListener(this)//开始调用的方法，启动轮播图。.start();}/*** 轮播图的监听** @param position*/@Overridepublic void OnBannerClick(int position) {Toast.makeText(this, "你点了第" + (position + 1) + "张轮播图", Toast.LENGTH_SHORT).show();}/*** 图片加载类*/private class MyImageLoader extends ImageLoader {@Overridepublic 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;@Overrideprotected 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_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*/@Overridepublic void OnBannerClick(int position) {Toast.makeText(this, "你点了第" + (position + 1) + "张轮播图", Toast.LENGTH_SHORT).show();}/*** 网络加载图片* 使用了Glide图片加载框架*/private class MyLoader extends ImageLoader {@Overridepublic void displayImage(Context context, Object path, ImageView imageView) {Glide.with(context.getApplicationContext()).load((String) path).into(imageView);}}
}

效果图

与君共勉

我要一步一步往上爬
在最高点乘着叶片往前飞
任风吹干流过的泪和汗
我要一步一步往上爬
等待阳光静静看着它的脸
小小的天有大大的梦想
我有属于我的天
任风吹干流过的泪和汗
总有一天我有属于我的天

Android的轮播图Banner之本地加载和网络加载图片(含demo)相关推荐

【Android】轮播图图片的本地保存及读取
#一.轮播图控件及图片加载对于Android端的轮播图控件,我这边选用的是banner库 //轮播图 compile 'com.youth.banner:banner:1.4.9' //Glide ...
android github轮播图,GitHub - ZTJzzz/Banner: Android轮播图
Android轮播图 - Banner 纵观Android古今,轮播图已然泛滥成灾!大神们各显神通大兴土木,所起楼台之高让后来者心生膜拜,纷纷Star!但不法分子也是层出不穷,为求"大神&q ...
怎样实现banner自动播放html,纯css实现轮播图banner自动轮换效果
话不多说直接上代码 * { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px; width: 1146px ...
android 自动轮播图,Android-自定义View实现轮播图
主要步骤 1.自定义View的实现过程(测量.布局.绘制) 2.事件拦截机制方法.图片轮播时的Scroller对象使用 3.轮播图自动轮播时,Timer.TimerTask.Handler三者的结合 ...
学成在线项目-轮播图banner
学成在线项目-轮播图banner 1.效果图如下 2.html代码如下: <!DOCTYPE html> <html lang="en"> <head ...
前端开发——轮播图banner
前端开发--轮播图banner 使用的是swiper.css.要修改的点: ①img的src,其中width和height也可作出相应改变 ②根据所需轮播的图片数量在class值为swiper-wra ...
Android【轮播图工具类】
可以定义轮播图的圆点样式核心代码 public class FlashView extends RelativeLayout {private static final int RMP = Layo ...
iOS UI篇——轮播图Banner图片动图混合无限轮播
KJBannerView 介绍一下自己之前写的无限轮播图库,无限自动循环滚动,大家有什么需求可以给我留言,持续更新中- Demo地址:KJBannerViewDemo 功能介绍 KJBannerVie ...
android 3d轮播图,3D轮播图
轮播图随着时代的发展各种各样的banner轮播图下面要介绍的是一种3D轮播图与以往轮播图不同的是中间那块banner凸起下面请看效果图与代码 1.效果图 2.HTML 首页 body{bac ...