preface

Fresco is a great framework for loading images, but the framework itself doesn’t support zooming in and out of images with gestures. On Facebook’s official Github, Facebook has provided specific solutions, but the official demo is very difficult to run, and the functions in the official demo are complicated, so it is difficult to understand and use. So I made a test demo for everyone to exchange learning.

The development of preparation

Before development, you need to introduce fresco in your project by adding a line of code to dependencies in the build.gradle file of your Module

The compile 'com. Facebook. Fresco ": the fresco" : 0.12.0'Copy the code

Can.

Integrated Samples package

Samples is an extension package for the official Fresco demo, with the following catalog:

In this package, there are two packages that are related to gesture scaling: Gestures and Zoomable. The main function of the Gestures package is to detect gestures, the main function of the Zoomable package is to provide a draweeView that supports gesture scaling. Since I only use gesture-scaled Views in my project, I only imported these two packages.

The import method is simple, just copy Samples to the project directory.

Configure the environment

After the import is complete, you need to perform the following steps to use it normally

  1. Modify the gradle.properties file

    Add it to the gradle.properties file in the project directory

# Deps for Gradle BUILD\_TOOLS\_VERSION=23.0.2 COMPILE\_SDK\_VERSION=23 # Deps for libraries JUNIT\_VERSION=4.12 MOCKITO \ _CORE \ _VERSION = 1.10.19 ROBOLECTRIC \ _VERSION = 3.0 NINEOLDANDROID \ _VERSION = 2.4.0 SUPPORT \ _LIB \ _VERSION = 23.2.1 JSR \ _305 \ _VERSION = 3.0.0Copy the code

  1. Modify the Settings. Gradle

    Add it to settings.gradle in the project directory

    include ':samples:gestures'
include ':samples:zoomable'Copy the code

  2. Add it in your project’s build. gradle

    project.ext {
buildToolsVersion = "${BUILD_TOOLS_VERSION}"
compileSdkVersion = COMPILE_SDK_VERSION.toInteger()
}Copy the code

    ​

After the above two steps, you should be able to use ZoomalbeDraweeView, which supports zooming.

Using the tutorial

View individual images

  1. Create a new activity_zoomable.xml layout file

    

	
 
Copy the code

    ​

  2. ZoomableActivity. Java file

public class ZoomableActivity extends Activity { private ZoomableDraweeView draweeView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); FLog.setMinimumLoggingLevel(FLog.VERBOSE); Set listeners = new HashSet<>(); listeners.add(new RequestLoggingListener()); ImagePipelineConfig config = ImagePipelineConfig.newBuilder(this) .setRequestListeners(listeners) .setBitmapsConfig(Bitmap.Config.ARGB_8888) .build(); Fresco.initialize(this, config); setContentView(R.layout.activity_zoomable); DraweeController controller = Fresco.newDraweeControllerBuilder() .setUri("http://pic13.nipic.com/20110326/2457331_232645672000_2.jpg") .build(); draweeView = (ZoomableDraweeView) findViewById(R.id.zoomableView); draweeView.setController(controller); }}Copy the code

The method used is similar to SimpleDraweeView, except that Fresco initialization requires passing in the ImagePipelineConfig object, and ZoomableDraweeView does not directly set the image URI. Instead, you need to set it through the DraweeController object.

Through the above code, has been able to complete the loading of the picture and picture zoom in and out operation. But the actual development often need to display a group of images, so here is how to use ZoomableDraweeView to display a group of images, and support gesture zooming in and out function.

Show multiple images

  1. Create a new activity_zoomable_list.xml file

    
 
	
     
         
     
	
     
         
     
	
     
         
     
	
 
Copy the code

    ​

  2. ZoomableListActivity. Java file

    public class ZoomableListActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); FLog.setMinimumLoggingLevel(FLog.VERBOSE); Set listeners = new HashSet<>(); listeners.add(new RequestLoggingListener()); ImagePipelineConfig config = ImagePipelineConfig.newBuilder(this) .setRequestListeners(listeners) .setBitmapsConfig(Bitmap.Config.ARGB_8888) .build(); Fresco.initialize(this, config); setContentView(R.layout.activity_zoomable_list); MyPagerAdapter adapter = new MyPagerAdapter(); ViewPager pager = (ViewPager) findViewById(R.id.pager); pager.setAdapter(adapter); }}Copy the code

  3. MyPagerAdapter. Java file

    public class MyPagerAdapter extends PagerAdapter{ public Object instantiateItem(ViewGroup container, int position) { FrameLayout page = (FrameLayout) container.getChildAt(position); ZoomableDraweeView zoomableDraweeView = (ZoomableDraweeView) page.getChildAt(0); DraweeController controller = Fresco.newDraweeControllerBuilder() .setUri("http://pic25.nipic.com/20121112/5955207_224247025000_2.jpg") .build(); zoomableDraweeView.setController(controller); zoomableDraweeView.setTapListener(createTapListener(position)); page.requestLayout(); return page; } public void destroyItem(ViewGroup container, int position, Object object) { FrameLayout page = (FrameLayout) container.getChildAt(position); ZoomableDraweeView zoomableDraweeView = (ZoomableDraweeView) page.getChildAt(0); zoomableDraweeView.setController(null); } @Override public int getCount() { return 3; } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } private GestureDetector.SimpleOnGestureListener createTapListener(final int position) { return new GestureDetector.SimpleOnGestureListener() { @Override public void onLongPress(MotionEvent e) { Log.d("MyPagerAdapter", "onLongPress: " + position); }}; }}Copy the code

    In the code above, I display multiple ZoomableDraweeViews through pagerView (in real development, the pagerView should be initialized using the method of dynamically adding a Pager). The method is similar to displaying a single image, except for displaying multiple images using a ViewPager.

summary

From the code above, if the project is using Fresco as the image loading framework, it’s pretty easy to use the ZoomableDraweeView in the Samples package to zoom in and out of images with gestures. There are many extensions of Fresco in the official Facebook demo, so I recommend that you use the official Facebook Demo for more extensions of fresco’s image manipulation.

Project code

The project code is stored in a demo collection that I have been practicing writing and downloaded by SVN checkout command.

Note: Here’s a quick tip for using Github. To download a single OR part folder in a project, use the SVN checkout command.

To do this, copy the specific folder path and replace /tree/master/ with /trunk/. For example, in this example:

The project address is: github.com/DobbyTang/A…

The download address is github.com/DobbyTang/A…

The SVN checkout github.com/DobbyTang/A…

6. If you encounter this prompt, (R)eject, accept (t)emporarily or accept (p)ermanently? , enter P.