ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

如何搭建一个WEB服务器项目(四)—— 实现安卓端图片加载

2020-05-01 14:51:40  阅读:416  来源: 互联网

标签:WEB Glide com 安卓端 import 图片 banner 加载


使用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)码字的博主呢((*≧︶≦))( ̄▽ ̄* )ゞ)?

  方案设计答辩还算顺利,结果也比较让我满意(对得起我辛苦写了好久的设计说明书

标签:WEB,Glide,com,安卓端,import,图片,banner,加载
来源: https://www.cnblogs.com/xiao-qi-w/p/12810111.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有