Fresco-加载图片基础[详细图解Fresco的使用]

最新推荐文章于 2023-02-16 11:02:25 发布
最新推荐文章于 2023-02-16 11:02:25 发布
阅读量1.8k 收藏 4
点赞数 4
分类专栏： Android 文章标签： Fresco 框架 androidstudio 图片加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ai_yong_jie/article/details/52302380
版权

Fresco简单的使用—SimpleDraweeView

转自：http://blog.csdn.net/y1scp/article/details/49245535
  • 百学须先立志—学前须知：

    在我们平时加载图片(不管是下载还是加载本地图片…..)的时候，我们经常会遇到这样一个需求，那就是当图片正在加载时应该呈现正在加载时的图像，当图片加载失败时应该呈现图片加载时的图像，当我们重新加载这张图片时，应该呈现重试时图像，直到这张图片加载完成。这些繁琐并且重复的如果得不到简化的话，那将是一个开发人员的噩梦，现在好了，我们用 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到项目工程：

    使用说明

    第三步服务及权限：

    <code class="hljs xml has-numbering"><span class="hljs-comment"><!-- 访问网络的权限 --></span>
<span class="hljs-tag"><<span class="hljs-title">uses-permission</span> <span class="hljs-attribute">android:name</span>=<span class="hljs-value">"android.permission.INTERNET"</span>/></span></code><ul class="pre-numbering"><li>1</li><li>2</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li></ul>

    服务及权限

  • 常见问题：

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

    <code class="hljs avrasm has-numbering"><RelativeLayout xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
    android:layout_width=<span class="hljs-string">"match_parent"</span>
    android:layout_height=<span class="hljs-string">"match_parent"</span>>

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>
        android:id=<span class="hljs-string">"@+id/main_adv"</span>
        android:layout_width=<span class="hljs-string">"300dp"</span>
        android:layout_height=<span class="hljs-string">"300dp"</span>
        android:layout_centerInParent=<span class="hljs-string">"true"</span>
        ></<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>>

</RelativeLayout></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>

    代码分析：

    初次加载

    MainActivity 实现代码：

    <code class="hljs java has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">AppCompatActivity</span> {</span>

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(Bundle savedInstanceState) {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

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

    <code class="hljs avrasm has-numbering">        java<span class="hljs-preprocessor">.lang</span><span class="hljs-preprocessor">.RuntimeException</span>: Unable to start activity ComponentInfo{scp<span class="hljs-preprocessor">.com</span><span class="hljs-preprocessor">.frescodemo</span>/scp<span class="hljs-preprocessor">.com</span><span class="hljs-preprocessor">.frescodemo</span><span class="hljs-preprocessor">.MainActivity</span>}: 

<span class="hljs-label">android.view.InflateException:</span> Binary XML file line <span class="hljs-preprocessor">#5: Error inflating class com.facebook.drawee.view.SimpleDraweeView</span>
                at android<span class="hljs-preprocessor">.app</span><span class="hljs-preprocessor">.ActivityThread</span><span class="hljs-preprocessor">.performLaunchActivity</span>(ActivityThread<span class="hljs-preprocessor">.java</span>:<span class="hljs-number">2264</span>)
                at android<span class="hljs-preprocessor">.app</span><span class="hljs-preprocessor">.ActivityThread</span><span class="hljs-preprocessor">.handleLaunchActivity</span>(ActivityThread<span class="hljs-preprocessor">.java</span>:<span class="hljs-number">2313</span>)
                at android<span class="hljs-preprocessor">.app</span><span class="hljs-preprocessor">.ActivityThread</span><span class="hljs-preprocessor">.access</span>$1100(ActivityThread<span class="hljs-preprocessor">.java</span>:<span class="hljs-number">141</span>)
                at android<span class="hljs-preprocessor">.app</span><span class="hljs-preprocessor">.ActivityThread</span>$H<span class="hljs-preprocessor">.handleMessage</span>(ActivityThread<span class="hljs-preprocessor">.java</span>:<span class="hljs-number">1238</span>)
                at android<span class="hljs-preprocessor">.os</span><span class="hljs-preprocessor">.Handler</span><span class="hljs-preprocessor">.dispatchMessage</span>(Handler<span class="hljs-preprocessor">.java</span>:<span class="hljs-number">102</span>)
                at android<span class="hljs-preprocessor">.os</span><span class="hljs-preprocessor">.Looper</span><span class="hljs-preprocessor">.loop</span>(Looper<span class="hljs-preprocessor">.java</span>:<span class="hljs-number">136</span>)
                at android<span class="hljs-preprocessor">.app</span><span class="hljs-preprocessor">.ActivityThread</span><span class="hljs-preprocessor">.main</span>(ActivityThread<span class="hljs-preprocessor">.java</span>:<span class="hljs-number">5336</span>)
                at java<span class="hljs-preprocessor">.lang</span><span class="hljs-preprocessor">.reflect</span><span class="hljs-preprocessor">.Method</span><span class="hljs-preprocessor">.invokeNative</span>(Native Method)
                at java<span class="hljs-preprocessor">.lang</span><span class="hljs-preprocessor">.reflect</span><span class="hljs-preprocessor">.Method</span><span class="hljs-preprocessor">.invoke</span>(Method<span class="hljs-preprocessor">.java</span>:<span class="hljs-number">515</span>)
                at <span class="hljs-keyword">com</span><span class="hljs-preprocessor">.android</span><span class="hljs-preprocessor">.internal</span><span class="hljs-preprocessor">.os</span><span class="hljs-preprocessor">.ZygoteInit</span>$MethodAndArgsCaller<span class="hljs-preprocessor">.run</span>(ZygoteInit<span class="hljs-preprocessor">.java</span>:<span class="hljs-number">871</span>)
                at <span class="hljs-keyword">com</span><span class="hljs-preprocessor">.android</span><span class="hljs-preprocessor">.internal</span><span class="hljs-preprocessor">.os</span><span class="hljs-preprocessor">.ZygoteInit</span><span class="hljs-preprocessor">.main</span>(ZygoteInit<span class="hljs-preprocessor">.java</span>:<span class="hljs-number">687</span>)
                at dalvik<span class="hljs-preprocessor">.system</span><span class="hljs-preprocessor">.NativeStart</span><span class="hljs-preprocessor">.main</span>(Native Method)
         Caused by: android<span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.InflateException</span>: Binary XML file line <span class="hljs-preprocessor">#5: Error inflating class com.facebook.drawee.view.SimpleDraweeView</span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul>

    报错

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

    修改我们的 MainActivity 里代码：

    <code class="hljs java has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">AppCompatActivity</span> {</span>

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(Bundle savedInstanceState) {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState);
        Fresco.initialize(<span class="hljs-keyword">this</span>);
        setContentView(R.layout.activity_main);
    }
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>

    解决办法

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

  • 占位图—placeholderImage：

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

    icon_placeholder

    修改我们的 activity_main.xml ：

    <code class="hljs avrasm has-numbering"><RelativeLayout xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
    xmlns:fresco=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
    android:layout_width=<span class="hljs-string">"match_parent"</span>
    android:layout_height=<span class="hljs-string">"match_parent"</span>>

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>
        android:id=<span class="hljs-string">"@+id/main_adv"</span>
        android:layout_width=<span class="hljs-string">"100dp"</span>
        android:layout_height=<span class="hljs-string">"100dp"</span>
        android:layout_centerInParent=<span class="hljs-string">"true"</span>
        fresco:placeholderImage=<span class="hljs-string">"@mipmap/icon_placeholder"</span>
        fresco:placeholderImageScaleType=<span class="hljs-string">"fitCenter"</span>
        ></<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>>

</RelativeLayout></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li></ul>

    代码说明：

    占位符

    MainActivity 无需修改，运行一下：

    占位符

  • 正在加载图—progressBarImage：

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

    正在加载图

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

    <code class="hljs avrasm has-numbering"><RelativeLayout xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
    xmlns:fresco=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
    android:layout_width=<span class="hljs-string">"match_parent"</span>
    android:layout_height=<span class="hljs-string">"match_parent"</span>>

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>
        android:id=<span class="hljs-string">"@+id/main_sdv"</span>
        android:layout_width=<span class="hljs-string">"100dp"</span>
        android:layout_height=<span class="hljs-string">"100dp"</span>
        android:layout_centerInParent=<span class="hljs-string">"true"</span>
        fresco:actualImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:placeholderImage=<span class="hljs-string">"@mipmap/icon_placeholder"</span>
        fresco:placeholderImageScaleType=<span class="hljs-string">"fitCenter"</span>
        fresco:progressBarImage=<span class="hljs-string">"@mipmap/icon_progress_bar"</span>
        fresco:progressBarImageScaleType=<span class="hljs-string">"centerInside"</span>
        fresco:progressBarAutoRotateInterval=<span class="hljs-string">"5000"</span>
        ></<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>>

</RelativeLayout></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li></ul>

    代码说明：

    正在加载图

    更改我们的 MainActivity 里代码：

    <code class="hljs java has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">AppCompatActivity</span> {</span>

    <span class="hljs-keyword">private</span> SimpleDraweeView simpleDraweeView;

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(Bundle savedInstanceState) {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState);
        Fresco.initialize(<span class="hljs-keyword">this</span>);
        setContentView(R.layout.activity_main);
        initView();
    }

    <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">initView</span>() {
        <span class="hljs-comment">//创建SimpleDraweeView对象</span>
        simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv);
        <span class="hljs-comment">//创建将要下载的图片的URI</span>
        Uri imageUri = Uri.parse(<span class="hljs-string">"https://img-my.csdn.net/uploads/avatar/4/E/8/1_y1scp.jpg"</span>);
        <span class="hljs-comment">//开始下载</span>
        simpleDraweeView.setImageURI(imageUri);
    }
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul>

    代码分析：

    正在加载图

    运行效果图：

    正在加载图

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

  • 失败图—failureImage：

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

    icon_failure

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

    <code class="hljs avrasm has-numbering"><RelativeLayout xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
    xmlns:fresco=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
    android:layout_width=<span class="hljs-string">"match_parent"</span>
    android:layout_height=<span class="hljs-string">"match_parent"</span>>

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>
        android:id=<span class="hljs-string">"@+id/main_sdv"</span>
        android:layout_width=<span class="hljs-string">"100dp"</span>
        android:layout_height=<span class="hljs-string">"100dp"</span>
        android:layout_centerInParent=<span class="hljs-string">"true"</span>
        fresco:actualImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:placeholderImage=<span class="hljs-string">"@mipmap/icon_placeholder"</span>
        fresco:placeholderImageScaleType=<span class="hljs-string">"fitCenter"</span>
        fresco:progressBarImage=<span class="hljs-string">"@mipmap/icon_progress_bar"</span>
        fresco:progressBarImageScaleType=<span class="hljs-string">"centerInside"</span>
        fresco:progressBarAutoRotateInterval=<span class="hljs-string">"5000"</span>
        fresco:failureImage=<span class="hljs-string">"@mipmap/icon_failure"</span>
        fresco:failureImageScaleType=<span class="hljs-string">"centerInside"</span>
        ></<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>>

</RelativeLayout></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul>

    代码分析：

    失败图代码分析

    修改我们的 MainActivity 里代码：

    <code class="hljs java has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">AppCompatActivity</span> {</span>

    <span class="hljs-keyword">private</span> SimpleDraweeView simpleDraweeView;

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(Bundle savedInstanceState) {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState);
        Fresco.initialize(<span class="hljs-keyword">this</span>);
        setContentView(R.layout.activity_main);
        initView();
    }

    <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">initView</span>() {
        <span class="hljs-comment">//创建SimpleDraweeView对象</span>
        simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv);
        <span class="hljs-comment">//创建将要下载的图片的URI</span>
        Uri imageUri = Uri.parse(<span class="hljs-string">"https://img-my.csdn.net/uploads/avatar_y1scp.jpg"</span>);
        <span class="hljs-comment">//开始下载</span>
        simpleDraweeView.setImageURI(imageUri);
    }
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul>

    代码说明：

    错误的网络图片地址

    运行效果：

    failure

  • 重试图—retryImage：

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

    icon_retry

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

    <code class="hljs avrasm has-numbering"><RelativeLayout xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
    xmlns:fresco=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
    android:layout_width=<span class="hljs-string">"match_parent"</span>
    android:layout_height=<span class="hljs-string">"match_parent"</span>>

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>
        android:id=<span class="hljs-string">"@+id/main_sdv"</span>
        android:layout_width=<span class="hljs-string">"100dp"</span>
        android:layout_height=<span class="hljs-string">"100dp"</span>
        android:layout_centerInParent=<span class="hljs-string">"true"</span>
        fresco:actualImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:placeholderImage=<span class="hljs-string">"@mipmap/icon_placeholder"</span>
        fresco:placeholderImageScaleType=<span class="hljs-string">"fitCenter"</span>
        fresco:progressBarImage=<span class="hljs-string">"@mipmap/icon_progress_bar"</span>
        fresco:progressBarImageScaleType=<span class="hljs-string">"centerInside"</span>
        fresco:progressBarAutoRotateInterval=<span class="hljs-string">"5000"</span>
        fresco:failureImage=<span class="hljs-string">"@mipmap/icon_failure"</span>
        fresco:failureImageScaleType=<span class="hljs-string">"centerInside"</span>
        fresco:retryImage=<span class="hljs-string">"@mipmap/icon_retry"</span>
        fresco:retryImageScaleType=<span class="hljs-string">"centerCrop"</span>
        ></<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>>

</RelativeLayout></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li></ul>

    代码分析：

    重试图

    修改我们的 MainActivity 里代码：

    <code class="hljs java has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">AppCompatActivity</span> {</span>

    <span class="hljs-keyword">private</span> SimpleDraweeView simpleDraweeView;

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(Bundle savedInstanceState) {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState);
        Fresco.initialize(<span class="hljs-keyword">this</span>);
        setContentView(R.layout.activity_main);
        initView();
    }

    <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">initView</span>() {
        <span class="hljs-comment">//创建SimpleDraweeView对象</span>
        simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv);
        <span class="hljs-comment">//创建将要下载的图片的URI</span>
        Uri imageUri = Uri.parse(<span class="hljs-string">"https://img-my.csdn.net/uploads/avatar_y1scp.jpg"</span>);
        <span class="hljs-comment">//开始下载</span>
        simpleDraweeView.setImageURI(imageUri);

        <span class="hljs-comment">//创建DraweeController</span>
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                <span class="hljs-comment">//加载的图片URI地址</span>
                .setUri(imageUri)
                <span class="hljs-comment">//设置点击重试是否开启</span>
                .setTapToRetryEnabled(<span class="hljs-keyword">true</span>)
                <span class="hljs-comment">//设置旧的Controller</span>
                .setOldController(simpleDraweeView.getController())
                <span class="hljs-comment">//构建</span>
                .build();

        <span class="hljs-comment">//设置DraweeController</span>
        simpleDraweeView.setController(controller);
    }
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li></ul>

    代码说明：

    重试图片

    运行效果：

    重试图效果

    注意：

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

  • 淡入淡出动画—fadeDuration：

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

    <code class="hljs avrasm has-numbering"><RelativeLayout xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
    xmlns:fresco=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
    android:layout_width=<span class="hljs-string">"match_parent"</span>
    android:layout_height=<span class="hljs-string">"match_parent"</span>>

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>
        android:id=<span class="hljs-string">"@+id/main_sdv"</span>
        android:layout_width=<span class="hljs-string">"100dp"</span>
        android:layout_height=<span class="hljs-string">"100dp"</span>
        android:layout_centerInParent=<span class="hljs-string">"true"</span>
        fresco:actualImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:placeholderImage=<span class="hljs-string">"@mipmap/icon_placeholder"</span>
        fresco:placeholderImageScaleType=<span class="hljs-string">"fitCenter"</span>
        fresco:progressBarImage=<span class="hljs-string">"@mipmap/icon_progress_bar"</span>
        fresco:progressBarImageScaleType=<span class="hljs-string">"centerInside"</span>
        fresco:progressBarAutoRotateInterval=<span class="hljs-string">"5000"</span>
        fresco:failureImage=<span class="hljs-string">"@mipmap/icon_failure"</span>
        fresco:failureImageScaleType=<span class="hljs-string">"centerInside"</span>
        fresco:retryImage=<span class="hljs-string">"@mipmap/icon_retry"</span>
        fresco:retryImageScaleType=<span class="hljs-string">"centerCrop"</span>
        fresco:fadeDuration=<span class="hljs-string">"5000"</span>
        ></<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>>

</RelativeLayout></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul>

    代码说明：

    淡入淡出动画

    MainActivity 中的代码无需修改。

    运行效果：

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

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

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

    <code class="hljs avrasm has-numbering"><RelativeLayout xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
    xmlns:fresco=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
    android:layout_width=<span class="hljs-string">"match_parent"</span>
    android:layout_height=<span class="hljs-string">"match_parent"</span>>

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>
        android:id=<span class="hljs-string">"@+id/main_sdv"</span>
        android:layout_width=<span class="hljs-string">"100dp"</span>
        android:layout_height=<span class="hljs-string">"100dp"</span>
        android:layout_centerInParent=<span class="hljs-string">"true"</span>
        fresco:actualImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:fadeDuration=<span class="hljs-string">"5000"</span>
        fresco:backgroundImage=<span class="hljs-string">"@android:color/holo_orange_light"</span>
        ></<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>>

</RelativeLayout></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul>

    代码说明：

    背景图

    MainActivity 中的代码无需修改，运行效果：

    背景效果

  • 叠加图—overlayImage：

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

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

    <code class="hljs avrasm has-numbering"><RelativeLayout xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
    xmlns:fresco=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
    android:layout_width=<span class="hljs-string">"match_parent"</span>
    android:layout_height=<span class="hljs-string">"match_parent"</span>>

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>
        android:id=<span class="hljs-string">"@+id/main_sdv"</span>
        android:layout_width=<span class="hljs-string">"100dp"</span>
        android:layout_height=<span class="hljs-string">"100dp"</span>
        android:layout_centerInParent=<span class="hljs-string">"true"</span>
        fresco:actualImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:placeholderImage=<span class="hljs-string">"@mipmap/icon_placeholder"</span>
        fresco:placeholderImageScaleType=<span class="hljs-string">"fitCenter"</span>
        fresco:progressBarImage=<span class="hljs-string">"@mipmap/icon_progress_bar"</span>
        fresco:progressBarImageScaleType=<span class="hljs-string">"centerInside"</span>
        fresco:progressBarAutoRotateInterval=<span class="hljs-string">"5000"</span>
        fresco:failureImage=<span class="hljs-string">"@mipmap/icon_failure"</span>
        fresco:failureImageScaleType=<span class="hljs-string">"centerInside"</span>
        fresco:retryImage=<span class="hljs-string">"@mipmap/icon_retry"</span>
        fresco:retryImageScaleType=<span class="hljs-string">"centerCrop"</span>
        fresco:fadeDuration=<span class="hljs-string">"5000"</span>
        fresco:backgroundImage=<span class="hljs-string">"@android:color/holo_orange_light"</span>
        fresco:pressedStateOverlayImage=<span class="hljs-string">"@android:color/holo_green_dark"</span>
        fresco:overlayImage=<span class="hljs-string">"@android:color/black"</span>
        ></<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>>

</RelativeLayout></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li></ul>

    代码说明：

    叠加图

    MainActivity 中的代码无需修改。

    运行效果：

    叠加图

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

  • 圆形图—roundAsCircle：

    一行代码搞定圆形图：设置roundAsCircle为true；

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

    <code class="hljs avrasm has-numbering"><RelativeLayout xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
    xmlns:fresco=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
    android:layout_width=<span class="hljs-string">"match_parent"</span>
    android:layout_height=<span class="hljs-string">"match_parent"</span>>

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>
        android:id=<span class="hljs-string">"@+id/main_sdv"</span>
        android:layout_width=<span class="hljs-string">"100dp"</span>
        android:layout_height=<span class="hljs-string">"100dp"</span>
        android:layout_centerInParent=<span class="hljs-string">"true"</span>
        fresco:actualImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:placeholderImage=<span class="hljs-string">"@mipmap/icon_placeholder"</span>
        fresco:placeholderImageScaleType=<span class="hljs-string">"fitCenter"</span>
        fresco:progressBarImage=<span class="hljs-string">"@mipmap/icon_progress_bar"</span>
        fresco:progressBarImageScaleType=<span class="hljs-string">"centerInside"</span>
        fresco:progressBarAutoRotateInterval=<span class="hljs-string">"5000"</span>
        fresco:failureImage=<span class="hljs-string">"@mipmap/icon_failure"</span>
        fresco:failureImageScaleType=<span class="hljs-string">"centerInside"</span>
        fresco:retryImage=<span class="hljs-string">"@mipmap/icon_retry"</span>
        fresco:retryImageScaleType=<span class="hljs-string">"centerCrop"</span>
        fresco:fadeDuration=<span class="hljs-string">"5000"</span>
        fresco:backgroundImage=<span class="hljs-string">"@android:color/holo_orange_light"</span>
        fresco:roundAsCircle=<span class="hljs-string">"true"</span>
        ></<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>>

</RelativeLayout></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul>

    代码说明：

    圆形图

    MainActivity 中的代码无需修改。

    运行效果：

    circle

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

  • 圆角图—roundedCornerRadius：

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

    <code class="hljs avrasm has-numbering"><RelativeLayout xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
    xmlns:fresco=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
    android:layout_width=<span class="hljs-string">"match_parent"</span>
    android:layout_height=<span class="hljs-string">"match_parent"</span>>

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>
        android:id=<span class="hljs-string">"@+id/main_sdv"</span>
        android:layout_width=<span class="hljs-string">"100dp"</span>
        android:layout_height=<span class="hljs-string">"100dp"</span>
        android:layout_centerInParent=<span class="hljs-string">"true"</span>
        fresco:actualImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:placeholderImage=<span class="hljs-string">"@mipmap/icon_placeholder"</span>
        fresco:placeholderImageScaleType=<span class="hljs-string">"fitCenter"</span>
        fresco:progressBarImage=<span class="hljs-string">"@mipmap/icon_progress_bar"</span>
        fresco:progressBarImageScaleType=<span class="hljs-string">"centerInside"</span>
        fresco:progressBarAutoRotateInterval=<span class="hljs-string">"5000"</span>
        fresco:failureImage=<span class="hljs-string">"@mipmap/icon_failure"</span>
        fresco:failureImageScaleType=<span class="hljs-string">"centerInside"</span>
        fresco:retryImage=<span class="hljs-string">"@mipmap/icon_retry"</span>
        fresco:retryImageScaleType=<span class="hljs-string">"centerCrop"</span>
        fresco:fadeDuration=<span class="hljs-string">"5000"</span>
        fresco:backgroundImage=<span class="hljs-string">"@android:color/holo_orange_light"</span>
        fresco:roundedCornerRadius=<span class="hljs-string">"30dp"</span>
        ></<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>>

</RelativeLayout></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul>

    代码说明：

    圆角

    MainActivity 中的代码无需修改。

    运行效果：

    圆角运行图

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

    圆角属性圆角属性
    左上角是否为圆角fresco:roundTopLeft="false"右上角是否为圆角fresco:roundTopRight="false"
    topLefttopRight
    bottomLeftbottomRight
    左下角是否为圆角fresco:roundBottomLeft="false"右下角是否为圆角fresco:roundBottomRight="false"

    注意：

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

    同时设置圆形圆角

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

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

    <code class="hljs avrasm has-numbering"><RelativeLayout xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
    xmlns:fresco=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
    android:layout_width=<span class="hljs-string">"match_parent"</span>
    android:layout_height=<span class="hljs-string">"match_parent"</span>>

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>
        android:id=<span class="hljs-string">"@+id/main_sdv"</span>
        android:layout_width=<span class="hljs-string">"100dp"</span>
        android:layout_height=<span class="hljs-string">"100dp"</span>
        android:layout_centerInParent=<span class="hljs-string">"true"</span>
        fresco:actualImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:placeholderImage=<span class="hljs-string">"@mipmap/icon_placeholder"</span>
        fresco:placeholderImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:progressBarImage=<span class="hljs-string">"@mipmap/icon_progress_bar"</span>
        fresco:progressBarImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:progressBarAutoRotateInterval=<span class="hljs-string">"5000"</span>
        fresco:failureImage=<span class="hljs-string">"@mipmap/icon_failure"</span>
        fresco:failureImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:retryImage=<span class="hljs-string">"@mipmap/icon_retry"</span>
        fresco:retryImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:fadeDuration=<span class="hljs-string">"5000"</span>
        fresco:backgroundImage=<span class="hljs-string">"@android:color/holo_orange_light"</span>
        fresco:roundAsCircle=<span class="hljs-string">"true"</span>
        fresco:roundedCornerRadius=<span class="hljs-string">"30dp"</span>
        fresco:roundTopLeft=<span class="hljs-string">"true"</span>
        fresco:roundTopRight=<span class="hljs-string">"true"</span>
        fresco:roundBottomLeft=<span class="hljs-string">"true"</span>
        fresco:roundBottomRight=<span class="hljs-string">"true"</span>
        fresco:roundingBorderWidth=<span class="hljs-string">"10dp"</span>
        fresco:roundingBorderColor=<span class="hljs-string">"@android:color/black"</span>
        ></<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>>

</RelativeLayout></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li></ul>

    代码说明：

    圆形圆角边框

    MainActivity 中的代码无需修改。

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

    圆形边框圆角边框

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

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

    <code class="hljs avrasm has-numbering"><RelativeLayout xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
    xmlns:fresco=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
    android:layout_width=<span class="hljs-string">"match_parent"</span>
    android:layout_height=<span class="hljs-string">"match_parent"</span>>

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>
        android:id=<span class="hljs-string">"@+id/main_sdv"</span>
        android:layout_width=<span class="hljs-string">"100dp"</span>
        android:layout_height=<span class="hljs-string">"100dp"</span>
        android:layout_centerInParent=<span class="hljs-string">"true"</span>
        fresco:actualImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:placeholderImage=<span class="hljs-string">"@mipmap/icon_placeholder"</span>
        fresco:placeholderImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:progressBarImage=<span class="hljs-string">"@mipmap/icon_progress_bar"</span>
        fresco:progressBarImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:progressBarAutoRotateInterval=<span class="hljs-string">"5000"</span>
        fresco:failureImage=<span class="hljs-string">"@mipmap/icon_failure"</span>
        fresco:failureImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:retryImage=<span class="hljs-string">"@mipmap/icon_retry"</span>
        fresco:retryImageScaleType=<span class="hljs-string">"focusCrop"</span>
        fresco:fadeDuration=<span class="hljs-string">"5000"</span>
        fresco:backgroundImage=<span class="hljs-string">"@android:color/holo_orange_light"</span>
        fresco:roundWithOverlayColor=<span class="hljs-string">"@android:color/darker_gray"</span>
        fresco:roundAsCircle=<span class="hljs-string">"true"</span>
        ></<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.facebook</span><span class="hljs-preprocessor">.drawee</span><span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.SimpleDraweeView</span>>

</RelativeLayout></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li></ul>

    代码说明：

    底下的颜色

    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

甄兴旺
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解Android之图片加载框架Fresco基本使用(一)
08-31
本篇文章主要介绍了详解Android之图片加载框架Fresco基本使用(一) ，具有一定的参考价值，有兴趣的可以了解一下。
Fresco Jquery+图片集展示插件应用
xjiang0002的专栏
12-02 1151
要将Fresco Jquery插件集成到你的项目中。需要做一下几步 1、准备Fresco Jquery 插件 下载地址 http://www.frescojs.com/download 2、在需要的页面添加CSS及JS文件        如图
Android 富文本 SpannableString 支持网络图ImageSpan
a day a better
02-16 1130
实现思路： 在文本前加空格占位，使用默认图填充，下载网络图，下载完成时替换默认图。CenterVerticalImageSpan 实现图片在文字中居中效果。图片居中： CenterVerticalImageSpan.java。富文本 SpannableString 支持网络图。
Fresco 使用教程（包括显示在线图片，资源图片、下载、清除缓存）
HL的博客
11-22 1249
首先初始化Fresco.initialize(this);：在xml里面设置SimpleDraweeView：占位图—placeholderImage：在此之前我们需要一张占位图 icon_placeholder.png 大家右键另存为即可：修改我们的 activity_main.xml ： <code class=”hljs avrasm has-numbering” style=”display
Android图片加载神器之Fresco-加载图片基础[详细图解Fresco的使用]
死磕到底
01-19 715
Fresco简单的使用—SimpleDraweeView 百学须先立志—学前须知： 在我们平时加载图片(不管是下载还是加载本地图片…..)的时候，我们经常会遇到这样一个需求，那就是当图片正在加载时应该呈现正在加载时的图像，当图片加载失败时应该呈现图片加载时的图像，当我们重新加载这张图片时，应该呈现重试时图像，直到这张图片加载完成。这些繁琐并且重复的如果得不到简化的话，那将是一个开发
Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用]
wyb112233的专栏
11-04 2万+
Fresco简单的使用—SimpleDraweeView 百学须先立志—学前须知： 在我们平时加载图片(不管是下载还是加载本地图片…..)的时候，我们经常会遇到这样一个需求，那就是当图片正在加载时应该呈现正在加载时的图像，当图片加载失败时应该呈现图片加载时的图像，当我们重新加载这张图片时，应该呈现重试时图像，直到这张图片加载完成。这些繁琐并且重复的如果得不到简化的话，那将是一个开发
Facebook开源fresco-v0.3.0图片加载库jar包
04-21
Facebook开源图片加载库fresco-v0.3.0，只能在android studio上使用，如果在eclipse使用library的话 好像还真不好弄，该资源为fresco-v0.3.0 所有的jar包。
详解Android之图片加载框架Fresco基本使用(二)
08-31
本篇文章主要介绍了Android之图片加载框架Fresco基本使用，可以实现进度条和图片缩放等内容，有兴趣的可以了解一下。
fresco图片加载
07-10
通过fresco对于网络图片进行加载
fresco-processors图片处理器库
04-05
作者wasabeef，源码fresco-processors，一个为Fresco提供了多种transformation的图片处理器库。
Fresco 初体验各种问题解决
ZeroFlutter
04-13 2万+
Fresco 初体验各种问题解决 xmlns:fresco="http://schemas.android.com/apk/res-auto"显示为灰色，没有应用到 解决办法 把引用图片的方式（src）改为：fresco:placeholderImage 初始化位置错误 Error inflating class com.facebook.drawee.view.SimpleDrawe
Android图片加载神器之Fresco，基于各种使用场景的讲解
热门推荐
android_ls的专栏
11-12 3万+
转载请标明出处：http://blog.csdn.net/android_ls/article/details/53137867Fresco是Facebook开源Android平台上一个强大的图片加载库，也是迄今为止Android平台上最强大的图片加载库。优点：相对于其他开源的第三方图片加载库，Fresco拥有更好的内存管理和强大的功能，基本上能满足所有的日常使用场景。缺点：整体比较大，不过目前的版
使用Fresco出现的问题
fuxuanyang的博客
09-26 648
初始化位置错误 Error inflating class com.facebook.drawee.view.SimpleDraweeView android.view.InflateException: Binary XML file line #14: Error inflating class com.facebook.drawee.view.SimpleDraweeView 解决
Android图片加载神器之Fresco-更灵活的设置加载特效[Java代码实现XML效果]
LUFANZHENG的专栏
11-19 1283
GenericDraweeHierarchy 百学须先立志—学前须知： 之前我们学会了如何在XML中设置各项特效的属性，可是在日常开发中，我们的需求是变化莫测的，不可能是提前在XML声明好，也不是所有的控件都写在XML里面；于是用Java代码控制各项特效属性就显得格外重要，掌握这一重要技能势在必得！ 尽信书，不如无书—能学到什么？ 1、DraweeHierarchy 
Fresco简介
PowerSen的博客
11-05 1289
简介:由Facebook最新推出的一款用于Android应用中展示图片的强大图片库,采用MVC设计模式。(被誉为最好的图片处理框架,facebook出品,必出精品) 优势:底层直接用的是C语言,所以对于内存的管理特别强大,一张图片如果 picasso 来处理要用80%的话,那么fresco只占40%,必须使用它的自定义控件,设置src属性,可以直接引用GIF...,各方面都不用管的.一句话越
分享一些基于jquery功能强大的LightBox灯箱效果插件
weixin_30650859的博客
12-10 122
分享一些基于jquery功能强大的LightBox灯箱效果插件 Lytebox弹出层展示 Lytebox是一款不错的 LightBox效果JS库；主要的功能是实现单图，多图展示，并且支持自动播放功能；但是它不局限于只展示图片，它还可以展... ClearBox JS Clearbox3是一个Lightbox...
Fresco介绍及简单使用
怪咖小白的博客
01-01 431
依赖 // 一般依赖： implementation 'com.facebook.fresco:fresco:1.11.0' // 如果需要支持gif，再添加： implementation 'com.facebook.fresco:animated-gif:0.12.0' 初始化 ·建议在App启动就初始化，所以建议写在Application#onCreate()中，记得在manifest....
Fresco加载gif图
光着脚丫子飙五环
01-18 599
/** *加载本地gif图需要转换为URI,加载网络gif图直接放图片URI就ok **/ val controller = Fresco.newDraweeControllerBuilder() .setUri(getUriFromDrawableRes(context, R.drawable.sample)) ...
Fresco加载图片详解
余生|的博客
11-02 1634
添加依赖dependencies { // 在 API < 14 上的机器支持 WebP 时，需要添加 compile 'com.facebook.fresco:animated-base-support:0.12.0' // 支持 GIF 动图，需要添加 compile 'com.facebook.fresco:animated-gif:0.12.0' // 支持 WebP （静态
Android中使用Banner加载轮播图时第一张图片糊掉
最新发布
05-31
在Android中使用Banner加载轮播图时第一张图片糊掉的原因...使用图片加载框架的好处是可以异步加载图片，避免了图片加载过程中的卡顿现象，同时也可以自动处理图片的缓存、压缩等问题。具体使用方法可以查看相关文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值