A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 武汉-就业部 于 2017-8-4 11:24 编辑


Fresco主页

添加相关支持
添加依赖:
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 使用ListViewGridView的时候,自动检测Adapter的重用,取消下载,使用缓存
l 使用复杂的图片压缩转换来尽可能的减少内存消耗
l 自带内存和硬盘二级缓存功能

添加相关的支持
添加依赖:
compile 'com.squareup.picasso:picasso:2.5.2'

添加权限:
<uses-permission android:name="android.permission.INTERNET"/>
主页
PicassoSquare公司出品的一个强大的图片下载和缓存图片库。
官方下载网址

使用步骤
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主页
GlideGoogle公司仿照Picasso做出来的一个图片加载框架,因此API用起来与Picasso非常相像,但是Glide可以直接加载GIF图片。

主页
中文文档

添加相关支持
添加依赖:
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
<meta-data
    android:name="com.example.glidedemo.SimpleGlideModule"
    android:value="GlideModule" />

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

图像库对比
l 快速加载图片推荐Glide(默认图形加载质量为RGB_565)
l 对图片质量要求较高推荐Picasso(默认图形加载质量为ARGB_8888
l 如果应用加载的图片很多,推荐Fresco > Glide > Picasso(Fresco采用了内存双缓存+Native缓存构成的三级缓存)


1 个回复

倒序浏览
666666666
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马