Fresco using Notes (i): Loading GIF pictures and playing

Objective:

There are too many images and graphics mixed in the project, but most of them are still pictures.

But now there is a need in project development: show a short animation (typically not more than 3 seconds) demo

For example: A function provides a lot of steps to teach users to do calisthenics, then the first step is to display a 3 second action diagram, the second step shows a few seconds of action diagram. (This requirement is not the function of course)

How to solve it: a certain demand for my first realization of the idea is to let the artist to me to make a few consecutive pictures, I use frame animation to the reincarnation of the implementation of this animation.

But frame animation is too complex to use, a set of actions I want to do well for a long time to achieve. So you want to support the android in the image does not support the GIF format, let the artist to make a dynamic diagram I directly to use more convenient.

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

And then I found out. Fresco, official website: http://www.fresco-cn.org/, Chinese documents, very convenient to consult

Take a look at the official description:

Fresco is a powerful picture loading component. The Fresco is designed with a module called Image pipeline. It is responsible for loading images from the network, from the local file system, local resources. To maximize space and CPU time, it contains a level 3 cache design (level 2 memory, Level 1 files). The Fresco design has a drawees module that conveniently displays the loading diagram, freeing up memory and space consumption when the picture is no longer displayed on the screen. Fresco supports ANDROID2. 3 9) and above systems.

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

Other than that, this blog just looks at one of the fresco features:

support GIF animated picture , perhaps we will construct some custom class to implement, but too complex, also too troublesome, fresco directly to help you encapsulate

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

So start looking at how to use fresco to load a picture in GIF format.

1, must do, of course, see official documents can also know, how to introduce fresco to the project

Android Studio or Gradle
dependencies {  'com.facebook.fresco:fresco:0.6.0+'}

Idea and Eclipse are other ways to see http://www.fresco-cn.org/docs/index.html#_.

2, configure the list file to add network permissions, here to get the network GIF pictures and show the demo, loading the local GIF picture can not add network permissions

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

3. Use in Layout files

(1) In the XML file, add a namespace to set some properties for the picture

<linearlayout     xmlns:android="http://schemas.android.com/apk/res/android"      Xmlns:fresco="http://schemas.android.com/apk/res-auto">

(2) Since it is a GIF picture, of course, it is a picture, and when we import fresco into the project, there is

Com.facebook.drawee.view.SimpleDraweeView class

1 //2 //Source code recreated from a. class file by IntelliJ idea3 //(Powered by Fernflower Decompiler)4 //5 6 Package Com.facebook.drawee.view;7 8 import Android.content.Context;9 import Android.net.Uri;Ten import Android.util.AttributeSet; OneImport Com.facebook.common.Internal. preconditions; AImport Com.facebook.common.Internal. Supplier; - import Com.facebook.drawee.generic.GenericDraweeHierarchy; - import Com.facebook.drawee.interfaces.DraweeController; the import Com.facebook.drawee.interfaces.SimpleDraweeControllerBuilder; - import Com.facebook.drawee.view.GenericDraweeView; - import javax.annotation.Nullable; -  +  Public classSimpledraweeview extends Genericdraweeview { -     Private Staticsupplier<? Extends simpledraweecontrollerbuilder>Sdraweecontrollerbuildersupplier; +     PrivateSimpledraweecontrollerbuilder Msimpledraweecontrollerbuilder; A  at      Public Static voidInitialize (supplier<? extends simpledraweecontrollerbuilder>draweecontrollerbuildersupplier) { -Sdraweecontrollerbuildersupplier =Draweecontrollerbuildersupplier; -     } -  -      Public Static voidShutDown () { -Sdraweecontrollerbuildersupplier =NULL; in     } -  to      PublicSimpledraweeview (context context, Genericdraweehierarchy hierarchy) { + Super (context, hierarchy); -          This. Init (); the     } *  $      PublicSimpledraweeview (Context context) {Panax Notoginseng super (context); -          This. Init (); the     } +  A      PublicSimpledraweeview (Context context, AttributeSet attrs) { the Super (context, attrs); +          This. Init (); -     } $  $      PublicSimpledraweeview (context context, AttributeSet attrs,intDefstyle) { - Super (context, attrs, defstyle); -          This. Init (); the     } - Wuyi     Private voidinit () { the         if(! This. Isineditmode ()) { -Preconditions.checknotnull (Sdraweecontrollerbuildersupplier,"Simpledraweeview is not initialized!"); Wu              This. Msimpledraweecontrollerbuilder = (simpledraweecontrollerbuilder) sdraweecontrollerbuildersupplier.Get(); -         } About     } $  -     protectedSimpledraweecontrollerbuilder Getcontrollerbuilder () { -         return  This. Msimpledraweecontrollerbuilder; -     } A  +      Public voidSetimageuri (Uri uri) { the          This. Setimageuri (URI, (Object)NULL); -     } $  the      Public voidSetimageuri (Uri Uri, @Nullable Object callercontext) { theDraweecontroller Controller = This. Msimpledraweecontrollerbuilder.setcallercontext (Callercontext). Seturi (URI). Setoldcontroller ( This. Getcontroller ()). build (); the          This. Setcontroller (Controller); the     } -}

Simpledraweeview.class

So the label of the control that will display the GIF picture is:

<com.facebook.drawee.view.SimpleDraweeView>   </com.facebook.drawee.view.SimpleDraweeView>

Note: Simpledraweeview does not support wrap_content

The downloaded image may be inconsistent with the size of the bitmap, and if you set an error graph or try again, the dimensions of these graphs may not match the size of the downloaded diagram. If the size is inconsistent, after the image has been downloaded, assume that if the Wrap_content,view will be re-layout, change the size and position. This will cause the interface to jump. Fixed aspect ratio you can use wrap_content only when you want to display a fixed aspect ratio. If the picture you want to display remains a certain width and height ratio, if4:3, then in XML:<Com.facebook.drawee.view.SimpleDraweeView Android:id="@+id/my_image_view"Android:layout_width="20DP"Android:layout_height="wrap_content"<!--other attributes--then specify the zoom in the code: Msimpledraweeview.setaspectratio (1.33f);

Demo Code:

1<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"2xmlns:tools="Http://schemas.android.com/tools"3xmlns:fresco="Http://schemas.android.com/apk/res-auto"4Android:layout_width="match_parent"5android:layout_height="match_parent"6android:paddingleft="@dimen/activity_horizontal_margin"7android:paddingright="@dimen/activity_horizontal_margin"8android:paddingtop="@dimen/activity_vertical_margin"9Android:paddingbottom="@dimen/activity_vertical_margin"Tentools:context=". Mainactivity"> One  A<Com.facebook.drawee.view.SimpleDraweeView -Android:id="@+id/img" -Android:layout_width="400DP" theandroid:layout_height="400DP" -Fresco:placeholderimage="@mipmap/ic_launcher" -/> -  +</RelativeLayout>

Activity_main.xml

4, then the picture is the layout of the corresponding activity in the use of

(1) Initialize the fresco, pay attention to the location, used Baidu Map should understand here, remember the location on the line

super.oncreate (savedinstancestate); fresco.initialize (   This ); Setcontentview (r.layout.activity_main);

(2) To load and display the network GIF image resources

Uri uri = uri.parse ("http://img.huofar.com/data/jiankangrenwu/shizi.gif");

Draweecontroller  =                fresco.newdraweecontrollerbuilder ()                        . Seturi (URI)                        . Setautoplayanimations (true)//sets whether to play directly when the picture is loaded                        . Build ();        Img.setcontroller (Draweecontroller);       

：

First, give the control a picture placeholder, display the loaded picture when the load succeeds

As simple as that, the other fresco will help us out.

Displays the bitmap until it is loaded, downloads the picture, caches the picture, removes it from memory when the picture is no longer displayed

Fresco using Notes (i): Loading GIF pictures and playing