Picture Loading Frame Selection Next

Ali P7 Mobile Internet Architect Advanced Video (Updated Daily) Free Learning Click: https://space.bilibili.com/474380680
This article will illustrate the Picasso analysis and the use of Fresco to illustrate the Picture Loading Framework selection:

1. Picasso analysis

Picasso is a picture loading framework on Square's open source Android platform

Core Classes:

Picasso: The manager responsible for downloading, transforming, caching pictures. When it receives a request for downloading pictures, it creates a Request and submits it to Dispatcher

Dispatcher: Dispatcher looks for the corresponding processor RequestHandler and submits the request with the processor to the thread pool for execution

Picture loading steps:

Create->Entry->Execute->Decode->Change->Batch->Finish->Distribution->Display

Use

Picasso.get().load(url).into(first_img)

//Load a picture and rotate 45 degrees
Picasso.get()
        .load(URL)
        .rotate(45f)
        .placeholder(R.drawable.placeholder_disk)
        .into(imgOne);

//Load a picture and set a callback interface
Picasso.get()
        .load(URL)
        .placeholder(R.drawable.placeholder_disk)
        .into(imgOne, new Callback() {

            @Override
            public void onSuccess() {

            }

            @Override
            public void onError(Exception e) {

            }
        });

//Preload a picture
Picasso.get().load(URL).fetch();

//Load a picture synchronously, note that it can only be called in a child thread and that Bitmap will not be cached in memory.
new Thread() {
    @Override
    public void run() {
        try {
            final Bitmap bitmap = Picasso.get().load(URL).get();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}.start();

//Load a picture, rotate it, and add a Transformation that can handle various changes to the picture, such as a circular avatar.
Picasso.get().load("url").rotate(10).transform(new Transformation() {
    @Override
    public Bitmap transform(Bitmap source) {
        //Processing Bitmap
        return null;
    }

    @Override
    public String key() {
        return null;
    }
}).into(imgTwo);

//Load a picture and zoom in and out as centerInside() for the specified size. Set loading priority to high. Note centerInside() or centerCrop()
//Only one can be used at the same time, and resize() or resizeDimen() must be specified;
Picasso.get().load(URL)
        .resize(400, 400)
        .centerInside()
        .priority(Picasso.Priority.HIGH)
        .into(imgTwo);

//Load a picture and set a tag, which can be tentatively or continually loaded by tag. It can be used when the ListView scroll is tentative. Stop scrolling to restore the load.
Picasso.get().load(URL).tag(getContext()).into(imgTwo);
Picasso.get().pauseTag(getContext());
Picasso.get().resumeTag(getContext());

2. Use of Fresco

There are many picture loading frameworks, such as Glide, Fresco, Picasso, and so on.Glide is favored by many programmers because of its small size and powerful caching mechanism. Although Fresco is large and its caching mechanism is not as powerful as Glide, it is better than having some cool effects (progress bar, fade-in effect) and many others are using it.Today let's talk about the use of Fresco.

1. Configuring the environment

Using Fresco requires importing dependencies in build.gradle first:

 // Fresco Required Dependency
    compile 'com.facebook.fresco:fresco:0.12.0'
    // When WebP is supported on machines on API < 14, add
    compile 'com.facebook.fresco:animated-base-support:0.12.0'
    // Support for GIF Motion, need to add
    compile 'com.facebook.fresco:animated-gif:0.12.0'
    // Support for WebP (static + dynamic), need to add
    compile 'com.facebook.fresco:animated-webp:0.12.0'
    compile 'com.facebook.fresco:webpsupport:0.12.0'

If you need to download pictures from the network, you need to configure network permissions in the AndroidManifest.xml file:

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

Finally, initialize Fresco in the Application of the project:

public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        // Initialize Fresco
        Fresco.initialize(this);
    }
}

Don't forget to add the name attribute to the Application in the AndroidManifest.xml file:

 <application
        android:name=".MyApplication"
        ......
    </application>

2,SimpleDraweeView

2.1, XML attributes

    Fresco gives us a SimpleDraweeView control where we can load pictures directly.Fresco integrates many properties into this control, which is simple and practical.The following are common properties in SimpleDraweeView:
 fresco:actualImageScaleType: The scaling style of the actually loaded picture
        fresco:backgroundImage: underlying picture resources
        fresco:fadeDuration: Time interval between progressive disappearance of progress bar and placeholder pictures and progressive display of loaded pictures
        fresco:failureImage: Picture resource displayed when loading fails
        fresco:failureImageScaleType: Scaling style for images loaded when loading fails
        fresco:overlayImage: Image resource that covers a picture on the surface of the displayed picture
        fresco:placeholderImage: Placeholder Picture Resource
        fresco:placeholderImageScaleType: Scaling style for placeholder pictures
        fresco:progressBarAutoRotateInterval: Progress bar picture rotation cycle
        fresco:progressBarImage: Progress Bar Picture Resources
        fresco:progressBarImageScaleType: Scaling style for progress bar pictures
        fresco:retryImage: Image resources prompted for reload
        fresco:retryImageScaleType: Scaling style for images prompting reload
        fresco:roundAsCircle: Cut the picture into a circle
        fresco:viewAspectRatio: Picture aspect ratio

The code in our XML layout file is as follows:

<?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"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/id_main_sdv_sdv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        fresco:actualImageScaleType="focusCrop"
        fresco:fadeDuration="3000"
        fresco:failureImage="@mipmap/ic_launcher"
        fresco:failureImageScaleType="centerInside"
        fresco:placeholderImage="@mipmap/ic_launcher"
        fresco:placeholderImageScaleType="fitCenter"
        fresco:progressBarAutoRotateInterval="1000"
        fresco:progressBarImage="@mipmap/ic_launcher"
        fresco:progressBarImageScaleType="centerInside"
        fresco:retryImage="@mipmap/ic_launcher"
        fresco:retryImageScaleType="centerCrop"
        fresco:roundAsCircle="false"
        fresco:viewAspectRatio="1.6" />

    <Button
        android:id="@+id/id_main_btn_load"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="20.0dip"
        android:text="Start Load Image" />

</RelativeLayout>

2.2. Notes
(1) The width and height of the SimpleDraweeView control cannot be set to wrap_content, but to match_parent, a specific value, or to set the aspect ratio using the viewAspectRatio property.

(2) If multiple pictures are loaded in one page, do not place SimpleDraweeView directly in ScollView. RecyclerView, ListView, or GridView are recommended because SimpleDraweeView in ScrollView holds memory until Activity or Fragment is destroyed.

(3) When using SimpleDraweeView, do not use attributes that are present in the imageView but not in the View.

3. Framework use

3.1. Simple use
Go to SimpleDraweeView like other controls like TextView, Button, and then load the network picture by calling the following code:

3.2. JAVA Code Setting Properties
GenericDraweeHierarchy allows us to dynamically set the properties of the SimpleDraweeView control in JAVA code.It is important to note that if properties are set in the JAVA code, then none of the properties set in the XML file will be valid.An example code is as follows:

 // Code sets the properties of SimpleDraweeView (overrides all the properties set by XML, that is, any property not present here in the XML will fail)
        // Note: A GenericDraweeHierarchy cannot be shared by multiple SimpleDraweeView s
        GenericDraweeHierarchy hierarchy = new GenericDraweeHierarchyBuilder(getResources())
                .setFadeDuration(3000)
                .setPlaceholderImage(R.mipmap.ic_launcher)
                .setPlaceholderImageScaleType(ScalingUtils.ScaleType.FIT_XY)
                .setProgressBarImage(new ProgressBarDrawable()) // Show progress bar (progress bar that comes with Fresco)
                .build();
        // Set Picture Round Corners
        RoundingParams roundingParams = new RoundingParams();
        roundingParams.setRoundAsCircle(false); // Do not cut pictures into circles
        roundingParams.setCornersRadius(200);
        hierarchy.setRoundingParams(roundingParams);
        // Set properties for SimpleDraweeView
        sdv.setHierarchy(hierarchy);

Note: You cannot set the same GenericDraweeHierarchy object to multiple SimpleDraweeView s!
3.3. Setting Download Events

        sdv.setController(Fresco.newDraweeControllerBuilder()
                .setControllerListener(new BaseControllerListener<ImageInfo>() {
                    @Override
                    public void onFinalImageSet(String id, ImageInfo imageInfo, Animatable animatable) {
                        // Method triggered when all pictures are loaded successfully
                        int width = imageInfo.getWidth();
                        int height = imageInfo.getHeight();
                        QualityInfo qualityInfo = imageInfo.getQualityInfo();
                        int quality = qualityInfo.getQuality();
                        boolean isOfFullQuality = qualityInfo.isOfFullQuality();
                        boolean isOfGoodEnoughQuality = qualityInfo.isOfGoodEnoughQuality();
                    }

                    @Override
                    public void onIntermediateImageSet(String id, ImageInfo imageInfo) {
                        // Callback method when loading progressive pictures
                    }

                    @Override
                    public void onFailure(String id, Throwable throwable) {
                        // Callback methods when loading pictures fails
                    }
                })
                .setUri("http://image5.tuku.cn/pic/wallpaper/fengjing/menghuandaziranmeijingbizhi/009.jpg")
                .build());

3.4, Progressive Picture
Progressive Picture is a loading mode that supports pictures from blurry to clear.The code is as follows:

   sdv.setController(Fresco.newDraweeControllerBuilder()
                        .setImageRequest(
                                ImageRequestBuilder.newBuilderWithSource(
                                        Uri.parse("http://image5.tuku.cn/pic/wallpaper/fengjing/menghuandaziranmeijingbizhi/009.jpg"))
                                        .setProgressiveRenderingEnabled(true)
                                        .build())
                        .setOldController(sdv.getController())
                        .build());

This is an introduction to the basic usage of Fresco, and I hope it will help you ~~
Reference resources: https://www.cnblogs.com/ldq2016/p/6669009.html
https://www.jianshu.com/p/ef3158f76045
Ali P7 Mobile Internet Architect Advanced Video (Updated Daily) Free Learning Click: https://space.bilibili.com/474380680

Tags: Operation & Maintenance Android xml network Java

Posted on Sun, 17 Nov 2019 21:47:23 -0500 by richardandrewle