Fresco(加载图片)

最新推荐文章于 2023-03-21 20:42:55 发布

哥哥_

最新推荐文章于 2023-03-21 20:42:55 发布

阅读量405

点赞数

本文链接：https://blog.csdn.net/QQ_907465912/article/details/78896520

版权

//activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="com.example.lianxi.MainActivity">
    <!--圆角 优先级高-->
    <!--fresco:roundAsCircle="true"-->
    <!--图片四周 100dp也是圆-->
    <!-- fresco:roundedCornerRadius="20dp"-->
    <!--某一角-->
    <!--fresco:roundTopLeft="false"-->
    <!--边颜色-->
    <!--fresco:roundingBorderColor="#f00"-->
    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/sdv"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        fresco:failureImage="@drawable/icon_failure"
        fresco:progressBarAutoRotateInterval="1000"
        fresco:progressBarImage="@drawable/icon_progress_bar"
        fresco:retryImage="@drawable/icon_retry"
        fresco:retryImageScaleType="centerInside"
        fresco:roundedCornerRadius="100dp"
        fresco:roundingBorderColor="#f00"
        fresco:roundingBorderWidth="2dp"
        fresco:viewAspectRatio="1" />

    <!--<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="play"
        android:text="播放gif" />-->

</LinearLayout>

//MianActivity

package com.example.lianxi;

import android.graphics.drawable.Animatable;
import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.drawee.controller.AbstractDraweeController;
import com.facebook.drawee.controller.BaseControllerListener;
import com.facebook.drawee.view.SimpleDraweeView;
import com.facebook.imagepipeline.image.ImageInfo;
import com.facebook.imagepipeline.request.ImageRequest;
import com.facebook.imagepipeline.request.ImageRequestBuilder;

public class MainActivity extends AppCompatActivity {
  /*  public static final String mImageUrl = "http://pic39.nipic.com/20140226/18071023_164300608000_2.jpg";
    public static final String mErrorUrl = "http://pic39.nipic.com/20140226/18071023_1643006080dddd00_2.jpg";
    public static final String mGifUrl = "http://img.zcool.cn/community/0139505792e5fc0000018c1bbb7271.gif";
    public static final String mJpegUrl = "http://attach.foyuan.net/portal/201308/03/09/2013080309223742492.jpg";*/

    String url = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509524759532&di=fc2baac4b4dfe9cec34d461ed33d4e1e&imgtype=0&src=http%3A%2F%2Fimg1a.xgo-img.com.cn%2Fpics%2F1545%2Fa1544726.jpg";
    private SimpleDraweeView sdv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Fresco.initialize(this);
        setContentView(R.layout.activity_main);
        sdv = findViewById(R.id.sdv);

	sdv.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        //圆
        //RoundingParams roundingParams = RoundingParams.asCircle();
        //圆角
        RoundingParams roundingParams = RoundingParams.fromCornersRadius(30);
        GenericDraweeHierarchy build = new GenericDraweeHierarchyBuilder(getResources()).setRoundingParams(roundingParams)
                .build();
        sdv.setHierarchy(build);
        sdv.setImageURI(Uri.parse(url));
   	 }
	});
        //把图片地址换成Uri        Uri uri = Uri.parse(url);        //显示图片        sdv.setImageURI(uri);        BaseControllerListener<ImageInfo> baseControllerListener = new BaseControllerListener<ImageInfo>() {            @Override            public void onFinalImageSet(String id, ImageInfo imageInfo, Animatable animatable) {                //animatable.start();            }            @Override            public void onFailure(String id, Throwable throwable) {                Toast.makeText(MainActivity.this, "加载失败", Toast.LENGTH_SHORT).show();            }        };        ImageRequest imageRequest = ImageRequestBuilder.newBuilderWithSource(uri)                //设置支持jpeg渐进式展示（从模糊到清晰）                .setProgressiveRenderingEnabled(true)                .build();        //DraweeController        AbstractDraweeController controller = Fresco.newDraweeControllerBuilder()                .setImageRequest(imageRequest)                //第二种设置图片地址//                .setUri(uri)                //设置可以重试 （重试4次）//                .setTapToRetryEnabled(true)                //设置自动播放//                .setAutoPlayAnimations(true)                //监听图片加载                .setControllerListener(baseControllerListener)                .setOldController(sdv.getController())                .build();        sdv.setController(controller);    }   /* public void play(View view) {        Animatable animatable = sdv.getController().getAnimatable();        animatable.start();    }*/}

//清单

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

//依赖

compile 'com.facebook.fresco:fresco:0.9.0+'

依赖： compile 'com.facebook.fresco:fresco:0.12.0'

dependencies{ // 支持 GIF 动图，需要添加 compile'com.facebook.fresco:animated-gif:0.12.0' }

//url资源：

publicstatic final String mImageUrl ="http://pic39.nipic.com/20140226/18071023_164300608000_2.jpg";

publicstatic final String mErrorUrl ="http://pic39.nipic.com/20140226/18071023_1643006080dddd00_2.jpg";

publicstatic final String mGifUrl ="http://img.zcool.cn/community/0139505792e5fc0000018c1bbb7271.gif";

1、Fresco是什么

Fresco 是一个强大的图片加载组件。

Fresco 中设计有一个叫做*image pipeline*的模块。它负责从网络，从本地文件系统，本地资源加载图片。为了最大限度节省空间和CPU时间，它含有3级缓存设计（2级内存，1级文件）。

Fresco 中设计有一个叫做*Drawees*模块，方便地显示loading图，当图片不再显示在屏幕上时，及时地释放内存和空间占用。

Fresco 支持Android2.3(API level 9) 及其以上系统。

支持的图片格式：PNG，GIF，WebP, JPEG

2、三大核心部分：

DraweeView

继承于 View,负责图片的显示。

一般情况下，使用 SimpleDraweeView 即可

DraweeHierarchy

DraweeHierarchy用于组织和维护最终绘制和呈现的 Drawable 对象，相当于MVC中的M。

DraweeController

1.1三级缓存

1. Bitmap缓存

Bitmap缓存存储Bitmap对象，这些Bitmap对象可以立刻用来显示或者用于后处理

在5.0以下系统，Bitmap缓存位于ashmem，这样Bitmap对象的创建和释放将不会引发GC，更少的GC会使你的APP运行得更加流畅。

5.0及其以上系统，相比之下，内存管理有了很大改进，所以Bitmap缓存直接位于Java的heap上。

当应用在后台运行时，该内存会被清空。

2. 未解码图片的内存缓存

这个缓存存储的是原始压缩格式的图片。从该缓存取到的图片在使用之前，需要先进行解码。

3. 磁盘缓存

和未解码的内存缓存相似，和磁盘缓存不一样，APP在后台时，内容是不会被清空的。即使关机也不会。用户可以随时用系统的设置菜单中进行清空缓存操作。

2、Drawees 不支持 wrap_content 属性。如果使用也需要宽和高一个是固定值。然后使用属性宽高比

fresco:viewAspectRatio="1.33"

3、常用属性：

<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view" android:layout_width="20dp" android:layout_height="20dp" fresco:fadeDuration="300" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@color/wait_color" fresco:placeholderImageScaleType="fitCenter" fresco:failureImage="@drawable/error" fresco:failureImageScaleType="centerInside" fresco:retryImage="@drawable/retrying" fresco:retryImageScaleType="centerCrop" fresco:progressBarImage="@drawable/progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="1000" fresco:backgroundImage="@color/blue" fresco:overlayImage="@drawable/watermark" fresco:pressedStateOverlayImage="@color/red" fresco:roundAsCircle="false" fresco:roundedCornerRadius="1dp" fresco:roundTopLeft="true" fresco:roundTopRight="false" fresco:roundBottomLeft="false" fresco:roundBottomRight="true" fresco:roundWithOverlayColor="@color/corner_color" fresco:roundingBorderWidth="2dp" fresco:roundingBorderColor="@color/border_color" />

3、使用代码：

GenericDraweeHierarchy hierarchy = newGenericDraweeHierarchyBuilder(getResources()) //设置占位图及它的缩放类型 .setPlaceholderImage(ContextCompat.getDrawable(this,R.mipmap.icon_placeholder), ScalingUtils.ScaleType.FOCUS_CROP) //设置正在加载图及其缩放类型 .setProgressBarImage(ContextCompat.getDrawable(this,R.mipmap.icon_progress_bar), ScalingUtils.ScaleType.FOCUS_CROP) //设置失败图及其缩放类型 .setFailureImage(ContextCompat.getDrawable(this, R.mipmap.icon_failure),ScalingUtils.ScaleType.FOCUS_CROP) //设置重试图，它默认的缩放类型是CENTER_INSIDE .setRetryImage(ContextCompat.getDrawable(this,R.mipmap.icon_retry)) //构建 .build(); //设置GenericDraweeHierarchy sdv.setHierarchy(hierarchy); //开始下载 sdv.setImageURI(imageUrl); //构建Controller DraweeController controller = Fresco.newDraweeControllerBuilder()//设置点击重试是否开启 .setTapToRetryEnabled(true) //构建 .build(); //设置Controller sdv.setController(controller);

功能：设置渐进式

ImageRequest imageRequest =ImageRequestBuilder.newBuilderWithSource(Uri.parse(mJpegUrl))

.setProgressiveRenderingEnabled(true)

.build();

功能：设置圆角或者边框

RoundingParams roundingParams = newRoundingParams();

roundingParams.setBorderColor(ContextCompat.getColor(this,R.color.colorAccent));

roundingParams.setBorderWidth(20);

roundingParams.setCornersRadius(180);

genericDraweeHierarchy.setRoundingParams(roundingParams);

功能：Gif动画

.setAutoPlayAnimations(true) //自动播放

功能：下载进度

ControllerListenercontrollerListener = new BaseControllerListener<ImageInfo>() { @Override public void onFinalImageSet() };

.setControllerListener(imageInfoBaseControllerListener)

注意：1、setHierarchy（） 2、setImageURI （） 3、setController（）

顺序不能乱，不然出不来重试

2、就算我们设置了自动旋转属性，那么进度图也不可能旋转；只有进度图和自动旋转属性都在XML中声明出来，才可以让进度图旋转。

-----------------------------------------------------------------

缩放类型—ScaleType：

推荐使用：focusCrop 类型

类型	描述
center	居中，无缩放。
centerCrop	保持宽高比缩小或放大，使得两边都大于或等于显示边界，且宽或高契合显示边界。居中显示。
focusCrop	同centerCrop, 但居中点不是中点，而是指定的某个点。
centerInside	缩放图片使两边都在显示边界内，居中显示。和 fitCenter 不同，不会对图片进行放大。如果图尺寸大于显示边界，则保持长宽比缩小图片。
fitCenter	保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，且宽或高契合显示边界。居中显示。
fitStart	同上。但不居中，和显示边界左上对齐。
fitEnd	同fitCenter，但不居中，和显示边界右下对齐。
fitXY	不保存宽高比，填充满显示边界。
none	如要使用tile mode显示, 需要设置为none

-----------------------------------------------------------------------------------

XML属性	意义
fadeDuration	淡入淡出动画持续时间(单位：毫秒ms)
actualImageScaleType	实际图像的缩放类型
placeholderImage	占位图
placeholderImageScaleType	占位图的缩放类型
progressBarImage	进度图
progressBarImageScaleType	进度图的缩放类型
progressBarAutoRotateInterval	进度图自动旋转间隔时间(单位：毫秒ms)
failureImage	失败图
failureImageScaleType	失败图的缩放类型
retryImage	重试图
retryImageScaleType	重试图的缩放类型
backgroundImage	背景图
overlayImage	叠加图
pressedStateOverlayImage	按压状态下所显示的叠加图
roundAsCircle	设置为圆形图
roundedCornerRadius	圆角半径
roundTopLeft	左上角是否为圆角
roundTopRight	右上角是否为圆角
roundBottomLeft	左下角是否为圆角
roundBottomRight	右下角是否为圆角
roundingBorderWidth	圆形或者圆角图边框的宽度
roundingBorderColor	圆形或者圆角图边框的颜色
roundWithOverlayColor	圆形或者圆角图底下的叠加颜色(只能设置颜色)
viewAspectRatio	控件纵横比

------------------------------------------

webp介绍：

　　WebP文件格式和JPEG类似，也是通过牺牲图片质量来降低图片文件大小，但能在相同质量的情况下比JPEG文件尺寸小巧许多。目前的Chrome应用商店图片已全部转换为WebP格式。虽说WebP格式有各种优点，但支持甚少是最大的问题；

官方url：

https://www.fresco-cn.org/docs/index.html

url1：http://blog.csdn.net/y1scp/article/details/49245535

url2：http://blog.csdn.net/hongensq/article/details/52623376

//依赖,和注意事项

//一般来说第一个依赖就够用了

compile 'com.facebook.fresco:fresco:0.13.0'

//这个是动态图的  下面有更详细的依赖
compile 'com.facebook.fresco:animated-gif:0.14.1'

[html]view plaincopy
1.Fresco的环境搭建  
（1）在项目的build.grade文件里添加依赖(注意:因为Fresco进行了包的拆分,用到哪个功能就添加对应的依赖,可以减少APP的体积)  
dependencies {  
  //Fresco,无论使用哪个模块的功能,都必须要添加的基础依赖  
  compile 'com.facebook.fresco:fresco:0.14.1'  
  //下面的依赖根据需求,用到哪个模块,就导入对应的依赖即可.  
  // 仅支持 WebP 静态图，需要添加  
  compile 'com.facebook.fresco:webpsupport:0.14.1'  
  // 支持 GIF 动图，需要添加  
  compile 'com.facebook.fresco:animated-gif:0.14.1'  
  // 支持 WebP 静态图及 WebP 动图，需要添加  
  compile 'com.facebook.fresco:animated-webp:0.14.1'  
  compile 'com.facebook.fresco:webpsupport:0.14.1'  
  
  // 在 API < 14 上的机器支持 WebP 时，需要添加  
  compile 'com.facebook.fresco:animated-base-support:0.14.1'  
}    
  
（2）在application中初始化Fresco(记得在清单文件里配置application)  
    Fresco.initialize(this);  
  
（3）配置网络权限   
    <uses-permission android:name="android.permission.INTERNET"/>   
  
（4）在xml布局文件中,加入命名空间  
<!-- 其他元素-->  
<LinearLayout  
    xmlns:fresco="http://schemas.android.com/apk/res-auto">  
  
（5）在xml中引入SimpleDraweeView控件(fresco:placeholderImage="@drawable/my_drawable":默认占位图片)  
<com.facebook.drawee.view.SimpleDraweeView  
    android:id="@+id/my_image_view"  
    android:layout_width="130dp"  
    android:layout_height="130dp"  
    fresco:placeholderImage="@drawable/my_drawable"  
  />  

//Main

[html]view plaincopy
package com.example.fresco;  
  
import android.graphics.drawable.Animatable;  
import android.net.Uri;  
import android.os.Bundle;  
import android.support.v7.app.AppCompatActivity;  
import android.view.View;  
  
import com.facebook.drawee.backends.pipeline.Fresco;  
import com.facebook.drawee.interfaces.DraweeController;  
import com.facebook.drawee.view.SimpleDraweeView;  
  
public class DongtaiActivity extends AppCompatActivity {  
    private SimpleDraweeView san;  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_dongtai);  
        san = (SimpleDraweeView) findViewById(R.id.san);  
        //请求GIF动画,采用MVC的设计模式(注意加载GIF动画还要添加依赖)  
        /* 支持 GIF 动图，需要添加:compile 'com.facebook.fresco:animated-gif:0.14.1' */  
        //GIF动画网址,加载需要一段时间  
        Uri uri = Uri.parse("http://img3.ph.126.net/H3xo6jDQMCmzGmAgITHZfA==/6598274831400286633.gif");  
        DraweeController controller = Fresco.newDraweeControllerBuilder()  
                .setUri(uri)//设置GIF网址  
                .setAutoPlayAnimations(false)//是否自动播放动画,false为不播放  
                .setOldController(san.getController())//内存优化  
                .build();  
        san.setController(controller);  
    }  
  
    //点击开始播放  
    public void start(View view) {  
        // 动画开始  
        //拿到动画对象  
                Animatable animatableStart = san.getController().getAnimatable();  
        //进行非空及是否动画在播放判断  
                if(animatableStart != null && !animatableStart.isRunning()) {  
        //动画停止播放,播放动画  
            animatableStart.start();  
        }  
    }  
    //点击暂停播放  
    public void stop(View view){  
        // 动画停止  
        //拿到动画对象  
                Animatable animatableStop = san.getController().getAnimatable();  
        //进行非空及是否动画在播放判断  
                if (animatableStop != null && animatableStop.isRunning()) {  
        //动画在播放,停止动画播放  
            animatableStop.stop();  
        }  
    }  
}  

//布局

[html]view plaincopy
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:app="http://schemas.android.com/apk/res-auto"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:orientation="vertical"  
    android:layout_height="match_parent"  
    tools:context="com.example.fresco.DongtaiActivity">  
  
    <com.facebook.drawee.view.SimpleDraweeView  
        android:layout_width="match_parent"  
        android:layout_height="200dp"  
        android:id="@+id/san"/>  
  
    <Button  
        android:onClick="start"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="开始"/>  
  
    <Button  
        android:onClick="stop"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="暂停"/>  
  
</LinearLayout> 

//依赖,和注意事项

//一般来说第一个依赖就够用了

compile 'com.facebook.fresco:fresco:0.13.0'

//这个是动态图的  下面有更详细的依赖
compile 'com.facebook.fresco:animated-gif:0.14.1'

[html]view plaincopy 
    
 1.Fresco的环境搭建  
 （1）在项目的build.grade文件里添加依赖(注意:因为Fresco进行了包的拆分,用到哪个功能就添加对应的依赖,可以减少APP的体积)  
 dependencies {  
   //Fresco,无论使用哪个模块的功能,都必须要添加的基础依赖  
   compile 'com.facebook.fresco:fresco:0.14.1'  
   //下面的依赖根据需求,用到哪个模块,就导入对应的依赖即可.  
   // 仅支持 WebP 静态图，需要添加  
   compile 'com.facebook.fresco:webpsupport:0.14.1'  
   // 支持 GIF 动图，需要添加  
   compile 'com.facebook.fresco:animated-gif:0.14.1'  
   // 支持 WebP 静态图及 WebP 动图，需要添加  
   compile 'com.facebook.fresco:animated-webp:0.14.1'  
   compile 'com.facebook.fresco:webpsupport:0.14.1'  
   
   // 在 API < 14 上的机器支持 WebP 时，需要添加  
   compile 'com.facebook.fresco:animated-base-support:0.14.1'  
 }    
   
 （2）在application中初始化Fresco(记得在清单文件里配置application)  
     Fresco.initialize(this);  
   
 （3）配置网络权限   
     <uses-permission android:name="android.permission.INTERNET"/>   
   
 （4）在xml布局文件中,加入命名空间  
 <!-- 其他元素-->  
 <LinearLayout  
     xmlns:fresco="http://schemas.android.com/apk/res-auto">  
   
 （5）在xml中引入SimpleDraweeView控件(fresco:placeholderImage="@drawable/my_drawable":默认占位图片)  
 <com.facebook.drawee.view.SimpleDraweeView  
     android:id="@+id/my_image_view"  
     android:layout_width="130dp"  
     android:layout_height="130dp"  
     fresco:placeholderImage="@drawable/my_drawable"  
   />  

//Main

[html]view plaincopy 
    
 package com.example.fresco;  
   
 import android.graphics.drawable.Animatable;  
 import android.net.Uri;  
 import android.os.Bundle;  
 import android.support.v7.app.AppCompatActivity;  
 import android.view.View;  
   
 import com.facebook.drawee.backends.pipeline.Fresco;  
 import com.facebook.drawee.interfaces.DraweeController;  
 import com.facebook.drawee.view.SimpleDraweeView;  
   
 public class DongtaiActivity extends AppCompatActivity {  
     private SimpleDraweeView san;  
     @Override  
     protected void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         setContentView(R.layout.activity_dongtai);  
         san = (SimpleDraweeView) findViewById(R.id.san);  
         //请求GIF动画,采用MVC的设计模式(注意加载GIF动画还要添加依赖)  
         /* 支持 GIF 动图，需要添加:compile 'com.facebook.fresco:animated-gif:0.14.1' */  
         //GIF动画网址,加载需要一段时间  
         Uri uri = Uri.parse("http://img3.ph.126.net/H3xo6jDQMCmzGmAgITHZfA==/6598274831400286633.gif");  
         DraweeController controller = Fresco.newDraweeControllerBuilder()  
                 .setUri(uri)//设置GIF网址  
                 .setAutoPlayAnimations(false)//是否自动播放动画,false为不播放  
                 .setOldController(san.getController())//内存优化  
                 .build();  
         san.setController(controller);  
     }  
   
     //点击开始播放  
     public void start(View view) {  
         // 动画开始  
         //拿到动画对象  
                 Animatable animatableStart = san.getController().getAnimatable();  
         //进行非空及是否动画在播放判断  
                 if(animatableStart != null && !animatableStart.isRunning()) {  
         //动画停止播放,播放动画  
             animatableStart.start();  
         }  
     }  
     //点击暂停播放  
     public void stop(View view){  
         // 动画停止  
         //拿到动画对象  
                 Animatable animatableStop = san.getController().getAnimatable();  
         //进行非空及是否动画在播放判断  
                 if (animatableStop != null && animatableStop.isRunning()) {  
         //动画在播放,停止动画播放  
             animatableStop.stop();  
         }  
     }  
 }  

//布局

[html]view plaincopy 
    
 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     xmlns:app="http://schemas.android.com/apk/res-auto"  
     xmlns:tools="http://schemas.android.com/tools"  
     android:layout_width="match_parent"  
     android:orientation="vertical"  
     android:layout_height="match_parent"  
     tools:context="com.example.fresco.DongtaiActivity">  
   
     <com.facebook.drawee.view.SimpleDraweeView  
         android:layout_width="match_parent"  
         android:layout_height="200dp"  
         android:id="@+id/san"/>  
   
     <Button  
         android:onClick="start"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:text="开始"/>  
   
     <Button  
         android:onClick="stop"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:text="暂停"/>  
   
 </LinearLayout> 