fresco_fresco使用 - CSDN
精华内容
参与话题
  • Fresco使用

    2018-11-06 17:42:40
    Fresco使用 1.简介 图片加载组件,可以加载网页上,手机存储,本地资源的图片,有二级缓存机制。在安卓4.x版本及以下,采用的是将图片存到手机一块特殊的内存区域,从而提高速度。 开源地址 ...

    Fresco使用

    1.简介

    图片加载组件,可以加载网页上,手机存储,本地资源的图片,有二级缓存机制。在安卓4.x版本及以下,采用的是将图片存到手机一块特殊的内存区域,从而提高速度。

    开源地址 https://github.com/facebook/fresco

    2.基本使用

    ####(1)引进依赖

    // 一般依赖:
    compile ‘com.facebook.fresco:fresco:0.14.1’

    可选依赖

    // 如果需要支持gif,再添加:
    compile ‘com.facebook.fresco:animated-gif:0.12.0’

    如果想引进最新版本的依赖,可以如下图操作:

    I.进入源码页面,点击Branch Master,出来的页面点击tag,就像这个图片一样,最上面的就是最新版本了;

    II.或者去README.md文件,给出的一般是最新的版本;

    III.再或者直接在版本号后面加一个+,直接下载最新版本,这样

    implementation ‘com.facebook.fresco:fresco:1.10.0+’,但一般不用,因为某些最新版本的库可能和原有版本使用不一样,然后别人用的时候直接下最新版本的库就会出错。

    [![1541473103553.png](https://i.loli.net/2018/11/06/5be1036f447a9.png)](https://i.loli.net/2018/11/06/5be1036f447a9.png)
    

    (2)初始化

    建议在App启动就初始化,所以建议写在Application#onCreate()中,`Application在整个程序的周期内,Activity只是一个页面的周期

    public class MyApplication extends Application {
        @Override
        public void onCreate() {
            super.onCreate();
            Fresco.initialize(this);
        }
    }
    

    可选高级初始化

    配置网络层为OkHttp,以及配置存储路径为SD卡 https://blog.csdn.net/yw59792649/article/details/78921025

    (3)创建布局

    用 SimpleDraweeView来实现传统的ImageView的效果,SimpleDraweeView是ImageView的子类,不过我们要注意Fresco不支持wrap_content,而是要用match_parent或者手动指定宽高,如果想使用wrap_content需要配合viewAspectRatio属性来使用。

    <com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width=“match_parent”
    android:layout_height=“wrap_content”
    fresco:placeholderImage="@drawable/my_drawable"
    fresco:placeholderImageScaleType=“fitXY”
    fresco:viewAspectRatio=“1”
    />

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/simpleDraweeView"
        android:layout_width="100dp"
        android:layout_height="100dp" />
    

    ####(4)主代码配置

    //创建将要下载的图片的URI
    Uri imageUri=Uri.parse("http://b335.photo.store.qq.com/psb?/V10eyEEK3Xf6rE
    /dn1GxGnLYID1lNQQVtkoFau0M20YE5Kagr5ueenkttQ!/b/dA2GscdMHwAA&bo=gAJVAwAAAAAFAPc!&rf=viewer_4");
    //创建SimpleDraweeView对象
    SimpleDraweeView simpleDraweeView = (SimpleDraweeView) findViewById(R.id.simpleDraweeView);
    //开始下载
    simpleDraweeView.setImageURI(imageUri);
    
    //创建DraweeController
            DraweeController controller = Fresco.newDraweeControllerBuilder()
                    .setUri(imageUri)//重试之后要加载的图片URI地址
                    .setTapToRetryEnabled(true)//设置点击重试是否开启
                    .setOldController(simpleDraweeView.getController())//设置旧的Controller
                    .build();//构建
            //设置DraweeController
            simpleDraweeView.setController(controller);
    

    DraweeController就是设置一些图片加载过程中的一些操作。这样一个简单的Fresco显示图片就成功了

    3.其他技能

    变圆形再设置边框

    在布局文件里的控件上方设置部分引进这个,也可以在用到的时候直接Alt+Enter键

    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    

    可以设置这个属性

    fresco:roundAsCircle="true"//是否切割为圆形
    fresco:roundingBorderWidth="2dp"//边框宽度
    fresco:roundingBorderColor="@color/colorAccent"//边框填充颜色
    

    其他效果都可以用一些设置属性方式进行改变,参考

    https://blog.csdn.net/xuyueqing1225/article/details/79842292

    4.主流图片加载框架对比

    Picasso,Glide,Fresco 对比分析

    Picasso性能要低于另外两个,不支持Gif

    Glide 操作简单,轻巧

    Fresco 比较大,使用复杂,性能强大,对内存OOM处理比较好

    根据业务需求在Glide和Fresco中选择,大项目选Fresco,参见:

    https://juejin.im/entry/5928e9212f301e0057d6bb93

    展开全文
  • Fresco使用详解

    千次阅读 2016-09-22 14:14:33
    Fresco简单的使用—SimpleDraweeView 百学须先立志—学前须知:在我们平时加载图片(不管是下载还是加载本地图片…..)的时候,我们经常会遇到这样一个需求,那就是当图片正在加载时应该呈现正在加载时的图像,当图片...

    Fresco简单的使用—SimpleDraweeView

    • 百学须先立志—学前须知:

      在我们平时加载图片(不管是下载还是加载本地图片…..)的时候,我们经常会遇到这样一个需求,那就是当图片正在加载时应该呈现正在加载时的图像,当图片加载失败时应该呈现图片加载时的图像,当我们重新加载这张图片时,应该呈现重试时图像,直到这张图片加载完成。这些繁琐并且重复的如果得不到简化的话,那将是一个开发人员的噩梦,现在好了,我们用 Facebook 出品的一个强大的图片加载组件 Fresco 几行代码就可以搞定以上问题了。

    • 尽信书,不如无书—能学到什么?

      1、SimpleDraweeView最基本的使用
      2、SimpleDraweeView的圆形图
      3、SimpleDraweeView的圆角图
      4、SimpleDraweeView的缩放类型

    • 工欲善其事必先利其器—下载Fresco并导入到项目

      Fresco中文说明:http://www.fresco-cn.org/

      Fresco项目GitHub地址:https://github.com/facebook/fresco

      第一步进入 Fresco项目GitHub地址

      第一步

      第二步添加Fresco到项目工程:

      使用说明

      第三步服务及权限:

      <!-- 访问网络的权限 -->
      <uses-permission android:name="android.permission.INTERNET"/>
      • 1
      • 2
      save_snippets_01.png

      服务及权限

    • 常见问题:

      初次使用,我们就先简单书写我们的 activity_main.xml

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
          <com.facebook.drawee.view.SimpleDraweeView
              android:id="@+id/main_adv"
              android:layout_width="300dp"
              android:layout_height="300dp"
              android:layout_centerInParent="true"
              ></com.facebook.drawee.view.SimpleDraweeView>
      
      </RelativeLayout>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      save_snippets.png

      代码分析:

      初次加载

      MainActivity 实现代码:

      public class MainActivity extends AppCompatActivity {
      
          @Override
          protected void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);
          }
      }
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      save_snippets.png

      简单的书写完布局和实现代码之后我们来运行一下。

              java.lang.RuntimeException: Unable to start activity ComponentInfo{scp.com.frescodemo/scp.com.frescodemo.MainActivity}: 
      
      android.view.InflateException: Binary XML file line #5: Error inflating class com.facebook.drawee.view.SimpleDraweeView
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2264)
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2313)
                      at android.app.ActivityThread.access$1100(ActivityThread.java:141)
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1238)
                      at android.os.Handler.dispatchMessage(Handler.java:102)
                      at android.os.Looper.loop(Looper.java:136)
                      at android.app.ActivityThread.main(ActivityThread.java:5336)
                      at java.lang.reflect.Method.invokeNative(Native Method)
                      at java.lang.reflect.Method.invoke(Method.java:515)
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:871)
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:687)
                      at dalvik.system.NativeStart.main(Native Method)
               Caused by: android.view.InflateException: Binary XML file line #5: Error inflating class com.facebook.drawee.view.SimpleDraweeView
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      save_snippets.png

      报错

      运行报错了!怎么回事呢?这里啊,是因为我们没有在应用调用 setContentView() 之前进行初始化Fresco造成的;解决办法:

      修改我们的 MainActivity 里代码:

      public class MainActivity extends AppCompatActivity {
      
          @Override
          protected void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              Fresco.initialize(this);
              setContentView(R.layout.activity_main);
          }
      }
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      save_snippets.png

      解决办法

      再运行就没有错误发生了。

    • 占位图—placeholderImage:

      在此之前我们需要一张占位图 icon_placeholder.png 大家右键另存为即可:

      icon_placeholder

      修改我们的 activity_main.xml

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:fresco="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
          <com.facebook.drawee.view.SimpleDraweeView
              android:id="@+id/main_adv"
              android:layout_width="100dp"
              android:layout_height="100dp"
              android:layout_centerInParent="true"
              fresco:placeholderImage="@mipmap/icon_placeholder"
              fresco:placeholderImageScaleType="fitCenter"
              ></com.facebook.drawee.view.SimpleDraweeView>
      
      </RelativeLayout>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      save_snippets.png

      代码说明:

      占位符

      MainActivity 无需修改,运行一下:

      占位符

    • 正在加载图—progressBarImage:

      在此之前我们需要一张正在加载图 icon_progress_bar.png 大家右键另存为即可:

      正在加载图

      修改我们刚刚书写的 activity_main.xml

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:fresco="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
          <com.facebook.drawee.view.SimpleDraweeView
              android:id="@+id/main_sdv"
              android:layout_width="100dp"
              android:layout_height="100dp"
              android:layout_centerInParent="true"
              fresco:actualImageScaleType="focusCrop"
              fresco:placeholderImage="@mipmap/icon_placeholder"
              fresco:placeholderImageScaleType="fitCenter"
              fresco:progressBarImage="@mipmap/icon_progress_bar"
              fresco:progressBarImageScaleType="centerInside"
              fresco:progressBarAutoRotateInterval="5000"
              ></com.facebook.drawee.view.SimpleDraweeView>
      
      </RelativeLayout>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      save_snippets.png

      代码说明:

      正在加载图

      更改我们的 MainActivity 里代码:

      public class MainActivity extends AppCompatActivity {
      
          private SimpleDraweeView simpleDraweeView;
      
          @Override
          protected void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              Fresco.initialize(this);
              setContentView(R.layout.activity_main);
              initView();
          }
      
          private void initView() {
              //创建SimpleDraweeView对象
              simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv);
              //创建将要下载的图片的URI
              Uri imageUri = Uri.parse("https://img-my.csdn.net/uploads/avatar/4/E/8/1_y1scp.jpg");
              //开始下载
              simpleDraweeView.setImageURI(imageUri);
          }
      }
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      save_snippets.png

      代码分析:

      正在加载图

      运行效果图:

      正在加载图

      正在加载图本身是不可以转的,但是呢,加上了 fresco:progressBarAutoRotateInterval="5000" 属性,那么它就可以旋转了;可以看到,正在加载图一闪而过,这是因为我们加载的图片很小,网络也很好。

    • 失败图—failureImage:

      在此之前我们需要一张正在加载图 icon_failure.png 大家右键另存为即可:

      icon_failure

      修改我们刚刚书写的 activity_main.xml

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:fresco="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
          <com.facebook.drawee.view.SimpleDraweeView
              android:id="@+id/main_sdv"
              android:layout_width="100dp"
              android:layout_height="100dp"
              android:layout_centerInParent="true"
              fresco:actualImageScaleType="focusCrop"
              fresco:placeholderImage="@mipmap/icon_placeholder"
              fresco:placeholderImageScaleType="fitCenter"
              fresco:progressBarImage="@mipmap/icon_progress_bar"
              fresco:progressBarImageScaleType="centerInside"
              fresco:progressBarAutoRotateInterval="5000"
              fresco:failureImage="@mipmap/icon_failure"
              fresco:failureImageScaleType="centerInside"
              ></com.facebook.drawee.view.SimpleDraweeView>
      
      </RelativeLayout>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      save_snippets.png

      代码分析:

      失败图代码分析

      修改我们的 MainActivity 里代码:

      public class MainActivity extends AppCompatActivity {
      
          private SimpleDraweeView simpleDraweeView;
      
          @Override
          protected void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              Fresco.initialize(this);
              setContentView(R.layout.activity_main);
              initView();
          }
      
          private void initView() {
              //创建SimpleDraweeView对象
              simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv);
              //创建将要下载的图片的URI
              Uri imageUri = Uri.parse("https://img-my.csdn.net/uploads/avatar_y1scp.jpg");
              //开始下载
              simpleDraweeView.setImageURI(imageUri);
          }
      }
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      save_snippets.png

      代码说明:

      错误的网络图片地址

      运行效果:

      failure

    • 重试图—retryImage:

      在此之前我们需要一张正在加载图 icon_retry.png 大家右键另存为即可:

      icon_retry

      修改我们刚刚书写的 activity_main.xml

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:fresco="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
          <com.facebook.drawee.view.SimpleDraweeView
              android:id="@+id/main_sdv"
              android:layout_width="100dp"
              android:layout_height="100dp"
              android:layout_centerInParent="true"
              fresco:actualImageScaleType="focusCrop"
              fresco:placeholderImage="@mipmap/icon_placeholder"
              fresco:placeholderImageScaleType="fitCenter"
              fresco:progressBarImage="@mipmap/icon_progress_bar"
              fresco:progressBarImageScaleType="centerInside"
              fresco:progressBarAutoRotateInterval="5000"
              fresco:failureImage="@mipmap/icon_failure"
              fresco:failureImageScaleType="centerInside"
              fresco:retryImage="@mipmap/icon_retry"
              fresco:retryImageScaleType="centerCrop"
              ></com.facebook.drawee.view.SimpleDraweeView>
      
      </RelativeLayout>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      save_snippets.png

      代码分析:

      重试图

      修改我们的 MainActivity 里代码:

      public class MainActivity extends AppCompatActivity {
      
          private SimpleDraweeView simpleDraweeView;
      
          @Override
          protected void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              Fresco.initialize(this);
              setContentView(R.layout.activity_main);
              initView();
          }
      
          private void initView() {
              //创建SimpleDraweeView对象
              simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv);
              //创建将要下载的图片的URI
              Uri imageUri = Uri.parse("https://img-my.csdn.net/uploads/avatar_y1scp.jpg");
              //开始下载
              simpleDraweeView.setImageURI(imageUri);
      
              //创建DraweeController
              DraweeController controller = Fresco.newDraweeControllerBuilder()
                      //加载的图片URI地址
                      .setUri(imageUri)
                      //设置点击重试是否开启
                      .setTapToRetryEnabled(true)
                      //设置旧的Controller
                      .setOldController(simpleDraweeView.getController())
                      //构建
                      .build();
      
              //设置DraweeController
              simpleDraweeView.setController(controller);
          }
      }
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      save_snippets.png

      代码说明:

      重试图片

      运行效果:

      重试图效果

      注意:

      重复加载4次还是没有加载出来的时候才会显示 failureImage(失败图) 的图片

    • 淡入淡出动画—fadeDuration:

      修改我们刚刚书写的 activity_main.xml

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:fresco="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
          <com.facebook.drawee.view.SimpleDraweeView
              android:id="@+id/main_sdv"
              android:layout_width="100dp"
              android:layout_height="100dp"
              android:layout_centerInParent="true"
              fresco:actualImageScaleType="focusCrop"
              fresco:placeholderImage="@mipmap/icon_placeholder"
              fresco:placeholderImageScaleType="fitCenter"
              fresco:progressBarImage="@mipmap/icon_progress_bar"
              fresco:progressBarImageScaleType="centerInside"
              fresco:progressBarAutoRotateInterval="5000"
              fresco:failureImage="@mipmap/icon_failure"
              fresco:failureImageScaleType="centerInside"
              fresco:retryImage="@mipmap/icon_retry"
              fresco:retryImageScaleType="centerCrop"
              fresco:fadeDuration="5000"
              ></com.facebook.drawee.view.SimpleDraweeView>
      
      </RelativeLayout>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      save_snippets.png

      代码说明:

      淡入淡出动画

      MainActivity 中的代码无需修改。

      运行效果:

      重试+进度图+失败图 进度图+正确图
      淡入淡出动画 正确图
    • 背景图—backgroundImage:

      这里呢,我们的背景图采用的是一个系统所提供的颜色中的一种。

      修改我们刚刚书写的 activity_main.xml

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:fresco="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
          <com.facebook.drawee.view.SimpleDraweeView
              android:id="@+id/main_sdv"
              android:layout_width="100dp"
              android:layout_height="100dp"
              android:layout_centerInParent="true"
              fresco:actualImageScaleType="focusCrop"
              fresco:fadeDuration="5000"
              fresco:backgroundImage="@android:color/holo_orange_light"
              ></com.facebook.drawee.view.SimpleDraweeView>
      
      </RelativeLayout>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      save_snippets.png

      代码说明:

      背景图

      MainActivity 中的代码无需修改,运行效果:

      背景效果

    • 叠加图—overlayImage:

      这里呢,我们的背景图采用的是一个系统所提供的颜色中的一种。

      修改我们刚刚书写的 activity_main.xml

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:fresco="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
          <com.facebook.drawee.view.SimpleDraweeView
              android:id="@+id/main_sdv"
              android:layout_width="100dp"
              android:layout_height="100dp"
              android:layout_centerInParent="true"
              fresco:actualImageScaleType="focusCrop"
              fresco:placeholderImage="@mipmap/icon_placeholder"
              fresco:placeholderImageScaleType="fitCenter"
              fresco:progressBarImage="@mipmap/icon_progress_bar"
              fresco:progressBarImageScaleType="centerInside"
              fresco:progressBarAutoRotateInterval="5000"
              fresco:failureImage="@mipmap/icon_failure"
              fresco:failureImageScaleType="centerInside"
              fresco:retryImage="@mipmap/icon_retry"
              fresco:retryImageScaleType="centerCrop"
              fresco:fadeDuration="5000"
              fresco:backgroundImage="@android:color/holo_orange_light"
              fresco:pressedStateOverlayImage="@android:color/holo_green_dark"
              fresco:overlayImage="@android:color/black"
              ></com.facebook.drawee.view.SimpleDraweeView>
      
      </RelativeLayout>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      save_snippets.png

      代码说明:

      叠加图

      MainActivity 中的代码无需修改。

      运行效果:

      叠加图

      从运行效果来看,叠加图在最上面,覆盖了下面的图。

    • 圆形图—roundAsCircle:

      一行代码搞定圆形图:设置roundAsCircle为true;

      修改我们刚刚书写的 activity_main.xml

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:fresco="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
          <com.facebook.drawee.view.SimpleDraweeView
              android:id="@+id/main_sdv"
              android:layout_width="100dp"
              android:layout_height="100dp"
              android:layout_centerInParent="true"
              fresco:actualImageScaleType="focusCrop"
              fresco:placeholderImage="@mipmap/icon_placeholder"
              fresco:placeholderImageScaleType="fitCenter"
              fresco:progressBarImage="@mipmap/icon_progress_bar"
              fresco:progressBarImageScaleType="centerInside"
              fresco:progressBarAutoRotateInterval="5000"
              fresco:failureImage="@mipmap/icon_failure"
              fresco:failureImageScaleType="centerInside"
              fresco:retryImage="@mipmap/icon_retry"
              fresco:retryImageScaleType="centerCrop"
              fresco:fadeDuration="5000"
              fresco:backgroundImage="@android:color/holo_orange_light"
              fresco:roundAsCircle="true"
              ></com.facebook.drawee.view.SimpleDraweeView>
      
      </RelativeLayout>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      save_snippets.png

      代码说明:

      圆形图

      MainActivity 中的代码无需修改。

      运行效果:

      circle

      可以看到,从图片开始加载一直到图片下载完毕,整个图像都是圆形的。

    • 圆角图—roundedCornerRadius:

      修改我们刚刚书写的 activity_main.xml

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:fresco="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
          <com.facebook.drawee.view.SimpleDraweeView
              android:id="@+id/main_sdv"
              android:layout_width="100dp"
              android:layout_height="100dp"
              android:layout_centerInParent="true"
              fresco:actualImageScaleType="focusCrop"
              fresco:placeholderImage="@mipmap/icon_placeholder"
              fresco:placeholderImageScaleType="fitCenter"
              fresco:progressBarImage="@mipmap/icon_progress_bar"
              fresco:progressBarImageScaleType="centerInside"
              fresco:progressBarAutoRotateInterval="5000"
              fresco:failureImage="@mipmap/icon_failure"
              fresco:failureImageScaleType="centerInside"
              fresco:retryImage="@mipmap/icon_retry"
              fresco:retryImageScaleType="centerCrop"
              fresco:fadeDuration="5000"
              fresco:backgroundImage="@android:color/holo_orange_light"
              fresco:roundedCornerRadius="30dp"
              ></com.facebook.drawee.view.SimpleDraweeView>
      
      </RelativeLayout>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      save_snippets.png

      代码说明:

      圆角

      MainActivity 中的代码无需修改。

      运行效果:

      圆角运行图

      可以看到,从图片开始加载一直到图片下载完毕,整个图像都是圆角的。

      圆角属性 圆角属性
      左上角是否为圆角fresco:roundTopLeft="false" 右上角是否为圆角fresco:roundTopRight="false"
      topLeft topRight
      bottomLeft bottomRight
      左下角是否为圆角fresco:roundBottomLeft="false" 右下角是否为圆角fresco:roundBottomRight="false"

      注意:

      当我们同时设置图像显示为圆形图像和圆角图像时,只会显示为圆形图像。

      同时设置圆形圆角

    • 圆形圆角边框宽度及颜色—roundingBorder:

      修改我们刚刚书写的 activity_main.xml

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:fresco="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
          <com.facebook.drawee.view.SimpleDraweeView
              android:id="@+id/main_sdv"
              android:layout_width="100dp"
              android:layout_height="100dp"
              android:layout_centerInParent="true"
              fresco:actualImageScaleType="focusCrop"
              fresco:placeholderImage="@mipmap/icon_placeholder"
              fresco:placeholderImageScaleType="focusCrop"
              fresco:progressBarImage="@mipmap/icon_progress_bar"
              fresco:progressBarImageScaleType="focusCrop"
              fresco:progressBarAutoRotateInterval="5000"
              fresco:failureImage="@mipmap/icon_failure"
              fresco:failureImageScaleType="focusCrop"
              fresco:retryImage="@mipmap/icon_retry"
              fresco:retryImageScaleType="focusCrop"
              fresco:fadeDuration="5000"
              fresco:backgroundImage="@android:color/holo_orange_light"
              fresco:roundAsCircle="true"
              fresco:roundedCornerRadius="30dp"
              fresco:roundTopLeft="true"
              fresco:roundTopRight="true"
              fresco:roundBottomLeft="true"
              fresco:roundBottomRight="true"
              fresco:roundingBorderWidth="10dp"
              fresco:roundingBorderColor="@android:color/black"
              ></com.facebook.drawee.view.SimpleDraweeView>
      
      </RelativeLayout>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      save_snippets.png

      代码说明:

      圆形圆角边框

      MainActivity 中的代码无需修改。

      运行效果(左边显示的是带边框的圆形图像,右边显示的是带边框的圆角图像):

      圆形边框圆角边框

    • 圆形或圆角图像底下的叠加颜色—roundWithOverlayColor:

      修改我们刚刚书写的 activity_main.xml

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:fresco="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
          <com.facebook.drawee.view.SimpleDraweeView
              android:id="@+id/main_sdv"
              android:layout_width="100dp"
              android:layout_height="100dp"
              android:layout_centerInParent="true"
              fresco:actualImageScaleType="focusCrop"
              fresco:placeholderImage="@mipmap/icon_placeholder"
              fresco:placeholderImageScaleType="focusCrop"
              fresco:progressBarImage="@mipmap/icon_progress_bar"
              fresco:progressBarImageScaleType="focusCrop"
              fresco:progressBarAutoRotateInterval="5000"
              fresco:failureImage="@mipmap/icon_failure"
              fresco:failureImageScaleType="focusCrop"
              fresco:retryImage="@mipmap/icon_retry"
              fresco:retryImageScaleType="focusCrop"
              fresco:fadeDuration="5000"
              fresco:backgroundImage="@android:color/holo_orange_light"
              fresco:roundWithOverlayColor="@android:color/darker_gray"
              fresco:roundAsCircle="true"
              ></com.facebook.drawee.view.SimpleDraweeView>
      
      </RelativeLayout>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      save_snippets.png

      代码说明:

      底下的颜色

      MainActivity 中的代码无需修改。

      运行效果(左边为圆形效果,右边为圆角效果):

      圆形效果圆角效果

    • 缩放类型—ScaleType:

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

      推荐使用:focusCrop 类型

      Fresco中文说明对这一点也有详情的说明: 缩放

    • 总结:

      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 控件纵横比
    • GitHub:

      本教程最终项目GitHub地址:https://github.com/scp504677840/Fresco

    展开全文
  • Fresco 初体验各种问题解决

    万次阅读 热门讨论 2015-04-13 11:27:26
    Fresco 初体验各种问题解决 xmlns:fresco="http://schemas.android.com/apk/res-auto"显示为灰色,没有应用到 解决办法 把引用图片的方式(src)改为:fresco:placeholderImage 初始化位置错误 Error inflating...

    Fresco 初体验各种问题解决

    • xmlns:fresco="http://schemas.android.com/apk/res-auto"显示为灰色,没有应用到
      这里写图片描述

      1. 解决办法

      把引用图片的方式(src)改为:fresco:placeholderImage
      这里写图片描述

    • 初始化位置错误

    Error inflating class com.facebook.drawee.view.SimpleDraweeView 
    android.view.InflateException: Binary XML file line #14: Error inflating class com.facebook.drawee.view.SimpleDraweeView
    Caused by: java.lang.reflect.InvocationTargetException
    Caused by: java.lang.NullPointerException
                at com.facebook.drawee.view.DraweeView.setImageDrawable(DraweeView.java:140)

    这里是没有引用到`com.facebook.drawee.view.SimpleDraweeView

    1.解决办法
    

    把初始化Fresco调整到setContentView(R.layout.activity_main);上边
    这里写图片描述


    • 图片不显示
      这里写图片描述
      1.解决办法

    Fresco 是不支持wrap_content所以我们把相应的地方改为数值:100dp之类的,更具具体情况定
    这里写图片描述

    展开全文
  • Fresco 的几个注意的点

    千次阅读 2016-10-19 14:13:53
    Fresco 的使用方式官网给出了详细的说明,基本使用也比较简单. 这里只是记录一些遇到的一些情况: SimpleDraweeView直接设置图片,官网给出的是: Uri uri = Uri.parse(...

    Fresco 的使用方式官网给出了详细的说明,基本使用也比较简单.
    这里只是记录一些遇到的一些情况:

    1. SimpleDraweeView直接设置图片,官网给出的是:
    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);

    但是有的时候不想用代码设置,只是xml上设置:

    <com.facebook.drawee.view.SimpleDraweeView
                        android:id="@+id/img_head"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:layout_marginBottom="6dp"
                        fresco:fadeDuration="2000"
                        fresco:actualImageScaleType="centerInside"          fresco:actualImageUri="http://www.smemo.info/icon.png"
                        fresco:roundAsCircle="true" />

    actualImageUri 这个属性直接填写uri进行赋值,但是这个地方必须是能够转成uri的字符串,不然要么不显示要么出错误

    1. fresco:placeholderImage=”@mipmap/ic_avatar” 里fresco的前缀,这个也是Facebook自恋的表现吗?(呵呵)
      fresco在使用前必须声明: xmlns:fresco=”http://schemas.android.com/apk/res-auto”
      android上很多情况都是默认xmlns:app=”http://schemas.android.com/apk/res-auto”的
      所以到底使用哪个都行,但是别都使用导致出现奇怪的情况,比如:
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:fresco="http://schemas.android.com/tools"

    这时fresco设置的属性都不起作用,但是也不会保存,所以有时候设置了不生效,查看一下声明

    展开全文
  • Fresco

    2019-07-17 21:27:47
    1, Fresco 是是Facebook开发的一个强大的图片加载组件。 和Picasso,Glide比较,它在内存管理方面有很大优势。它的图片是存储在Native层的,可避免OOM。 github地址:https://github.com/facebook/fresco. 2, 使用...
  • 转载请标明出处:...优点:相对于其他开源的第三方图片加载库,Fresco拥有更好的内存管理和强大的功能,基本上能满足所有的日常使用场景。缺点:整体比较大,不过目前的版
  • fresco

    2017-11-06 07:42:50
    package com.example.fresco; import android.content.Intent; import android.graphics.drawable.Animatable; import android.net.Uri; import android.os.Bundle; import android.support.v7.app.AppCompatActivi
  • Picasso,Glide,Fresco对比分析

    万次阅读 多人点赞 2017-04-18 00:59:58
    前言 图片加载是Android开发中最... 老牌的有ImageLoader,UIL,Volley,主流的有,Picasso,Glide,Fresco等等,选择一款好的图片加载裤就成了我们的首要问题。 接下来我们对比一下主流的三款 Picasso,Glide,Fr
  • Fresco简单的使用—SimpleDraweeView 百学须先立志—学前须知:在我们平时加载图片(不管是下载还是加载本地图片…..)的时候,我们经常会遇到这样一个需求,那就是当图片正在加载时应该呈现正在加载时的图像,当图片...
  • Fresco用法详解

    2019-01-09 10:12:35
    版权声明:本文为恩城原创文章,...Fresco用法详解 经过在实际项目中多次的使用,本人在这做了一下简单总结,希望对初次使用和正在使用的你们有所帮助。 官方地址 官方github地址:https://github.com/facebook/fres...
  • 当下最常用的图片加载框架是:Gilde,Fresco,Picasso。Fresco是Facebook提供的开源图片加载库,它能够从网络,本地存储和Android资源文件中加载图片,且具有三级缓存设计(2级内存,1级文件)。Fresco中实现了各种...
  • Fresco初识

    千次阅读 2016-09-28 09:06:37
    Fresco初始
  • fresco简单使用

    千次阅读 2017-12-03 20:02:39
    1.Fresco的环境搭建 (1)在项目的build.grade文件里添加依赖(注意:因为Fresco进行了包的拆分,用到哪个功能就添加对应的依赖,可以减少APP的体积) dependencies {  //Fresco,无论使用哪个模块的功能,都必须要...
1 2 3 4 5 ... 20
收藏数 11,172
精华内容 4,468
关键字:

fresco