今天来说的也是一个图片框架,Fresco是Facebook推出的一个用于展示图片的图片库,可以从网络、本地存储等加载我们想要的资源。平时我用过的话都是从网络中获取图片。它相对ImageLoader来说,加载、下载速度来说更具优势,它还支持GIF图的加载显示。今天我就来简单介绍下吧。
首先是它的github地址:
github地址:https://github.com/facebook/fresco
然后我就来简单说下它的用法,首先我们在build.gradle文件中加入以下一句代码:
然后就Ok了。然后我们需要在布局文件中定义它的控件。我们看下代码:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.administrator.day_37_frescotest.MainActivity">
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/draweeView"
android:layout_width="match_parent"
android:layout_height="match_parent"
fresco:placeholderImage="@drawable/placeholder"
fresco:placeholderImageScaleType="fitCenter"
fresco:failureImage="@drawable/failure"
fresco:failureImageScaleType="centerInside"
fresco:retryImage="@drawable/retry"
fresco:retryImageScaleType="centerCrop"
fresco:progressBarImage="@drawable/progressing"
fresco:progressBarImageScaleType="centerInside"
fresco:progressBarAutoRotateInterval="1000"
fresco:backgroundImage="@null"
fresco:overlayImage="@null"
fresco:pressedStateOverlayImage="@color/myColor"
fresco:roundAsCircle="false"
fresco:roundedCornerRadius="10dp"
fresco:roundWithOverlayColor="@null"
fresco:roundingBorderWidth="5dp"
fresco:roundingBorderColor="#f0f"
/>
</RelativeLayout>
是不是一看有点懵逼。。哈哈,怎么能有这么多属性,这里要说明以下。Fresco跟大部分的图片框架有点不同,它的强大真是体现在布局中的属性。这里需要注意的是要加上
xmlns:fresco="http://schemas.android.com/apk/res-auto"
命名空间。
我来介绍下其中平时比较需要用到的一些属性:
fresco:placeholderImage="@drawable/placeholder"
这个我们可以理解为占位图片,就是在图片还没加载的时候控件所要展示的图片
fresco:failureImage="@drawable/failure"
这个属性的话是当图片因为某种原因加载出错时显示的错误图片
fresco:retryImage="@drawable/retry"
这个的话是图片加载失败,提示用户点击重新加载的图片(会覆盖failureImage的图片。
fresco:progressBarImage="@drawable/progressing"
这是我在图片加载前设置了一张圆形进度条。加上以下属性则会发生转动
fresco:progressBarAutoRotateInterval="1000"
fresco:overlayImage="@null"
这个属性的话是设置覆盖图片,这里我是设置为空
fresco:pressedStateOverlayImage="@color/myColor"
这个属性是当点击图片时产生的覆盖,我这里只是简单的加了一层图层。
fresco:roundAsCircle="false"
这个是设置圆角,如果为true的话,图片将会显示为圆形。这个属性则
fresco:roundedCornerRadius="10dp"
会不起作用。
fresco:roundingBorderWidth="5dp"
这个是为图片的设置一个边框的宽度,
fresco:roundingBorderColor="#f0f"
这个是边框的颜色。
好了,布局文件的属性就到这里,我们看下代码怎么使用,
public class MainActivity extends AppCompatActivity {
private String imageUrl = "http://e.hiphotos.baidu.com/image/pic/item/f703738da97739120f92f746fd198618367ae265.jpg";
private SimpleDraweeView draweeView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Fresco.initialize(this);
setContentView(R.layout.activity_main);
draweeView = ((SimpleDraweeView) findViewById(R.id.draweeView));
draweeView.setImageURI(Uri.parse(imageUrl));
draweeView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Hello", Toast.LENGTH_SHORT).show();
}
});
}
}
需要注意的是需要在onCreate方法中加入这句代码来初始化Fresco
Fresco.initialize(this);
然后我们使用
draweeView.setImageURI(Uri.parse(imageUrl));
方法来设置Image的Url,最后显示图片。
上面是一种使用方法,下面我在贴一下另外的一种使用方法:
public class MainActivity extends AppCompatActivity {
private SimpleDraweeView draweeView;
private String imageUrl = "http://e.hiphotos.baidu.com/image/pic/item/f703738da97739120f92f746fd198618367ae265.jpg";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
draweeView = ((SimpleDraweeView) findViewById(R.id.draweeView));
// loadPicOne();
loadPicTwo();
}
private void loadPicTwo() {
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(Uri.parse(imageUrl))
.setAutoRotateEnabled(true)
.setProgressiveRenderingEnabled(true)
.build();
PipelineDraweeController controller = (PipelineDraweeController) Fresco.newDraweeControllerBuilder().setImageRequest(request)
.setOldController(draweeView.getController())
.setControllerListener(new BaseControllerListener<ImageInfo>() {
@Override
public void onFinalImageSet(String id, ImageInfo imageInfo, Animatable animatable) {
super.onFinalImageSet(id, imageInfo, animatable);
Toast.makeText(MainActivity.this, imageInfo.getHeight()+":"+imageInfo.getWidth(), Toast.LENGTH_SHORT).show();
}
})
.build();
draweeView.setController(controller);
}
private void loadPicOne() {
draweeView.setImageURI(Uri.parse(imageUrl));
}
}
这种写法我其实很少用,比第一种多了许多代码 0.0.。。。。
通过
ImageRequestBuilder.newBuilderWithSource(Uri.parse(imageUrl))
设置Url
.setAutoRotateEnabled(true)
设置是否自动旋转。最后调用build()变成一个图片请求。
然后就通过
Fresco.newDraweeControllerBuilder().setImageRequest(request)
设置图片请求
.setOldController(draweeView.getController())
设置旧的控制器,通过draweeView.getController()得到,最后 .build();得到PipelineDraweeController,最后为Fresco设置上控制器
<pre name="code" class="java">draweeView.setController(controller);
就OK了。是不是有点绕。我有点后悔说第二种方法了。。。。。其实它还有setResizeOption()设置图像质量等等方法。只是今晚这个列子没体现到。是不是感觉很简单,除了第二种方法。。哈哈。
然后,我们今晚Fresco的简单用法就到这啦。有哪里写的不好望各位大神指出。
共勉!