黑马程序员技术交流社区

标题: 【大武汉校区】Android常用图片框架解析 [打印本页]

作者: 曹老师 时间: 2017-8-4 11:02
标题: 【大武汉校区】Android常用图片框架解析
本帖最后由武汉-就业部于 2017-8-4 11:24 编辑

Fresco主页

主页: https://github.com/facebook/fresco

中文文档: http://fresco-cn.org/docs/index.html

添加相关支持

添加依赖：

compile 'com.facebook.fresco:fresco:0.9.0+'

添加权限：

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

使用步骤

1. 在Application初始化或在Activity 的setContentView()方法之前，进行初始化

Fresco.initialize(this);

2. 在布局文件中添加Fresco的图片控件SimpleDraweeView。注意：宽高必须显示指定,否则图片无法显示。

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/sdv"
android:layout_width="200dp"
android:layout_height="200dp"
fresco:placeholderImage="@mipmap/ic_launcher" />

由于需要制定宽高，如果希望图片以特定的宽高比例显示，例如 4:3，可以在XML中指定:

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/sdv"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
fresco:placeholderImage="@mipmap/ic_launcher"
fresco:viewAspectRatio="1.33" />

也可以在代码中指定显示比例：

mSimpleDraweeView.setAspectRatio(1.33f);

3. 在Java代码中指定图片的路径，显示图片。注意：SimpleDraweeView接收的路径参数为URI,所以需要一次转换。

Uri uri = Uri.parse(URL_IMG);
SimpleDraweeView view = (SimpleDraweeView) findViewById(R.id.sdv);
view.setImageURI(uri);

在布局文件中设置更多参数

<com.facebook.drawee.view.SimpleDraweeView

android:id="@+id/my_image_view"

android:layout_width="20dp"

android:layout_height="20dp"

fresco:actualImageScaleType="focusCrop"// 图片的缩放方式.

fresco:backgroundImage="@color/blue" //背景图.不支持缩放.XML仅能指定一张背景图.如果使用Java代码指定的话,可以指定多个背景,显示方式类似FrameLayout,多个背景图按照顺序一级一级层叠上去.

fresco:fadeDuration="300" // 渐显图片的时间

fresco:failureImage="@drawable/error" // 图片加载失败显示的图片

fresco:failureImageScaleType="centerInside" //// 图片加载失败显示的图片的缩放类型

fresco:overlayImage="@drawable/watermark" // 层叠图,最后叠加在图片之上.不支持缩放.XML仅能指定一张.如果使用Java代码指定的话,可以指定多个,显示方式类似FrameLayout,多个图按照顺序一级一级层叠上去.

fresco:placeholderImage="@color/wait_color" // 图片加载成功之前显示的占位图

fresco:placeholderImageScaleType="fitCenter" // 图片加载成功之前显示的占位图的缩放类型

fresco:pressedStateOverlayImage="@color/red" // 设置按压状态下的层叠图.不支持缩放.

fresco:progressBarAutoRotateInterval="1000" // 进度条图片旋转显示时长

fresco:progressBarImage="@drawable/progress_bar" // 进度条图片

fresco:progressBarImageScaleType="centerInside" //进度条图片的缩放类型

fresco:retryImage="@drawable/retrying" // 当图片加载失败的时候,显示该图片提示用户点击重新加载图片

fresco:retryImageScaleType="centerCrop" // 提示图片的缩放类型

fresco:roundAsCircle="false" // 显示圆形图片

fresco:roundBottomLeft="false" // roundedCornerRadius属性设置后,四个角都会有圆角,如果左下角不需要设置为false.

fresco:roundBottomRight="true" // roundedCornerRadius属性设置后,四个角都会有圆角,如果右下角不需要设置为false.

fresco:roundTopLeft="true" // roundedCornerRadius属性设置后,四个角都会有圆角,如果左上角不需要设置为false.

fresco:roundTopRight="false" // roundedCornerRadius属性设置后,四个角都会有圆角,如果右上角不需要设置为false.

fresco:roundWithOverlayColor="@color/corner_color" // 设置图片圆角后空出区域的颜色.如示例图中的红色部分

fresco:roundedCornerRadius="1dp" // 设置图片圆角角度,设置该属性后四个角都会生效

fresco:roundingBorderColor="@color/border_color" // 设置圆角后,边框的颜色.

fresco:roundingBorderWidth="2dp" /> // 设置圆角后,外边框的宽高

在Java代码中配置参数

在Java代码中配置参数需要使用GenericDraweeHierarchy，但是注意：

对于同一个View，不要多次调用setHierarchy，即使这个View是可回收的。创建 DraweeHierarchy 的较为耗时的一个过程。

范例：可以借助DraweeHierarchy设置占位图、加载进度条等（加载进度条默认样式是下方显示一个蓝条来显示图片的加载速度）

GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder
      .newInstance(getResources())
      .setPlaceholderImage(getResources().getDrawable(R.mipmap.ic_launcher)) // 设置占位图
      .setProgressBarImage(new ProgressBarDrawable())  // 设置加载进度条
      .build();

mSimpleDraweeView.setHierarchy(hierarchy);
mSimpleDraweeView.setImageURI(uri);

特殊用法显示渐进式JPEG图片

Fresco 支持渐进式的网络JPEG图。在开始加载之后，图会从模糊到清晰渐渐呈现。

可以设置一个清晰度标准，在未达到这个清晰度之前，会一直显示占位图。

配置参数信息：

// 渐进式JPEG图配置
ProgressiveJpegConfig pjpegConfig = new ProgressiveJpegConfig() {
@Override
// 返回下一个需要解码的扫描次数
public int getNextScanNumberToDecode(int scanNumber) {
      return scanNumber + 2;
}

// 确定多少个扫描次数之后的图片才能开始显示
public QualityInfo getQualityInfo(int scanNumber) {
      boolean isGoodEnough = (scanNumber >= 5);
      return ImmutableQualityInfo.of(scanNumber, isGoodEnough, false);
}
};
// ImagePipelineConfig配置如何加载渐进JPEG图像
ImagePipelineConfig config = ImagePipelineConfig.newBuilder(this)
      .setProgressiveJpegConfig(pjpegConfig)
      .build();

// 初始化Fresco（假如不需配置特殊参数，直接调用Fresco.initialize(this);即可）
Fresco.initialize(this, config);

显式地指定允许渐进式JPEG图片加载，加载图片：

//  显式地指定允许渐进式JPEG图片加载
ImageRequest request = ImageRequestBuilder
      .newBuilderWithSource(uri)
      .setProgressiveRenderingEnabled(true)
      .build();
// 构建显示图片所用到的DraweeController
DraweeController controller = Fresco.newDraweeControllerBuilder()
      .setImageRequest(request)
      .setOldController(mSimpleDraweeView.getController())
      .build();

mSimpleDraweeView.setController(controller);

显示GIF图片

Fresco 支持 GIF 和 WebP 格式的动画图片。如果你希望图片下载完之后自动播放，同时，当View从屏幕移除时，停止播放，只需要在 image request 中简单设置：

DraweeController controller = Fresco.newDraweeControllerBuilder()
      .setUri(URL_GIF)
      .setAutoPlayAnimations(true)
      .build();
mSimpleDraweeView.setController(controller);

Picasso优点

Picasso不仅实现了图片异步加载功能，还解决了android中加载图片时需要解决的一些常见问题：

l 使用ListView，GridView的时候，自动检测Adapter的重用，取消下载，使用缓存

l 使用复杂的图片压缩转换来尽可能的减少内存消耗

l 自带内存和硬盘二级缓存功能

添加相关的支持

添加依赖：

compile 'com.squareup.picasso:picasso:2.5.2'

添加权限：

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

主页

Picasso是Square公司出品的一个强大的图片下载和缓存图片库。

官方下载网址：

http://square.github.io/picasso/

使用步骤

Picasso的使用方式非常简单，直接在代码中指定要下载的图片的URL和要显示图片的ImageView即可。

使用范例：（不需要其他的加载配置的话，只需标红的几行代码即可展示图片）

Picasso       .with(this)// 指定Context
      .load(URL_IMG) //指定图片URL       .placeholder(R.mipmap.ic_launcher) //指定图片未加载成功前显示的图片
      .error(R.mipmap.ic_launcher)// 指定图片加载失败显示的图片
      .resize(300, 300)// 指定图片的尺寸
      .fit()// 指定图片缩放类型为fit
      .centerCrop()// 指定图片缩放类型为centerCrop
      .centerInside()// 指定图片缩放类型为centerInside
      .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)// 指定内存缓存策略
      .priority(Picasso.Priority.HIGH)// 指定优先级
   .into(mIv); // 指定显示图片的ImageView

特殊用法支持加载资源文件的图片

除了加载网络图片picasso还支持加载Resources, assets, files, content providers中的资源文件：

// 加载资源文件的图片
Picasso.with(this)
.load(R.mipmap.ic_launcher)
.into(mIv);

支持加载sdcard中的图片文件

// 加载SD卡中的图片资源
Picasso.with(this)
.load(new File(...))
.into(mIv);

图形变换

Picasso支持图形变换，可以通过实现Transformation接口来写自己的变换类。

自定义Picasso圆形图片变换类：

/** *  Picasso圆形图片变换类 */class CircleTransformation implements com.squareup.picasso.Transformation {
@Override
public Bitmap transform(Bitmap source) {
      int size = Math.min(source.getWidth(), source.getHeight());
      int x = (source.getWidth() - size) / 2;
      int y = (source.getHeight() - size) / 2;
      Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
      if (squaredBitmap != source) {
         source.recycle();
      }
      Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());
      Canvas canvas = new Canvas(bitmap);
      Paint paint = new Paint();
      BitmapShader shader = new BitmapShader(squaredBitmap,
            BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
      paint.setShader(shader);
      paint.setAntiAlias(true);
      float r = size / 2f;
      canvas.drawCircle(r, r, r, paint);
      squaredBitmap.recycle();
      return bitmap;
}

@Override
public String key() {
      return "circle";
}
}

自定义圆角图片变换类：

/** * Picasso圆角图片变换类 */class RoundedTransformation implements com.squareup.picasso.Transformation {

/**    * 圆角角度    */private final int radius;

/**    * 边距    */private final int margin;

// radius is corner radii in dp
// margin is the board in dp
public RoundedTransformation(final int radius, final int margin) {
      this.radius = radius;
      this.margin = margin;
}

@Override
public Bitmap transform(final Bitmap source) {
      final Paint paint = new Paint();
      paint.setAntiAlias(true);
      paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));

      Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
      Canvas canvas = new Canvas(output);
      canvas.drawRoundRect(new RectF(margin, margin, source.getWidth() - margin, source.getHeight() - margin), radius, radius, paint);

      if (source != output) {
         source.recycle();
      }
      return output;
}

@Override
public String key() {
      return "rounded(radius=" + radius + ", margin=" + margin + ")";
}
}

如何使用：

Picasso
      .with(this)// 指定Context
      .load(URL_IMG) //指定图片URL
      .transform(new RoundedTransformation(90,2)) // 指定图片转换器
      .into(mIv); // 指定显示图片的ImageView

Glide主页

Glide是Google公司仿照Picasso做出来的一个图片加载框架，因此API用起来与Picasso非常相像，但是Glide可以直接加载GIF图片。

主页

https://github.com/bumptech/glide

中文文档

http://mrfu.me/2016/02/27/Glide_Getting_Started/

添加相关支持

添加依赖：

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

添加权限：

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

使用步骤

Glide的使用方法和Picasso差不多，使用方式都非常简单，直接在代码中指定要下载的图片的URL和要显示图片的ImageView即可。

使用范例：（不需要其他的加载配置的话，只需标红的几行代码即可展示图片）

Glide       .with(this) // 指定Context       .load(URL_GIF)// 指定图片的URL       .placeholder(R.mipmap.ic_launcher)// 指定图片未成功加载前显示的图片
      .error(R.mipmap.ic_launcher)// 指定图片加载失败显示的图片
      .override(300, 300)//指定图片的尺寸
      .fitCenter()//指定图片缩放类型为fitCenter
      .centerCrop()// 指定图片缩放类型为centerCrop
      .skipMemoryCache(true)// 跳过内存缓存
      .diskCacheStrategy(DiskCacheStrategy.NONE)//跳过磁盘缓存
      .diskCacheStrategy(DiskCacheStrategy.SOURCE)//仅仅只缓存原来的全分辨率的图像
      .diskCacheStrategy(DiskCacheStrategy.RESULT)//仅仅缓存最终的图像
      .diskCacheStrategy(DiskCacheStrategy.ALL)//缓存所有版本的图像
      .priority(Priority.HIGH)//指定优先级.Glide 将会用他们作为一个准则，并尽可能的处理这些请求，但是它不能保证所有的图片都会按照所要求的顺序加载。优先级排序:IMMEDIATE > HIGH > NORMAL >　LOW
   .into(mIv);//指定显示图片的ImageView

特殊用法图形变换

Glide支持图形变换，可以通过实现BitmapTransformation 接口来写自己的变换类。

自定义Glide圆形图片变换类：

/** * Glide圆形图片变换类 */class GlideCircleTransform extends BitmapTransformation {
public GlideCircleTransform(Context context) {
      super(context);
}

@Override
protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
      return circleCrop(pool, toTransform);
}

private Bitmap circleCrop(BitmapPool pool, Bitmap source) {
      if (source == null) return null;

      int size = Math.min(source.getWidth(), source.getHeight());
      int x = (source.getWidth() - size) / 2;
      int y = (source.getHeight() - size) / 2;

      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 = new Canvas(result);
      Paint paint = new Paint();
      paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
      paint.setAntiAlias(true);
      float r = size / 2f;
      canvas.drawCircle(r, r, r, paint);
      return result;
}

@Override
public String getId() {
      return getClass().getName();
}
}

自定义圆角图片变换类：

/** *  Glide圆角图片变换类 */class GlideRoundTransform extends BitmapTransformation {

private  float radius = 0f;

public GlideRoundTransform(Context context) {
      this(context, 4);
}

public GlideRoundTransform(Context context, int dp) {
      super(context);
      this.radius = Resources.getSystem().getDisplayMetrics().density * dp;
}

@Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
      return roundCrop(pool, toTransform);
}

private  Bitmap roundCrop(BitmapPool pool, Bitmap source) {
      if (source == null) return null;

      Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
      if (result == null) {
         result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
      }

      Canvas canvas = new Canvas(result);
      Paint paint = new Paint();
      paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
      paint.setAntiAlias(true);
      RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());
      canvas.drawRoundRect(rectF, radius, radius, paint);
      return result;
}

@Override public String getId() {
      return getClass().getName() + Math.round(radius);
}
}

如何使用：

// 显示圆形图片
Glide.with(this)
.load(URL_IMG)
.transform(new GlideCircleTransform(this)) .into(mIv);

更改Glide默认配置

创建一个GlideModule的实现类,并在其中更改自己需要的设置：

/** * Glide默认配置修改类 */public class SimpleGlideModule implements GlideModule {
@Override
public void applyOptions(Context context, GlideBuilder builder) {
// 更改Bitmap图片压缩质量为8888,默认为565
builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
}

@Override
public void registerComponents(Context context, Glide glide) {

}
}

在清单文件中添加一个meta-data节点，name值为刚刚创建的GlideModule实现类的完整包名+类名，value值为GlideModule：

配置完成后，Glide加载图片的时候将会按照新的设置进行加载。

图像库对比

l 快速加载图片推荐Glide（默认图形加载质量为RGB_565）

l 对图片质量要求较高推荐Picasso（默认图形加载质量为ARGB_8888）

l 如果应用加载的图片很多,推荐Fresco > Glide > Picasso（Fresco采用了内存双缓存+Native缓存构成的三级缓存）

作者: 武汉分校-小舞 时间: 2017-8-4 11:32
666666666

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2