Android之Glide加载图片

不过从官方Wiki上来看,设计ModelLoader接口的初衷用来加载不同尺寸的图片的。众所周知,Android设备屏幕分辨率千奇百怪,大到2K,小到320p。如果在低分辨率的手机上加载大图,不仅损耗用户流量,而且很容易造成OOM;在高分辨的手机上,加载小图又会出现模糊的情况,用户体验极差。很多时候,为了省事,很多app都会选择一个中间分辨率,然后自适应大小。当然这样做无可厚非,但是有更好的办法,我们为什么不去尝试呢?

那么如何使用Glide来实现这一具体需求呢?首先你要实现自己的ModelLoader,比较简单的方法是继承BaseGlideUrlLoader

public interface MyDataModel {
    public String buildUrl(int width, int height);
} 
public class MyUrlLoader extends BaseGlideUrlLoader<MyDataModel> {
    @Override
    protected String getUrl(MyDataModel model, int width, int height) {
        // Construct the url for the correct size here.
        return model.buildUrl(width, height);
    }
}

接下来我们可以这样来加载图片:

Glide.with(this)
     .using(new MyUrlLoader(this))
     .load(new MyDataModel() {
          @Override
          public String buidUrl(int width, int height) {
              if (width >= 600) {
                  return url1;
              } else {
                  return url2;
                }
          }
      })
     .into(imageView);

.using(new MyUrlLoader(this)):使用我们自己的ModeLoader;
.load(new MyDataModel()):加载我们自定义的数据源

这里需要解释下getUrl的三个参数:
model:你加载的数据源
width:你加载的图片的宽度(px)
height:你加载的图片的高度(px)

这样,我们在高分率的设备上加载大图的url1,在低分辨率的设备上加载小图url2。从而实现了根据不同手机上的像素值大小加载不同尺寸的图片的需求。

当然如果你不想每次都是用.using(new MyUrlLoader()),就需要实现一个自定义的ModelLoaderFactory并在GlideModule中注册。

public class MyGlideModule implements GlideModule {
    ...
    @Override
    public void registerComponents(Context context, Glide glide) {
        glide.register(MyDataModel.class, InputStream.class, 
            new MyUrlLoader.Factory());
    }
}

同时也要在AndroidManifest.xml声明

<meta-data
    android:name="com.mypackage.MyGlideModule"
    android:value="GlideModule" />

如果你有多个自定义的GlideModule类,那么也要在AndroidManifest.xml中声明多个GlideModule。

对于上面的加载不同尺寸的图片,Google的2014年I/O大会App中有一篇文章专门用来介绍这个的,地址在这里。大概原理是这样子的:

在服务端有下面的几个可以加载的url:

URL 图片大小
myserver.com/images/__w-200-400-600-800-1000__/session1.jpg 原始尺寸
myserver.com/images/w200/session1.jpg 200px 
myserver.com/images/w400/session1.jpg 400px
myserver.com/images/w600/session1.jpg 600px 
myserver.com/images/w800/session1.jpg 800px 
myserver.com/images/w1000/session1.jpg 1000px 

那么客户端如何根据不同的手机分辨率去加载不同的url呢?

Google是这样做的,下面是核心代码:

//定义正则表达式
private static final Pattern PATTERN =
      Pattern.compile("__w-((?:-?\\d+)+)__");

@Override
protected String getUrl(String model, int width, int height) {
    Matcher m = PATTERN.matcher(model);
    int bestBucket = 0;
    if (m.find()) {
        String[] found = m.group(1).split("-");//拿到可以加载的尺寸数组
        for (String bucketStr : found) {
            bestBucket = Integer.parseInt(bucketStr);
            if (bestBucket >= width) {//刚好大于要加载的尺寸,直接跳出循环
                // the best bucket is the first immediately
                // bigger than the requested width
                break;
            }
        }
        if (bestBucket > 0) {//返回合适尺寸的url
            model = m.replaceFirst("w"+bestBucket);
        }
    }
    return model;
}

大概的步骤如下:
1.根据服务端可加载的图片url定义正则表达式
2.根据正则匹配,获取到可以加载的图片尺寸数组
3.根据要加载的Imageview的大小,选择合适的尺寸的url
4.拼接url并返回

上面的例子中有200,400,600,800,1000是可以加载的,如果你要加载的Imageview的大小为600px,当遍历数组到600时,就会直接跳出循环,返回600px大小图片的url,Glide就会加载600px的图片。

最后送上一个小demo:https://github.com/Alluretears/GldieDemo


转载:http://www.jianshu.com/p/31c82862ef19

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值