# Glide overview
Glide, like Picasso, can load and display images from multiple sources while also balancing caching and maintaining a low memory consumption while doing image processing. It has been used on official Google apps (such as the Google Developer Conference 2015 APP) and is as popular as Picasso. In this series, we explore the differences and advantages of Glide and Picasso.
Glide builders require at least three arguments • With(Context Context), which is required for many AndroidAPI calls. • Load(String imageUrl), this imageUrl is the address of the image we want to upload, the web URL. • Into(ImageView ImageView), this is what ImageView we want to load the URL Into.
# configuration Gradle
Dependencies {the compile 'com. Making. Bumptech. Glide: glide: 3.7.0'}Copy the codeA wave Glide can load several types of image resources:
- Load network address resources
Glide.with(this)
.load("http://i.imgur.com/DvpvklR.png")
.fitCenter()
.into(iv_1);
Copy the code- Load the Drawable resource
Glide.with(this)
.load(R.drawable.ic_launcher)
.placeholder(R.mipmap.ic_launcher_round)
.error(R.mipmap.ic_launcher_round)
.into(iv_2);
Copy the code- Load resources from the Uri
Uri uri = Uri.parse("android.resource://" + getPackageName() + "/" + R.drawable.ic_launcher); Tv_title3. setText(" load from Uri "); Glide.with(this) .load(uri) .placeholder(R.drawable.ic_launcher) .error(R.mipmap.ic_launcher_round) .dontAnimate() Into (iv_3);Copy the code- Loads resources from the File File
// This file may not exist on your device. However, you can specify an image path using any file path. File file = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "S61215-011806.jpg"); Tv_title4.settext (" load from file "); Glide.with(this) .load(file) .into(iv_4);Copy the code- You can also load WebP image resources
Of course, this is just scratching the surface, Glide is very powerful. Let’s move on to other properties.
1. Placeholder placeholder This property, which will be displayed in the Imageview before the image resource is loaded
Glide.with(this)
.load("http://i.imgur.com/DvpvklR.png")
.placeholder(R.drawable.ic_launcher)
.into(iv_1);
Copy the codeSee the diagram of loading network address resources directly above
This property will be displayed in the Imageview if the image resource fails to load. Also, error() can only accept an initialized drawable object or the resource that identifies it (R.rawable.).
Glide.with(this)
.load("http://i.imgur.com/DvpvklR.png")
.error(R.mipmap.ic_launcher_round)
.into(iv_1);
Copy the codeSee the diagram of loading network address resources directly aboveWe can see it in theNo networkIn the case of usException placeholder displayTo come out.Instead, load the network image resources
3. Image fade animation property crossFade(). I don’t want to add the dynamic image here, you can look at the picture above
Glide.with(this)
.load("http://i.imgur.com/DvpvklR.png")
.crossFade()
.into(iv_1)
Copy the code- According to the source code, we can see that the crossfade () method can be passed. CrossFade (int duration). If you want to slow (or speed up) the animation, you can always pass a millisecond to this method. The default duration of an animation is 300 milliseconds.
4. DontAnimate () This method displays images directly without fading in and out
Glide.with(this)
.load("http://i.imgur.com/DvpvklR.png")
.dontAnimate()
.into(iv_1)
Copy the code** Image set size Override (horizontalSize, verticalSize) ** Glide has more efficient memory management. Glide automatically limits the image size in cache and memory and gives the ImageView the required size. For Glide, call Override (horizontalSize, verticalSize) if the image does not automatically fit into the ImageView. This will resize the image before it is displayed in ImageView.
Glide.with(this)
.load("http://i.imgur.com/DvpvklR.png")
.override(500, 300)
.into(iv_1)
Copy the codeThis option can also be useful when you don’t have the target view to know the size yet. For example, if the App wants to warm up the cache on the splash screen, it can’t measure the ImageView size yet. However, if you know how big the image is, use Override to provide the exact size.
CenterCrop() is a clipping technique where you scale the image so that it fills in the ImageView boundary and clipping extra parts. The ImageView may fill completely, but the image may not display completely.
Glide.with(this)
.load("http://i.imgur.com/DvpvklR.png")
.override(500, 300)
.centerCrop()
.into(iv_1)
Copy the codeFitCenter () is a cropping technique that scales the image so that the image is measured equal to or less than the ImageView boundary range. The image will display completely, but may not fill the entire ImageView.
Glide.with(this)
.load("http://i.imgur.com/DvpvklR.png")
.override(500, 300)
.fitCenter()
.into(iv_1)
Copy the code8 at the same time can load Gif images here as long as a Gif image link is OK!
Glide.with(this)
.load("http://2f.zol-img.com.cn/product/104_1200x900/305/cevDJaCdeLQ6.gif")
.override(800, 300)
.into(iv_2);
Copy the codeImage links are regular images during development. This property forces the image to be converted to GIF.
Glide.with(this)
.load("http://2f.zol-img.com.cn/product/104_1200x900/305/cevDJaCdeLQ6.gif")
.asGif()
.into(iv_2);
Copy the codeDuring development, some GIFs were too large. AsBitmap () converts the GIF image to a regular image (the first frame of the GIF image is displayed as a regular image)
Glide.with(this)
.load("http://2f.zol-img.com.cn/product/104_1200x900/305/cevDJaCdeLQ6.gif")
.asBitmap()
.into(iv_2);
Copy the code9. Display local videos
String filePath = "/Video/test_video.mp4";
Glide
.with( context )
.load( Uri.fromFile( new File( filePath ) ) )
.into( imageViewGifAsBitmap );
Copy the codeThe point here is that only local videos are supported. Web video urls don’t work.
Download the DEMO address by yourself