Grid图片加载

Glide是一款图片加载框架，可以在Android平台上以简单的方式加载和展示图片。

?

1

2

3

dependencies {

  compile'com.github.bumptech.glide:glide:3.7.0'

}

在清单文件中加入权限

1

<uses-permissionandroid:name="android.permission.INTERNET"/>

调用Glide.with()方法用于创建一个图片的实例。with方法可以接受Context、Activity和Fragment类型的参数。如果调用不在Activity中或者Fragment中，可以传入ApplicationContext。

Glide支持加载各种图片资源，包括网络图片、本地图片、应用资源、Uri对象等

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

// 加载本地图片

File file = newFile(getExternalCacheDir() + "/demo.jpg");

Glide.with(this).load(file).into(imageView);

 

// 加载应用资源

Glide.with(this).load(R.drawable.image).into(imageView);

 

// 加载二进制流

byte[] image = getImageBytes();

Glide.with(this).load(image).into(imageView);

 

// 加载Uri对象

Uri imageUri = getImageUri();

Glide.with(this).load(imageUri).into(imageView)

占位图

?

1

2

3

4

Glide.with(MainActivity.this)

   .load(url)

   .placeholder(R.mipmap.placeholder)

   .into(mImage);

异常占位图

?

1

2

3

4

5

6

7

8

//错误的图片地址

String url1 = "http://sc.net/uploads/allimg/150709/14-150FZ94211O4.jpg";

 

Glide.with(MainActivity.this)

    .load(url1)

    .placeholder(R.mipmap.placeholder)//加载占位图

    .error(R.mipmap.error)//异常占位图

    .into(mImage);

指定图片格式

Glide支持加载GIF图片的，而Picasso是不支持加载GIF图片的。

只允许加载静态图：asBitmap

?

1

2

3

4

5

6

7

8

String url2 = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3396140532,1228025744&fm=23&gp=0.jpg";

 

Glide.with(MainActivity.this)

   .load(url2)

   .asBitmap()//只允许加载静态图

   .placeholder(R.mipmap.placeholder)//加载占位图

   .error(R.mipmap.error)//异常占位图

   .into(mImage);

只允许加载动态图：.asGif()

?

1

2

3

4

5

6

7

8

String url2 = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3396140532,1228025744&fm=23&gp=0.jpg";

 

 Glide.with(MainActivity.this)

    .load(url2)

    .asGif()//只允许加载动态图

    .placeholder(R.mipmap.placeholder)//加载占位图

    .error(R.mipmap.error)//异常占位图

    .into(mImage);

指定图片大小

使用Glide，我们就不用担心图片内存浪费，甚至是内存溢出的问题。
因为Glide从来都不会直接将图片的完整尺寸全部加载到内存中，而是用多少加载多少。Glide会自动判断ImageView的大小，然后只将这么大的图片像素加载到内存当中。

当然我们也可以指定图片的固定大小

当指定图片大小的时候，要把ImageView的宽高该为包裹内容

?

1

2

3

4

5

6

7

Glide.with(MainActivity.this)

   .load(url)

   .asBitmap()//只允许加载动态图

   .placeholder(R.mipmap.placeholder)//加载占位图

   .error(R.mipmap.error)//异常占位图

   .override(400, 300)

   .into(mImage);

3.添加图片淡入加载的效果

.crossFade()

4.用 animate() 自定义动画

从资源中的动画：

回到代码，第一个选项是传一个 Android 资源 id，即动画的资源。一个简单的例子是每个 Android 系统都提供的：slide-in-left(从左滑入)动画， android.R.anim.slide_in_left 。下面这段代码是这个动画的 XML 描述：

?

1

2

3

4

5

6

7

<?xmlversion="1.0"encoding="utf-8"?>

<setxmlns:android="http://schemas.android.com/apk/res/android">

  <translateandroid:fromXDelta="-50%p"android:toXDelta="0"

      android:duration="@android:integer/config_mediumAnimTime"/>

  <alphaandroid:fromAlpha="0.0"android:toAlpha="1.0"

      android:duration="@android:integer/config_mediumAnimTime"/>

</set>

当然你可以创建你自己的 XML 动画。比如一个小的缩放动画，图片刚开始小的，然后逐渐增大到原尺寸。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

<?xmlversion="1.0"encoding="utf-8"?>

<setxmlns:android="http://schemas.android.com/apk/res/android"

   android:fillAfter="true">

 

  <scale

    android:duration="@android:integer/config_longAnimTime"

    android:fromXScale="0.1"

    android:fromYScale="0.1"

    android:pivotX="50%"

    android:pivotY="50%"

    android:toXScale="1"

    android:toYScale="1"/>

</set>

这两个动画都可以用到 Glide 建造者中：

?

1

2

3

4

5

Glide

  .with( context )

  .load( eatFoodyImages[0] )

  .animate( android.R.anim.slide_in_left ) // or R.anim.zoom_in

  .into( imageView1 );

在图片从网络加载完并准备好之后将从左边滑入。

通过自定义类实现动画

这个很简单，你只需实现 void animate(View view) 方法。这个视图对象是整个 target 视图。如果它是一个自定义的视图，你要找到你的视图的子元素，并且做些必要的动画。

来看个简单的例子。假设你想要实现一个渐现动画，你得需要创建这样的动画对象：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

ViewPropertyAnimation.Animator animationObject = newViewPropertyAnimation.Animator() {

  @Override

  publicvoid animate(View view) {

    // if it's a custom view class, cast it here

    // then find subviews and do the animations

    // here, we just use the entire view for the fade animation

    view.setAlpha( 0f );

 

    ObjectAnimator fadeAnim = ObjectAnimator.ofFloat( view, "alpha", 0f, 1f );

    fadeAnim.setDuration(2500);

    fadeAnim.start();

  }

};

接下来，你需要在 Glide 请求中去设置这个动画：

?

1

2

3

4

5

Glide

  .with( context )

  .load( eatFoodyImages[1] )

  .animate( animationObject )

  .into( imageView2 );

当然，在 animate(View view) 中你的动画对象方法中， 你可以做任何你想要对视图做的事情。自由的用你的动画创建吧。

如果你要在你的自定义视图中实现，你只需要创建这个视图对象，然后在你的自定义视图中创建你的自定义方法。

5.添加加载完成监听

?

1

2

3

4

5

6

7

8

9

10

11

12

Glide.with(ShowImgActivity.this)

   .load(urlString)

   .centerCrop()

   .error(R.drawable.failed)

   .crossFade()

   .into(newGlideDrawableImageViewTarget(imageView) {

 @Override

   publicvoid onResourceReady(GlideDrawable drawable, GlideAnimation anim) {

   super.onResourceReady(drawable, anim);

   //在这里添加一些图片加载完成的操作

  }

)}；

6.图片缓存机制

Glide缓存策略

Glide默认开启磁盘缓存和内存缓存，当然也可以对单张图片进行设置特定的缓存策略。 
设置图片不加入到内存缓存

?

1

2

3

4

5

Glide

  .with( context )

  .load( eatFoodyImages[0] )

  .skipMemoryCache(true)

  .into( imageViewInternet );

设置图片不加入到磁盘缓存

?

1

2

3

4

5

Glide

  .with( context )

  .load( eatFoodyImages[0] )

  .diskCacheStrategy( DiskCacheStrategy.NONE )

  .into( imageViewInternet );

Glide支持多种磁盘缓存策略：

DiskCacheStrategy.NONE :不缓存图片 
DiskCacheStrategy.SOURCE :缓存图片源文件 
DiskCacheStrategy.RESULT:缓存修改过的图片 
DiskCacheStrategy.ALL:缓存所有的图片，默认

图片加载优先级

Glide支持为图片加载设置优先级，优先级高的先加载，优先级低的后加载：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

privatevoid loadImageWithHighPriority() {

  Glide

    .with( context )

    .load( UsageExampleListViewAdapter.eatFoodyImages[0] )

    .priority( Priority.HIGH )

    .into( imageViewHero );

}

 

privatevoid loadImagesWithLowPriority() {

  Glide

    .with( context )

    .load( UsageExampleListViewAdapter.eatFoodyImages[1] )

    .priority( Priority.LOW )

    .into( imageViewLowPrioLeft );

 

  Glide

    .with( context )

    .load( UsageExampleListViewAdapter.eatFoodyImages[2] )

    .priority( Priority.LOW )

    .into( imageViewLowPrioRight );

}

7.加载圆角图片

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

/**

 * 圆形图

 *

 * Created by <lzh> on 2016/7/29.

 */

publicclass GlideCircleTransform extendsBitmapTransformation {

  publicGlideCircleTransform(Context context) {

    super(context);

  }

 

  @Override

  protectedBitmap transform(BitmapPool pool, Bitmap toTransform, intoutWidth, intoutHeight) {

    returncircleCrop(pool, toTransform);

  }

 

  privatestatic Bitmap circleCrop(BitmapPool pool, Bitmap source) {

    if(source == null)returnnull;

    intsize = Math.min(source.getWidth(), source.getHeight());

    intx = (source.getWidth() - size) / 2;

    inty = (source.getHeight() - size) / 2;

    // TODO this could be acquired from the pool too

    Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);

    Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);

    if(result == null) {

      result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);

    }

    Canvas canvas = newCanvas(result);

    Paint paint = newPaint();

    paint.setShader(newBitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));

    paint.setAntiAlias(true);

    floatr = size / 2f;

    canvas.drawCircle(r, r, r, paint);

    returnresult;

  }

 

  @Override

  publicString getId() {

    returngetClass().getName();

  }

}

**然后使用的时候只要加上这句话就行了 
.transform(new GlideCircleTransform(context))**

?

1

2

3

4

Glide.with(mContext)

        .load(imageUrl)

        .transform(newGlideCircleTransform(mContext))

        .into(holder.imageView);

注意事项：

不能直接给要使用glide的imageview设置tag；

因为glide在加载图片的时候用到了tag，会造成冲突，并报错；

当要用到tag写逻辑代码的时候，可以这样

.setTag(R.string.xxx,xxx);并.getTag(R.string.xxx);

?