Fresco简单的使用—SimpleDraweeView

最新推荐文章于 2024-10-05 15:15:57 发布
最新推荐文章于 2024-10-05 15:15:57 发布
阅读量3.2k 收藏 3
点赞数 5
分类专栏： 麻麻Android卒

转载自https://blog.csdn.net/y1scp/article/details/49245535
仅作为学习资料备份。如有侵权，告知必删！




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

    服务及权限

  • 常见问题：

    初次使用，我们就先简单书写我们的 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

    代码分析：

    初次加载

    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

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

            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

    报错

    运行报错了！怎么回事呢？这里啊，是因为我们没有在应用调用 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

    解决办法

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

  • 占位图—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

    代码说明：

    占位符

    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

    代码说明：

    正在加载图

    更改我们的 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

    代码分析：

    正在加载图

    运行效果图：

    正在加载图

    正在加载图本身是不可以转的，但是呢，加上了 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

    代码分析：

    失败图代码分析

    修改我们的 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

    代码说明：

    错误的网络图片地址

    运行效果：

    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

    代码分析：

    重试图

    修改我们的 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

    代码说明：

    重试图片

    运行效果：

    重试图效果

    注意：

    重复加载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

    代码说明：

    淡入淡出动画

    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

    代码说明：

    背景图

    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

    代码说明：

    叠加图

    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

    代码说明：

    圆形图

    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

    代码说明：

    圆角

    MainActivity 中的代码无需修改。

    运行效果：

    圆角运行图

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

    圆角属性圆角属性
    左上角是否为圆角fresco:roundTopLeft="false"右上角是否为圆角fresco:roundTopRight="false"
    topLefttopRight
    bottomLeftbottomRight
    左下角是否为圆角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

    代码说明：

    圆形圆角边框

    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

    代码说明：

    底下的颜色

    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




GuoXuan_CHN
关注
专栏目录
Fresco 使用demo
09-28
在提供的 "test" 文件中，可能包含了一个简单的 Fresco 使用示例，通过运行和分析这个示例代码，你可以更深入地了解如何在实际项目中应用 Fresco。它可能包含了如何初始化 Fresco、设置图片加载监听器、处理各种加载...
Fresco框架SimpleDraweeView控件的简单使用
莎木吉尔
06-29 2万+
首先把网络、SD卡的读写权限添加上:   添加依赖，好像版本太高不支持GIF类型的动态图????compile 'com.facebook.fresco:fresco:0.9.0' private SimpleDraweeView simple;//控件 @Override protected void onCreate(Bundle sav
Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用]
wyb112233的专栏
11-04 2万+
Fresco简单的使用—SimpleDraweeView 百学须先立志—学前须知： 在我们平时加载图片(不管是下载还是加载本地图片…..)的时候，我们经常会遇到这样一个需求，那就是当图片正在加载时应该呈现正在加载时的图像，当图片加载失败时应该呈现图片加载时的图像，当我们重新加载这张图片时，应该呈现重试时图像，直到这张图片加载完成。这些繁琐并且重复的如果得不到简化的话，那将是一个开发
Fresco实战演示：全面深入Android图片加载库
最新发布
weixin_30838971的博客
10-05 1135
本文还有配套的精品资源，点击获取 简介：Fresco是由Facebook开发的高效Android图片处理库，专注于网络图像的加载和管理。该库提供三层缓存架构，包括内存和磁盘缓存机制，优化内存使用，防止内存抖动。核心组件SimpleDraweeView简化了图片显示与状态管理。通过ImageRequest和RequestBuilder实现图片加载参数定制。FrescoDemo...
Android图片加载神器之Fresco-加载图片基础[详细图解Fresco的使用]
热门推荐
y1笑而过
10-19 4万+
Fresco简单的使用—SimpleDraweeView 百学须先立志—学前须知：在我们平时加载图片(不管是下载还是加载本地图片…..)的时候，我们经常会遇到这样一个需求，那就是当图片正在加载时应该呈现正在加载时的图像，当图片加载失败时应该呈现图片加载时的图像，当我们重新加载这张图片时，应该呈现重试时图像，直到这张图片加载完成。这些繁琐并且重复的如果得不到简化的话，那将是一个开发人员的噩梦，现在好了
SimpleDraweeView
云丶很淡
07-08 2052
//xml&lt;com.facebook.drawee.view.SimpleDraweeView android:id="@+id/fresco_sdv" android:layout_width="200dp" android:layout_height="200dp" app:placeholderImage="@drawable/icon_placeholder"...
fresco简单例子
03-02
本示例将深入探讨如何使用 Fresco 来实现一个简单的圆形头像展示功能。 首先，理解 Fresco 的核心组件是至关重要的。Fresco 包括以下主要部分： 1. **SimpleDraweeView**：这是一个自定义的 Android 视图，用于...
详解Android之图片加载框架Fresco基本使用(一)
08-31
首先，引入Fresco库到项目中非常简单，只需在build.gradle文件中添加依赖： ```groovy dependencies { compile 'com.facebook.fresco:fresco:0.14.0' } ``` 请注意，引入Fresco后，需要在Activity的onCreate()方法...
使用Fresco实现显示一张图片的Demo
08-31
接下来，我们创建一个简单的布局文件（如`activity_main.xml`），包含一个`SimpleDraweeView`，它是Drawee提供的一个基本图片视图： ```xml android:layout_width="match_parent" android:layout_height="match_...
Fresco多图
10-06
**Fresco多图加载技术详解** 在Android应用开发中，图片加载...通过这个"简单的一个demo"，我们可以学习到如何使用Fresco实现多图加载，并进一步探索其背后的原理和优化技巧，为我们的应用开发带来更优质的用户体验。
探索MySimpleDraweeView：一个轻量级的Android图片加载库
gitblog_00070的博客
04-08 420
探索MySimpleDraweeView：一个轻量级的Android图片加载库 去发现同类优质开源项目:https://gitcode.com/ 项目简介 是一个由biezhihua开发的Android图像加载和展示库。它基于Facebook的Fresco库，简化了其使用方式，使得开发者可以更快速、更简单地在应用中集成图片加载功能。 技术分析 MySimpleDraweeView的核心是Faceb...
Fresco-加载图片基础[详细图解Fresco的使用]
甄兴旺的博客
08-24 2007
Fresco简单的使用—SimpleDraweeView 转自：http://blog.csdn.net/y1scp/article/details/49245535 百学须先立志—学前须知： 在我们平时加载图片(不管是下载还是加载本地图片…..)的时候，我们经常会遇到这样一个需求，那就是当图片正在加载时应该呈现正在加载时的图像，当图片加载失败时应该呈现图片加载时的图像，当我们重新加
facebook的图片加载控件SimpleDraweeView的属性
luohai859的专栏
03-22 6827
Drawees 具有极大的可定制性。 下面的例子给出了可以配置的各种选项： xml<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view" android:layout_width="20dp" android:layout_height="20dp" fresco:fad
折中方案实现 SimpleDraweeView 圆形头像
一个有思想的搬运工
03-02 635
在使用 Fesco SimpleDraweeView 的时候，有一个需求是要在页面上展示圆形的头像，如果通过 roundAsCircle 属性来实现，可能在某些机型上出现适配的问题，如在华为 Mate P30 上，在系统设置更改字体大小，导致页面重新绘制的时候，会导致圆形头像偏移，或者发生的拉升出现十字的问题，如下图： 此时虽然有另外一种实现，即使用 roundWithOverlayColor 属性，但是使用场景有局限性，即 roundWithOverlayColor 对应的颜色 C1，要与下层的 vi
android 圆形头像，自定义圆形ImageView
meixi_android的博客
10-19 2516
四种实现方法效果： 方法1： 1、添加依赖 implementation 'com.github.bumptech.glide:glide:4.6.1' 2、创建工具类 /** * 加载圆形头像带白色边框 */ public class GlideCircleWithBorder extends BitmapTransformation { private Paint...
Fresco-高斯模糊
FanRQ_的博客
12-25 692
首先效果图     MainActivity.java public class MainActivity extends AppCompatActivity { public String url="http://img5.duitang.com/uploads/item/201312/03/20131203153823_Y4y8F.jpeg"; @Override ...
Fresco实践总结-高斯模糊、圆形圆角、URL、File、Assets、Resource
严振杰
02-28 1万+
前端时间我写了一个Android相册库Album，当时我在做测试的时候发现，用Picasso或者Glide时，当列表达到上千条时，滑动起来就会卡，但是换成Fresco后一点都不卡了，而且Fresco做到的几个内置效果让我欣喜若狂，所以我把我的使用总结记录下来。
Error inflating class com.facebook.drawee.view.SimpleDraweeView问题的解决
尚未佩妥剑 转眼便江湖
07-24 1万+
刚刚遇到的一个小问题，在引用 ‘com.facebook.fresco:fresco:0.6.0’ 库后，在布局中使用 com.facebook.drawee.view.SimpleDraweeView 报错
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值