Glide进阶详解(三)

我们甚至没有必要去解释和讨论:空 ImageView 在任何 UI 上都是不好看的。如果你用 Glide,你很可能是通过网络连接加载图像。根据你用户的环境,这可能需要花费很多的时间。一个预期的行为是一个APP 去显示一个占位符直到这张图片加载处理完成。

Glide 的流式接口让这个变得非常容易的去做到!只需要调用 .placeHolder() 用一个 drawable(resource) 引用,Glide 将会显示它作为一个占位符,直到你的实际图片准备好。

Glide
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .placeholder(R.mipmap.ic_launcher) // can also be a drawable
    .into(imageViewPlaceholder);

做为一个显而易见的原因,你不能设置一个网络 url 作为占位符,因为这也会被去请求加载的。App 资源和 drawable 能保证可用和可访问的。然而,作为 load() 方法的参数,Glide 接受所有值。这可能不是可加载的(没有网络连接,服务器宕机…),删除了或者不能访问。在下一节中,我们将讨论一个错误的占位符。

错误占位符:.error()

假设我们的 App 尝试从一个网站去加载一张图片。Glide 给我们一个选项去获取一个错误的回调并采取合适的行动。我们会在后面来讨论,对现在来说,可能太复杂了。在大多数情况下使用占位符,来指明图片不能被加载已经足够了。

调用 Glide 的流式接口和之前显示预加载占位符的例子是相同的,不同的是调用了名为 error() 的函数。

Glide
    .with(context)
    .load("http://futurestud.io/non_existing_image.png")
    .placeholder(R.mipmap.ic_launcher) // can also be a drawable
    .error(R.mipmap.future_studio_launcher) // will be displayed if the image cannot be loaded
    .into(imageViewError);

就这样。如果你定义的 load() 值的图片不能被加载出来,Glide 会显示 R.mipmap.future_studio_launcher 作为替换。再说一次,error()接受的参数只能是已经初始化的 drawable 对象或者指明它的资源(R.drawable.<drawable-keyword>)。

使用 crossFade()

无论你是在加载图片之前是否显示一个占位符,改变 ImageView 的图片在你的 UI 中有非常显著的变化。一个简单的选项是让它改变是更加平滑和养眼的,就是使用一个淡入淡出动画。Glide 使用标准的淡入淡出动画,这是(对于当前版本3.6.1)默认激活的。如果你想要如强制 Glide 显示一个淡入淡出动画,你必须调用另外一个建造者:

Glide
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .placeholder(R.mipmap.ic_launcher) // can also be a drawable
    .error(R.mipmap.future_studio_launcher) // will be displayed if the image cannot be loaded
    .crossFade()
    .into(imageViewFade);

crossFade() 方法还有另外重载方法 .crossFade(int duration)。如果你想要去减慢(或加快)动画,随时可以传一个毫秒的时间给这个方法。动画默认的持续时间是 300毫秒。

使用 dontAnimate()

如果你想直接显示图片而没有任何淡入淡出效果,在 Glide 的建造者中调用 .dontAnimate() 。

Glide
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .placeholder(R.mipmap.ic_launcher) // can also be a drawable
    .error(R.mipmap.future_studio_launcher) // will be displayed if the image cannot be loaded
    .dontAnimate()
    .into(imageViewFade);

这是直接显示你的图片,而不是淡入显示到 ImageView。请确保你有更好的理由来做这件事情。

需要知道的是所有这些参数都是独立的,而不需要彼此依赖的。比如,你可以设定 .error() 而不调用 .placeholder()。你可能设置 crossFade() 动画而没有占位符。任何参数的组合都是可能的。

用 resize(x,y) 调整图片大小

通常情况下,如果你的服务器或者 API 提供的图像是你需要的精确尺寸,这时是完美的情况下,在内存小号和图像质量之间的权衡。

在和 Picasso 比较后,Glide 有更加高效的内存管理。Glide 自动限制了图片的尺寸在缓存和内存中,并给到 ImageView 需要的尺寸。Picasso 也有这样的能力,但需要调用 fit() 方法。对于 Glide,如果图片不会自动适配到 ImageView,调用 override(horizontalSize, verticalSize) 。这将在图片显示到 ImageView之前重新改变图片大小。

Glide
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .override(600, 200) // resizes the image to these dimensions (in pixel). does not respect aspect ratio
    .into(imageViewResize);

当你还没有目标 view 去知道尺寸的时候,这个选项也可能是有用的。比如,如果 App 想要在闪屏界面预热缓存,它还不能测量 ImageView 的尺寸。然而,如果你知道这个图片多少大,用 override 去提供明确的尺寸。

缩放图像

现在,对于任何图像操作,调整大小真的能让长宽比失真并且丑化图像显示。在你大多数的使用场景中,你想要避免发生这种情况。Glide 提供了一般变化去处理图像显示。提供了两个标准选项:centerCrop 和 fitCenter

CenterCrop

CenterCrop()是一个裁剪技术,即缩放图像让它填充到 ImageView 界限内并且裁剪额外的部分。ImageView 可能会完全填充,但图像可能不会完整显示。

Glide
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .override(600, 200) // resizes the image to these dimensions (in pixel)
    .centerCrop() // this cropping technique scales the image so that it fills the requested bounds and then crops the extra.
    .into(imageViewResizeCenterCrop);

FitCenter

fitCenter() 是裁剪技术,即缩放图像让图像都测量出来等于或小于 ImageView 的边界范围。该图像将会完全显示,但可能不会填满整个 ImageView

Glide
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .override(600, 200)
    .fitCenter() 
    .into(imageViewResizeFitCenter);

我们会在以后的博客去做自定义的转换,以及 centerCrop() 和 fitCenter() 。

显示 Gif

有很多图片加载库来去加载和显示图片。能支持 Gif 有一些特别也是非常有帮助的,如果在你的 App 需要的话。Glide 实现 Gif 是如此的特别和令人惊讶,因为它是如此的简单。如果你想显示一个 Gif,你可以只使用和过去相同的调用方式就可以了:

String gifUrl = "http://i.kinja-img.com/gawker-media/image/upload/s--B7tUiM5l--/gf2r69yorbdesguga10i.gif";
Glide  
    .with( context )
    .load( gifUrl )
    .into( imageViewGif );

就这样!这将在 ImageView 中显示 Gif 并自动开始播放它。另外一个关于 Glide 的伟大的事情是你仍然可以使用你的标准去调用处理这个 Gif:

Glide  
    .with( context )
    .load( gifUrl )
    .placeholder( R.drawable.cupcake )
    .error( R.drawable.full_cake )
    .into( imageViewGif );

Gif 检查

上面的代码有一个潜在的问题是,如果提供的来源不是一个 Gif,可能只是一个常规图片,这就没有办法显示这个问题。Glide 接受 Gif 或者图片作为 load() 参数。如果你期望这个 URL 是一个 Gif,Glide 不会自动检查是否是 Gif。因此他们引入了一个额外的防区强制 Glide变成一个 Gif asGif():

Glide  
    .with( context )
    .load( gifUrl )
    .asGif()
    .error( R.drawable.full_cake )
    .into( imageViewGif );

如果 gifUrl 是一个 git,这没什么变化。然而,不像之前那样,如果这个 gifUrl 不是一个 Gif,Glide 将会把这个 load 当成失败处理。这样做的的好处是,.error() 回调被调用并且错误占位符被显示,即使 gifUrl 是一个完美的图片(但不是一个 Gif)。

Gif 转为 Bitmap

如果你的 App 显示一个位置的网络 URL 列表,它可能遇到常规的图片或者 Gif。在某些情况下,你可能对不想系那是整个 Gif。如果你仅仅想要显示 Gif 的第一帧,你可以调用 asBitmap() 去保证其作为一个常规的图片显示,即使这个 URL 是一个 Gif。

Glide  
    .with( context )
    .load( gifUrl )
    .asBitmap()
    .into( imageViewGifAsBitmap );

这让你用 Glide 显示所有已知的 url 显示为图片的形式。这很简单,试一试!

显示本地视频

现在来谈谈视频。Glide 还能显示视频!只要他们是存储在手机上的。让我们假设你通过让用户选择一个视频后得到了一个文件路径:

String filePath = "/storage/emulated/0/Pictures/example_video.mp4";
Glide  
    .with( context )
    .load( Uri.fromFile( new File( filePath ) ) )
    .into( imageViewGifAsBitmap );

这里需要注意的是,这仅仅对于本地视频起作用。如果没有存储在该设备上的视频(如一个网络 URL 的视频),它是不工作的!如果你想显示视频从网络 URL,去看看 VideoView


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值