步骤:http://www.fresco-cn.org/docs/index.html
1.加入dependence依赖:
compile 'com.facebook.fresco:fresco:0.6.0'
2.加入权限:用于在网络下载图片:
<uses-permission android:name="android.permission.INTERNET" />
3.创建application
public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); Fresco.initialize(this); } }
<application ... android:label="@string/app_name" android:name=".MyApplication" >
4.加入SimpleDraweeView
:
<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view" android:layout_width="130dp" android:layout_height="130dp" fresco:placeholderImage="@drawable/my_drawable" //加载图片之前替代的图片 />
5.开始加载图片:
Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/gh-pages/static/logo.png"); SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view); draweeView.setImageURI(uri);
6.在创建SimpleDraweeView之后我们要使用xutils架包: (用于抓取布局中的控件对象,可用可不用)
compile 'com.jiechic.library:xUtils:2.6.14'
二、使用fresco渐进式地加载显示图片
步骤:
1.首先修改Myapplication中的配置PipeLineConfig
代码:
public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); //这段代码是用于子啊application中使用渐进式图片 ImagePipelineConfig config=ImagePipelineConfig.newBuilder(this) .setProgressiveJpegConfig(new SimpleProgressiveJpegConfig()) .build(); Fresco.initialize(this,config); } }
2.然后在acticity中重新编写代码:之前的加载uri(),可以注释掉
public class HotFragment extends Fragment { private SimpleDraweeView simpleDraweeView; private Uri uri=Uri.parse("http://gb.cri.cn/mmsource/images/2014/08/22/38/10202051462353342906.jpg"); @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_hot,container,false); simpleDraweeView= (SimpleDraweeView) view.findViewById(R.id.my_image_view); // simpleDraweeView.setImageURI(uri); //使用fresco加载图片 initPipeline(); return view; } //使用fresco渐进式加载图片 private void initPipeline() { ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri) .setProgressiveRenderingEnabled(true) .build(); PipelineDraweeController controller = (PipelineDraweeController) Fresco.newDraweeControllerBuilder() .setImageRequest(request) .build(); simpleDraweeView.setController(controller); }
直接执行就可以了,渐进效果比较快
三、多图请求:
什么事多图请求,比如先显示一个缩略图,然后显示加载后的完成的图片
代码:
private Uri lowResUri=Uri.parse("http://img4q.duitang.com/uploads/item/201411/20/20141120132318_3eAuc.thumb.700_0.jpeg"); private Uri highResUri=Uri.parse("http://heilongjiang.sinaimg.cn/2015/0326/U10061P1274DT20150326104659.jpg");
//多图请求,比如首先是显示缩略图,然后显示加载完成的大图 private void intMorePipline(){ DraweeController controller = Fresco.newDraweeControllerBuilder() .setLowResImageRequest(ImageRequest.fromUri(lowResUri)) .setImageRequest(ImageRequest.fromUri(highResUri)) .setOldController(simpleDraweeView.getController()) .build(); simpleDraweeView.setController(controller); }因为网速原因效果还是太快
三、监听下载事件:http://www.fresco-cn.org/docs/listening-download-events.html
在上面的加载单个图片的方法中可以加入监听事件:
//多图请求,比如首先是显示缩略图,然后显示加载完成的大图 private void intMorePipline(){ //所有的图片加载,onFinalImageSet 或者 onFailure 都会被触发。前者在成功时,后者在失败时。 //如果允许呈现渐进式JPEG,同时图片也是渐进式图片,onIntermediateImageSet会在每个扫描被解码后回调。 ControllerListener controllerListener = new BaseControllerListener<ImageInfo>() { @Override public void onFinalImageSet( String id, @Nullable ImageInfo imageInfo, @Nullable Animatable anim) { if (imageInfo == null) { return; } QualityInfo qualityInfo = imageInfo.getQualityInfo(); FLog.d("Final image received! " + "Size %d x %d", "Quality level %d, good enough: %s, full quality: %s", imageInfo.getWidth(), imageInfo.getHeight(), qualityInfo.getQuality(), qualityInfo.isOfGoodEnoughQuality(), qualityInfo.isOfFullQuality()); } @Override public void onIntermediateImageSet(String id, @Nullable ImageInfo imageInfo) { // FLog.d("Intermediate image received"); } @Override public void onFailure(String id, Throwable throwable) { FLog.e(getClass(), throwable, "Error loading %s", id); } }; DraweeController controller = Fresco.newDraweeControllerBuilder() .setLowResImageRequest(ImageRequest.fromUri(lowResUri)) .setImageRequest(ImageRequest.fromUri(highResUri)) .setOldController(simpleDraweeView.getController()) .setControllerListener(controllerListener) .build(); simpleDraweeView.setController(controller); } }