加载gif动画图片

1、studio添加fresco的jar包依赖使用括号里面的就行(compil 'com.facebook.fresco:fresco:0.8.1')       加载gif不要用高版本的Fresco;

2、xml文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.myapplication.MainActivity">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/sim_fre"
        android:layout_width="200dp"
        android:layout_height="200dp"
        fresco:placeholderImage="@mipmap/ic_launcher"/>
</RelativeLayout>
3、代码中加载

        //初始化在加载布局的上面

        Fresco.initialize(this);
        //Fresco的初始化,必须调用在setContentView之前
setContentView(R.layout.activity_main); SimpleDraweeView s=(SimpleDraweeView)this.findViewById(R.id.sim_fre); DraweeController mDraweeController = Fresco.newDraweeControllerBuilder() .setAutoPlayAnimations(true) //设置uri,加载本地的gif资源 .setUri(Uri.parse("res://"+getPackageName()+"/"+R.drawable.e))//设置uri .build(); sss//设置Controller s.setController(mDraweeController);
4、、、、、、、、、

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

    之前我们学会了一些基本的效果设置,对于常见的圆形圆角图没有涉及,那么今天我们就一起来看看,如何设置圆形圆角图。

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

    1、DraweeHierarchy 
    2、SettableDraweeHierarchy 
    3、GenericDraweeHierarchy 
    4、GenericDraweeHierarchyBuilder 
    5、RoundingParams 
    6、RoundingParams.RoundingMethod 
    7、圆形圆角图

  • 工欲善其事必先利其器—了解Fresco

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

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

    上一篇Fresco效果设置:Fresco-更灵活的设置加载特效[Java代码实现XML效果]

  • 简单基础:

    首先创建一个 activity_main.xml :

    <code
     class="hljs xml has-numbering" style="display: block; padding: 0px; 
    color: inherit; box-sizing: border-box; font-family: "Source Code Pro", 
    monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
    word-wrap: normal; background: transparent;"><span class="hljs-pi"
     style="color: rgb(0, 102, 102); box-sizing: border-box;"><?xml 
    version="1.0" encoding="utf-8"?></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
    border-box;"><<span class="hljs-title" style="box-sizing: 
    border-box; color: rgb(0, 0, 136);">RelativeLayout</span> 
    <span class="hljs-attribute" style="box-sizing: border-box; color: 
    rgb(102, 0, 102);">xmlns:android</span>=<span 
    class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
    0);">"http://schemas.android.com/apk/res/android"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; 
    color: rgb(102, 0, 102);">xmlns:tools</span>=<span 
    class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
    0);">"http://schemas.android.com/tools"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; 
    color: rgb(102, 0, 102);">xmlns:fresco</span>=<span 
    class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
    0);">"http://schemas.android.com/apk/res-auto"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; 
    color: rgb(102, 0, 102);">android:layout_width</span>=<span 
    class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
    0);">"match_parent"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; 
    color: rgb(102, 0, 102);">android:layout_height</span>=<span
     class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
    0);">"match_parent"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; 
    color: rgb(102, 0, 102);">tools:context</span>=<span 
    class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
    0);">".MainActivity"</span>></span>
    
        <span class="hljs-tag" style="color: rgb(0, 102, 102); 
    box-sizing: border-box;"><<span class="hljs-title" 
    style="box-sizing: border-box; color: rgb(0, 0, 
    136);">com.facebook.drawee.view.SimpleDraweeView
    </span>        <span class="hljs-attribute" style="box-sizing: 
    border-box; color: rgb(102, 0, 
    102);">android:id</span>=<span class="hljs-value" 
    style="box-sizing: border-box; color: rgb(0, 136, 
    0);">"@+id/main_sdv"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; 
    color: rgb(102, 0, 102);">android:layout_width</span>=<span 
    class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
    0);">"100dp"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; 
    color: rgb(102, 0, 102);">android:layout_height</span>=<span
     class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
    0);">"100dp"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; 
    color: rgb(102, 0, 
    102);">android:layout_centerInParent</span>=<span 
    class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
    0);">"true"</span> /></span>
    
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
    border-box;"></<span class="hljs-title" style="box-sizing: 
    border-box; color: rgb(0, 0, 
    136);">RelativeLayout</span>></span></code><ul
     class="pre-numbering" style="box-sizing: border-box; position: 
    absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 
    0px 40px; border-right-width: 1px; border-right-style: solid; 
    border-right-color: rgb(221, 221, 221); list-style: none; text-align: 
    right; background-color: rgb(238, 238, 238);"><li 
    style="box-sizing: border-box; padding: 0px 5px;">1</li><li 
    style="box-sizing: border-box; padding: 0px 5px;">2</li><li 
    style="box-sizing: border-box; padding: 0px 5px;">3</li><li 
    style="box-sizing: border-box; padding: 0px 5px;">4</li><li 
    style="box-sizing: border-box; padding: 0px 5px;">5</li><li 
    style="box-sizing: border-box; padding: 0px 5px;">6</li><li 
    style="box-sizing: border-box; padding: 0px 5px;">7</li><li 
    style="box-sizing: border-box; padding: 0px 5px;">8</li><li 
    style="box-sizing: border-box; padding: 0px 5px;">9</li><li 
    style="box-sizing: border-box; padding: 0px 5px;">10</li><li
     style="box-sizing: border-box; padding: 0px 
    5px;">11</li><li style="box-sizing: border-box; padding: 0px
     5px;">12</li><li style="box-sizing: border-box; padding: 
    0px 5px;">13</li><li style="box-sizing: border-box; padding:
     0px 5px;">14</li><li style="box-sizing: border-box; 
    padding: 0px 5px;">15</li></ul>

    代码分析:

    XML

    相信大家对这个布局已经是很熟悉了,必须指定 SimpleDraweeView 控件的大小,否则图像不能正常加载;那么接下来我们来书写我们的MainActivity 里面的内容:

    <code
     class="hljs java has-numbering" style="display: block; padding: 0px; 
    color: inherit; box-sizing: border-box; font-family: "Source Code Pro", 
    monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
    word-wrap: normal; background: transparent;"><span 
    class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: 
    border-box;">public</span> <span class="hljs-class" 
    style="box-sizing: border-box;"><span class="hljs-keyword" 
    style="color: rgb(0, 0, 136); box-sizing: 
    border-box;">class</span> <span class="hljs-title" 
    style="box-sizing: border-box; color: rgb(102, 0, 
    102);">MainActivity</span> <span class="hljs-keyword" 
    style="color: rgb(0, 0, 136); box-sizing: 
    border-box;">extends</span> <span class="hljs-title" 
    style="box-sizing: border-box; color: rgb(102, 0, 
    102);">AppCompatActivity</span> {</span>
    
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); 
    box-sizing: border-box;">private</span> SimpleDraweeView sdv;
        <span class="hljs-javadoc" style="color: rgb(136, 0, 0); 
    box-sizing: border-box;">/**
         * 图片地址
         */</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); 
    box-sizing: border-box;">private</span> Uri imageUrl = 
    Uri.parse(<span class="hljs-string" style="color: rgb(0, 136, 0); 
    box-sizing: 
    border-box;">"http://avatar.csdn.net/4/E/8/1_y1scp.jpg"</span>);
    
        <span class="hljs-annotation" style="color: rgb(155, 133, 157); 
    box-sizing: border-box;">@Override</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); 
    box-sizing: border-box;">protected</span> <span 
    class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: 
    border-box;">void</span> <span class="hljs-title" 
    style="box-sizing: border-box;">onCreate</span>(Bundle 
    savedInstanceState) {
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); 
    box-sizing: 
    border-box;">super</span>.onCreate(savedInstanceState);
            <span class="hljs-comment" style="color: rgb(136, 0, 0); 
    box-sizing: border-box;">//初始化Fresco</span>
            Fresco.initialize(<span class="hljs-keyword" style="color: 
    rgb(0, 0, 136); box-sizing: border-box;">this</span>);
            setContentView(R.layout.activity_main);
            initView();
        }
    
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); 
    box-sizing: border-box;">private</span> <span 
    class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: 
    border-box;">void</span> <span class="hljs-title" 
    style="box-sizing: border-box;">initView</span>() {
            <span class="hljs-comment" style="color: rgb(136, 0, 0); 
    box-sizing: border-box;">//获取SimpleDraweeView</span>
            sdv = (SimpleDraweeView) findViewById(R.id.main_sdv);
    
            <span class="hljs-comment" style="color: rgb(136, 0, 0); 
    box-sizing: border-box;">//获取GenericDraweeHierarchy对象</span>
            GenericDraweeHierarchy hierarchy = 
    GenericDraweeHierarchyBuilder.newInstance(getResources())
                    <span class="hljs-comment" style="color: rgb(136, 0, 
    0); box-sizing: border-box;">//设置淡入淡出动画持续时间(单位:毫秒ms)</span>
                    .setFadeDuration(<span class="hljs-number" 
    style="color: rgb(0, 102, 102); box-sizing: 
    border-box;">5000</span>)
                    <span class="hljs-comment" style="color: rgb(136, 0, 
    0); box-sizing: border-box;">//构建</span>
                    .build();
    
            <span class="hljs-comment" style="color: rgb(136, 0, 0); 
    box-sizing: border-box;">//设置Hierarchy</span>
            sdv.setHierarchy(hierarchy);
    
            <span class="hljs-comment" style="color: rgb(136, 0, 0); 
    box-sizing: border-box;">//构建Controller</span>
            DraweeController controller = 
    Fresco.newDraweeControllerBuilder()
                    <span class="hljs-comment" style="color: rgb(136, 0, 
    0); box-sizing: border-box;">//设置需要下载的图片地址</span>
                    .setUri(imageUrl)
                    <span class="hljs-comment" style="color: rgb(136, 0, 
    0); box-sizing: border-box;">//设置点击重试是否开启</span>
                    .setTapToRetryEnabled(<span class="hljs-keyword" 
    style="color: rgb(0, 0, 136); box-sizing: 
    border-box;">true</span>)
                    <span class="hljs-comment" style="color: rgb(136, 0, 
    0); box-sizing: border-box;">//构建</span>
                    .build();
    
            <span class="hljs-comment" style="color: rgb(136, 0, 0); 
    box-sizing: border-box;">//设置Controller</span>
            sdv.setController(controller);
        }
    }</code><ul class="pre-numbering" style="box-sizing: 
    border-box; position: absolute; width: 50px; top: 0px; left: 0px; 
    margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; 
    border-right-style: solid; border-right-color: rgb(221, 221, 221); 
    list-style: none; text-align: right; background-color: rgb(238, 238, 
    238);"><li style="box-sizing: border-box; padding: 0px 
    5px;">1</li><li style="box-sizing: border-box; padding: 0px 
    5px;">2</li><li style="box-sizing: border-box; padding: 0px 
    5px;">3</li><li style="box-sizing: border-box; padding: 0px 
    5px;">4</li><li style="box-sizing: border-box; padding: 0px 
    5px;">5</li><li style="box-sizing: border-box; padding: 0px 
    5px;">6</li><li style="box-sizing: border-box; padding: 0px 
    5px;">7</li><li style="box-sizing: border-box; padding: 0px 
    5px;">8</li><li style="box-sizing: border-box; padding: 0px 
    5px;">9</li><li style="box-sizing: border-box; padding: 0px 
    5px;">10</li><li style="box-sizing: border-box; padding: 0px
     5px;">11</li><li style="box-sizing: border-box; padding: 
    0px 5px;">12</li><li style="box-sizing: border-box; padding:
     0px 5px;">13</li><li style="box-sizing: border-box; 
    padding: 0px 5px;">14</li><li style="box-sizing: border-box;
     padding: 0px 5px;">15</li><li style="box-sizing: 
    border-box; padding: 0px 5px;">16</li><li style="box-sizing:
     border-box; padding: 0px 5px;">17</li><li 
    style="box-sizing: border-box; padding: 0px 5px;">18</li><li
     style="box-sizing: border-box; padding: 0px 
    5px;">19</li><li style="box-sizing: border-box; padding: 0px
     5px;">20</li><li style="box-sizing: border-box; padding: 
    0px 5px;">21</li><li style="box-sizing: border-box; padding:
     0px 5px;">22</li><li style="box-sizing: border-box; 
    padding: 0px 5px;">23</li><li style="box-sizing: border-box;
     padding: 0px 5px;">24</li><li style="box-sizing: 
    border-box; padding: 0px 5px;">25</li><li style="box-sizing:
     border-box; padding: 0px 5px;">26</li><li 
    style="box-sizing: border-box; padding: 0px 5px;">27</li><li
     style="box-sizing: border-box; padding: 0px 
    5px;">28</li><li style="box-sizing: border-box; padding: 0px
     5px;">29</li><li style="box-sizing: border-box; padding: 
    0px 5px;">30</li><li style="box-sizing: border-box; padding:
     0px 5px;">31</li><li style="box-sizing: border-box; 
    padding: 0px 5px;">32</li><li style="box-sizing: border-box;
     padding: 0px 5px;">33</li><li style="box-sizing: 
    border-box; padding: 0px 5px;">34</li><li style="box-sizing:
     border-box; padding: 0px 5px;">35</li><li 
    style="box-sizing: border-box; padding: 0px 5px;">36</li><li
     style="box-sizing: border-box; padding: 0px 
    5px;">37</li><li style="box-sizing: border-box; padding: 0px
     5px;">38</li><li style="box-sizing: border-box; padding: 
    0px 5px;">39</li><li style="box-sizing: border-box; padding:
     0px 5px;">40</li><li style="box-sizing: border-box; 
    padding: 0px 5px;">41</li><li style="box-sizing: border-box;
     padding: 0px 5px;">42</li><li style="box-sizing: 
    border-box; padding: 0px 5px;">43</li><li style="box-sizing:
     border-box; padding: 0px 5px;">44</li></ul>

    代码分析:

    main

    最后,我们到 AndroidManifest 文件中添加访问网络的权限:

    <code
     class="hljs xml has-numbering" style="display: block; padding: 0px; 
    color: inherit; box-sizing: border-box; font-family: "Source Code Pro", 
    monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
    word-wrap: normal; background: transparent;"><span 
    class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: 
    border-box;"><!-- 访问网络权限 --></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
    border-box;"><<span class="hljs-title" style="box-sizing: 
    border-box; color: rgb(0, 0, 136);">uses-permission</span> 
    <span class="hljs-attribute" style="box-sizing: border-box; color: 
    rgb(102, 0, 102);">android:name</span>=<span 
    class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
    0);">"android.permission.INTERNET"</span>></span><span
     class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
    border-box;"></<span class="hljs-title" style="box-sizing: 
    border-box; color: rgb(0, 0, 
    136);">uses-permission</span>></span></code><ul
     class="pre-numbering" style="box-sizing: border-box; position: 
    absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 
    0px 40px; border-right-width: 1px; border-right-style: solid; 
    border-right-color: rgb(221, 221, 221); list-style: none; text-align: 
    right; background-color: rgb(238, 238, 238);"><li 
    style="box-sizing: border-box; padding: 0px 5px;">1</li><li 
    style="box-sizing: border-box; padding: 0px 
    5px;">2</li></ul>

    代码分析:

    网络权限

    我们运行一下,看看效果:

    第一次

  • 圆形图—setRoundingParams:

    设置圆形图只有一种方式,但它有两种方法:

    限定符和类型 方法 说明
    static RoundingParams asCircle() 将图像设置成圆形
    RoundingParams setRoundAsCircle(boolean roundAsCircle) 是否将图像设置成圆形

    那么接下来,我们依次使用这两种方法为图像设置成圆形,首先使用第一种方法,修改刚刚书写的 MainActivity 里面的代码:

    <code
     class="hljs java has-numbering" style="display: block; padding: 0px; 
    color: inherit; box-sizing: border-box; font-family: "Source Code Pro", 
    monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
    word-wrap: normal; background: transparent;"><span 
    class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: 
    border-box;">public</span> <span class="hljs-class" 
    style="box-sizing: border-box;"><span class="hljs-keyword" 
    style="color: rgb(0, 0, 136); box-sizing: 
    border-box;">class</span> <span class="hljs-title" 
    style="box-sizing: border-box; color: rgb(102, 0, 
    102);">MainActivity</span> <span class="hljs-keyword" 
    style="color: rgb(0, 0, 136); box-sizing: 
    border-box;">extends</span> <span class="hljs-title" 
    style="box-sizing: border-box; color: rgb(102, 0, 
    102);">AppCompatActivity</span> {</span>
    
        ......
    
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); 
    box-sizing: border-box;">private</span> <span 
    class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: 
    border-box;">void</span> <span class="hljs-title" 
    style="box-sizing: border-box;">initView</span>() {
            ......
    
            <span class="hljs-comment" style="color: rgb(136, 0, 0); 
    box-sizing: border-box;">//获取GenericDraweeHierarchy对象</span>
            GenericDraweeHierarchy hierarchy = 
    GenericDraweeHierarchyBuilder.newInstance(getResources())
                    <span class="hljs-comment" style="color: rgb(136, 0, 
    0); box-sizing: 
    border-box;">//设置圆形圆角参数;RoundingParams.asCircle()是将图像设置成圆形</span>
                    .setRoundingParams(RoundingParams.asCircle())
                    <span class="hljs-comment" style="color: rgb(136, 0, 
    0); box-sizing: border-box;">//设置淡入淡出动画持续时间(单位:毫秒ms)</span>
                    .setFadeDuration(<span class="hljs-number" 
    style="color: rgb(0, 102, 102); box-sizing: 
    border-box;">5000</span>)
                    <span class="hljs-comment" style="color: rgb(136, 0, 
    0); box-sizing: border-box;">//构建</span>
                    .build();
    
            ......
        }
    }</code><ul class="pre-numbering" style="box-sizing: 
    border-box; position: absolute; width: 50px; top: 0px; left: 0px; 
    margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; 
    border-right-style: solid; border-right-color: rgb(221, 221, 221); 
    list-style: none; text-align: right; background-color: rgb(238, 238, 
    238);"><li style="box-sizing: border-box; padding: 0px 
    5px;">1</li><li style="box-sizing: border-box; padding: 0px 
    5px;">
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值