Fresco的简单介绍及简单使用

今天来说的也是一个图片框架，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的简单用法就到这啦。有哪里写的不好望各位大神指出。

共勉！