如何搭建一个WEB服务器项目（四）—— 实现安卓端图片加载
使用Glide安卓图片加载库
观前提示：本系列文章有关服务器以及后端程序这些概念，我写的全是自己的理解，并不一定正确，希望不要误人子弟。欢迎各位大佬来评论区提出问题或者是指出错误，分享宝贵经验。先谢谢了(￣▽￣)"！
今天来介绍一下怎么利用Glide库加载服务器上边的图片文件，并且配合Banner库使用实现轮播图效果：
首先在我们的服务器项目里边先存好我们所需要的图片，如下：
然后在springmvc.xml这个配置文件里新增如下配置（看过本系列第一篇的朋友应该知道在何处更改）：
这样子我们才能正常的访问到这些图片（方便起见我把用到的三个图片也贴出来）：
hot1.jpg：
hot2.jpg：
hot3.jpg：
接下来就是安卓端的事情了，大家可以从下面链接里先简单了解下Glide和Banner这两个库：
Glide3.7.0：
https://github.com/bumptech/glide
Banner1.4.10：
https://github.com/youth5201314/banner/tree/release-1.4.10
首先向项目里添加如下两个依赖：
- implementation 'com.github.bumptech.glide:glide:3.7.0'
- implementation 'com.youth.banner:banner:1.4.10'
然后就是代码的具体实现了：
先创建一个简单的XML布局，里面只包含com.youth.banner.Banner这一个控件，代码如下：
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 xmlns:app="http://schemas.android.com/apk/res-auto" 5 android:orientation="vertical" 6 android:layout_width="match_parent" 7 android:layout_height="match_parent"> 8 9 <com.youth.banner.Banner 10 android:id="@+id/banner1" 11 android:layout_width="match_parent" 12 android:layout_height="130dp" 13 app:indicator_height="5dp" 14 app:indicator_width="5dp" 15 app:is_auto_play="true" /> 16 17 </LinearLayout>
设置glide的占位图的做法如下：
1 RequestOptions options = new RequestOptions() 2 .placeholder(R.drawable.img_default)//图片加载出来前，显示的图片 3 .fallback( R.drawable.img_blank) //url为空的时候,显示的图片 4 .error(drawable.img_load_failure);//图片加载失败后，显示的图片 5 6 Glide.with(this) 7 .load(URL) //图片地址 8 .apply(options) 9 .into(ImagView);
这里只展示设置加载失败时的占位图，代码如下：
1 package com.example.dolphin; 2 3 import androidx.appcompat.app.AppCompatActivity; 4 import androidx.recyclerview.widget.GridLayoutManager; 5 6 import android.content.Context; 7 import android.os.Bundle; 8 import android.widget.ImageView; 9 10 import com.bumptech.glide.Glide; 11 import com.example.dolphin.home.HomeFragmentAdapter; 12 import com.example.dolphin.utils.Constants; 13 import com.youth.banner.Banner; 14 import com.youth.banner.BannerConfig; 15 import com.youth.banner.Transformer; 16 import com.youth.banner.loader.ImageLoader; 17 18 import java.util.ArrayList; 19 import java.util.List; 20 21 import butterknife.BindView; 22 23 public class BannerActivity extends AppCompatActivity { 24 25 @Override 26 protected void onCreate(Bundle savedInstanceState) { 27 super.onCreate(savedInstanceState); 28 setContentView(R.layout.activity_banner); 29 Banner banner = (Banner)findViewById(R.id.banner1); 30 List<String> urls = new ArrayList<>(); 31 urls.add(Constants.HOT_URL + "hot1.jpg"); 32 urls.add(Constants.HOT_URL + "hot2.jpg"); 33 urls.add(Constants.HOT_URL + "hot3.jpg"); 34 //设置内置样式，共有六种可以点入方法内逐一体验使用。 35 banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR); 36 //设置图片加载器，图片加载器在下方 37 banner.setImageLoader(new MyLoader()); 38 //设置图片网址或地址的集合 39 banner.setImages(urls); 40 //设置轮播的动画效果，内含多种特效，可点入方法内查找后内逐一体验 41 banner.setBannerAnimation(Transformer.Default); 42 //设置轮播间隔时间 43 banner.setDelayTime(2000); 44 //设置是否为自动轮播，默认是“是”。 45 banner.isAutoPlay(true); 46 //设置指示器的位置，小点点，左中右。 47 banner.setIndicatorGravity(BannerConfig.CENTER) 48 //必须最后调用的方法，启动轮播图。 49 .start(); 50 } 51 //使用glide作为图片加载器 52 private class MyLoader extends ImageLoader { 53 @Override 54 public void displayImage(Context context, Object path, ImageView imageView) { 55 //对于很多 Android API 调用，Context 是必须的 56 Glide.with(context) 57 //一个字符串的形式表示一个网络图片的 URL 58 .load((String) path) 59 //加载失败时的占位图 60 .error(R.mipmap.ic_launcher) 61 //图片会显示到对应的 ImageView中 62 .into(imageView); 63 } 64 } 65 }
加载成功（左）和失败（右）效果：
—————————————我———是———分———割———线————————————
劳动节更新！
要不要考虑支持一波勤（tou）恳（lan）码字的博主呢（(*≧︶≦))(￣▽￣* )ゞ）？
方案设计答辩还算顺利，结果也比较让我满意（对得起我辛苦写了好久的设计说明书😭），总之这件事告一段落，接下来就是一个功能接一个功能的编码、测试、再编码、再测试……埋头苦肝吧，头不秃怎么能变强呢？顺带一提这个系列快要完结了，下一期打算讲讲怎么把服务器端的Action改造成更便于客户端调用的接口。最终项目做好以后会再出一期总结之类的吧，到时候会把源码上传到GitHub，供有需要的人参考（不吐槽我做的烂就好😥，好评就不敢奢求了😂），那么我们下期再见👉。
