原生iOS解决方案
JDImageToolkit
概述
图片模块是基于Facebook公司开发的Fresco开源图片的框架,并进行了个性化修改,性能和特性与Fresco框架一致。使用JDImageUtils,JDImageUtils对Fresco部分功能进行封装,目的是方便开发人员运用。
支持的特性
- 加载显示图片。
- 图片显示动画。
- 图片缓存以及缓存地址。
- 图片下载监听。
- 圆角图片。
- 占位图。
快速接入
在项目的 build.gradle 文件中配置仓库地址
buildscript {
repositories {
...
maven { url 'http://artifactory.jd.com/libs-releases-local/' }
maven { url "http://artifactory.jd.com/libs-snapshots-local/" }
...
}
添加依赖
for maven:
<dependency>
<groupId>com.jingdong.wireless.jdsdk</groupId>
<artifactId>android-sdk-jdimagetoolkit</artifactId>
<version>xx.xx.xx</version>
</dependency>
for gradle:
compile 'com.jingdong.wireless.jdsdk:android-sdk-jdimagetoolkit:xx.xx.xx'
目前最新版本为 1.10.9
开始使用
主要文件
类名 | 方法描述 |
---|---|
JdImageToolKit | 图片初始化类 |
JDImageConfigFactory | 京东主站,图片依赖设置工厂 |
JDImageUtils | 图片操作类 |
JDDisplayImageOptions | 图片属性类 |
JDImageLoadingListener | 图片回调接口 |
具体API文档,详见:API手册
基本用法
在Application.java的onCreate()方法中初始化JdImageToolkit图片组件
如果只是简单使用,按照如下方式初始化即可:
JdImageToolKit.initialize(JdImageToolKit.newBuilder(this).build());
京东主站则通过一个图片依赖设置工厂JDImageConfigFactory实现了对图片框架的定制化设置,初始化操作也更为复杂:
JdImageToolKit.initialize(JdImageToolKit.newBuilder(getApplication().getApplicationContext())
.setReportHandlerImpl(JDImageConfigFactory.getExceptionReportHandlerImpl())
.setPageInfoParameterImpl(JDImageConfigFactory.getPageInfoParameterImpl())
.setNetworkParameterImpl(JDImageConfigFactory.getNetworkParameterImpl())
.setDnsParameterImpl(JDImageConfigFactory.getDnsParameterImpl())
.setImageParameterImpl(JDImageConfigFactory.getImageParameterImpl())
.build());
在布局文件中添加图片显示控件SimpleDraweeView
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/simple_draweeview_simple"
android:layout_centerInParent="true"
android:layout_width="250dp"
android:layout_height="250dp" />
下载并显示图片
方式一:最基础的图片显示方式
JDImageUtils.displayImage(String uri, ImageView imageView);
方式二:在方式一的基础上增加了自定义的图片加载参数
JDImageUtils.displayImage(String uri, ImageView imageView, JDDisplayImageOptions options);
方式三:在方式二的基础上增加了needDefaultImage参数,指定是否需要显示默认的京东占位图,默认为true
JDImageUtils.displayImage(String uri, ImageView imageView, JDDisplayImageOptions options, boolean needDefaultImage);
方式三:在方式二的基础上增加了图片的加载监听回调接口
JDImageUtils.displayImage(String uri, ImageView imageView, JDDisplayImageOptions options, JDImageLoadingListener listener);
支持的URI格式:
类型 | SCHEME | 示例 |
---|---|---|
网络图片 | http://, https:// | https://frescolib.org/static/logo.png |
本地文件 | file:// | "file://"+Environment.getExternalStorageDirectory() + "/a.png" |
assets目录下的资源 | asset://包名(实际可以是任何字符串甚至留空)/ | "asset:///logo.png" |
res目录下的资源 | res://包名(实际可以是任何字符串甚至留空)/ | "res:///" + R.drawable.ic_launcher |
图片显示效果设置
渐入渐出过渡动画
基本设置与上面相同,只需要在显示图片时添加JDDisplayImageOptions
这一对象,并设置JDFadeInBitmapDisplayer即可。
示例:
JDDisplayImageOptions options = new JDDisplayImageOptions();
JDFadeInBitmapDisplayer displayer = new JDFadeInBitmapDisplayer(10000);
options.displayer(displayer);
JDImageUtils.displayImage(imageUri,draweeView,options);
四周圆角效果
JDRoundedBitmapDisplayer和JDRoundedVignetteBitmapDisplayer这两个类用来设置图片显示时的圆角效果,使用方式如下:
options = new JDDisplayImageOptions();
JDRoundedBitmapDisplayer roundedBitmapDisplayer = new JDRoundedBitmapDisplayer(50);
options.displayer(roundedBitmapDisplayer);
JDImageUtils.displayImage(imageUri,draweeView,options);
如果需要单独设置每一个圆角的大小,则使用如下的构造函数:
new JDRoundedBitmapDisplayer(float topLeft, //左上角
float topRight, //右上角
float bottomRight, //右下角
float bottomLeft); //左下角
注意:1. 设置显示圆形图片、圆角图片时,若为SimpleDraweeView设置具体宽高跟图片宽高比例不同,会导致图片失真
2. 在使用圆角JDRoundedBitmapDisplayer时,SimpleDraweeView的宽高为warp_content且图片本身足够大时(手机屏占满),无论是父view还是draweeView最好都不要使用padding和margin,因为使用这两个配置,会导致圆角失效
3. 有关圆角效果设置的更多使用说明,详见:https://cf.jd.com/pages/viewpage.action?pageId=216390968
图片缓存以及缓存地址
修改下JDDisplayImageOptions的属性即可 , 默认情况如下。示例:
JDDisplayImageOptions options = new JDDisplayImageOptions();
options.cacheInMemory(true);//不设置,默认也是true,这里只是特殊提醒,此参数可以设置内存缓存
options.cacheOnDisk(true);//不设置,默认也是true,这里只是特殊提醒,此参数可以设置磁盘缓存
JDImageUtils.displayImage(imageUri,draweeView,options);
File file = JDImageUtils.getImageDiskCacheFile(imageUri);//根据imageURI获取对应图片的缓存地址
注意:File file = JDImageUtils.getImageDiskCacheFile(imageUri);必须在displayImage()或loadImage()方法后调用
另外要是不想使用图片缓存,可以使用如下方式删除缓存
JDImageUtils.clearDiskCacheAll();
JDImageUtils.clearMemoryCacheAll();
JDImageUtils.clearDiskCacheByUri(urls);
JDImageUtils.clearMemoryCacheByUri(urls);
占位图
占位图可分为加载失败时、加载中、空URI时显示的图片,另外下载大图片时网速不太好,也可以先显示缩略图
options.showImageOnLoading(R.mipmap.icon_loading); //加载中的占位图
options.showImageOnFail(R.mipmap.icon_load_error); //加载失败时的占位图
options.showImageForEmptyUri(R.mipmap.icon_default); //空URL时的占位图
options.isUseThumbnail(true); //显示缩略图
注意:有关占位图相关的使用说明,详见:http://cf.jd.com/pages/viewpage.action?pageId=99717935
图片下载监听
图片下载监听使用到JDImageLoadingListener这个接口。使用方法如下:
JDImageUtils.displayImage(imageUri,draweeView,options, new JDImageLoadingListener() {
@Override
public void onLoadingStarted(String s, View view) {
textView.setVisibility(View.VISIBLE);
imageLoadingStr += "1---开始下载图片\n";
textView.setText(imageLoadingStr);
}
@Override
public void onLoadingFailed(String s, View view, JDFailReason jdFailReason) {
imageLoadingStr += "2---图片下载失败\n";
textView.setText(imageLoadingStr);
}
@Override
public void onLoadingComplete(String s, View view, Bitmap bitmap) {
imageLoadingStr += "3---图片下载完成\n";
textView.setText(imageLoadingStr);
}
@Override
public void onLoadingCancelled(String s, View view) {
imageLoadingStr += "4---图片下载取消\n";
textView.setText(imageLoadingStr);
}
});
}
使用注意事项
- 如果要使用图片框架加载图片,请使用 DraweeView 或它的子类,而不是普通的 View 或 ImageView。
- 有关 Fresco 使用过程中需要躲避的陷阱
- 请谨慎使用 JDImageUtils.loadImage 方法,因为它提供给你的 bitmap 会在回调结束后随时被回收。
- 图片闪烁问题