Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction of the Facebook’s Fresco

Introduction of the Facebook’s Fresco

An Android library for managing images and the memory they use.

6dd0483f1353a4a359e92633cfd65c64?s=128

Daichi Furiya (Wasabeef)

April 14, 2015
Tweet

Transcript

  1. Introduction of the Facebook’s Fresco CyberAgent, Inc. ߱໼ େ஍

  2. About Me wasabeef @wasabeef_jp

  3. About Fresco • Image Manager • Streaming • Animations •

    Drawing • Loading
  4. Quick Start

  5. Adding Fresco to your Project dependencies { // your app's

    other dependencies compile 'com.facebook.fresco:fresco:0.2.0+' }
  6. Adding Fresco to your Project public class MainApplication extends Application

    { ! @Override public void onCreate() { super.onCreate(); Fresco.initialize(this); } }
  7. Adding Fresco to your Project <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/image" android:layout_width="300dp" android:layout_height="300dp"/> ! </RelativeLayout>
  8. Adding Fresco to your Project public class MainActivity extends ActionBarActivity

    { ! @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ! SimpleDraweeView drawee = (SimpleDraweeView) findViewById(R.id.image); ! Uri uri = Uri.parse(“http://bit.ly/1PDoTv2"); drawee.setImageURI(uri); } }
  9. Supported URIs 5ZQF 4DIFNF 'FUDINFUIPEVTFE 'JMFPOOFUXPSL http://, https:// HttpURLConnection or

    network layer 'JMFPOEFWJDF pMF 'JMF*OQVU4USFBN $POUFOUQSPWJEFS DPOUFOU $POUFOU3FTPMWFS "TTFUJOBQQ BTTFU "TTFU.BOBHFS 3FTPVSDFJOBQQ SFT 3FTPVSDFTPQFO3BX3FTPVSDF
  10. Concepts • DraweeView • DraweeHierarchy • DraweeController • The Image

    Pipeline
  11. Drawee Guide

  12. Using Drawees in XML <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view" android:layout_width="20dp" android:layout_height="20dp" fresco:fadeDuration="300" fresco:actualImageScaleType="focusCrop"

    fresco:placeholderImage="@color/wait_color" fresco:placeholderImageScaleType="fitCenter" fresco:failureImage="@drawable/error" fresco:failureImageScaleType="centerInside" fresco:retryImage="@drawable/retrying" fresco:retryImageScaleType="centerCrop" fresco:progressBarImage="@drawable/progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="1000" fresco:backgroundImage="@color/blue" fresco:overlayImage="@drawable/watermark" fresco:pressedStateOverlayImage="@color/red" fresco:roundAsCircle="false" fresco:roundedCornerRadius="1dp" fresco:roundTopLeft="true" fresco:roundTopRight="false" fresco:roundBottomLeft="false" fresco:roundBottomRight="true" fresco:roundWithOverlayColor="@color/corner_color" fresco:roundingBorderWidth="2dp" fresco:roundingBorderColor=“@color/border_color"/>
  13. Animated Images • Fresco supports animated GIF and WebP images.

    • Control of animation
  14. Resizing and Rotating public class ResizeOptions { public final int

    width; public final int height; ! public ResizeOptions(int width, int height) { /** **/ } }
  15. Listening to Download Events public interface ControllerListener<INFO> { void onSubmit(String

    var1, Object var2); ! void onFinalImageSet(String var1, INFO var2, Animatable var3); ! void onIntermediateImageSet(String var1, INFO var2); ! void onIntermediateImageFailed(String var1, Throwable var2); ! void onFailure(String var1, Throwable var2); ! void onRelease(String var1); }
  16. Modifying the Image public interface Postprocessor { void process(Bitmap var1);

    ! String getName(); } public interface Postprocessor { ! void process(Bitmap var1); ! String getName(); }
  17. Image Pipeline Guide

  18. Modifying the Image public interface Postprocessor { void process(Bitmap var1);

    ! String getName(); }
  19. Configuring the Image Pipeline • Progressive JPEGs • Configuring the

    disk cache • Keeping cache stats
  20. Third Party Libraries

  21. Using Other Network Layers public interface Postprocessor { void process(Bitmap

    var1); ! String getName(); } dependencies { // your app's other dependencies compile ‘com.facebook.fresco:fresco:0.2.0+’ compile ‘com.facebook.fresco:imagepipeline-okhttp:0.2.0+' }
  22. Using Other Image Loaders public interface Postprocessor { void process(Bitmap

    var1); ! String getName(); } dependencies { // your app's other dependencies compile ‘com.facebook.fresco:fresco:0.2.0+’ compile ‘com.facebook.fresco:drawee-volley:0.2.0+' }
  23. Thanks.