Shulou(Shulou.com)06/03 Report--

This article mainly introduces Android how to develop a powerful picture selector, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Image selector is a feature that is often used in Android development, especially for social applications, such as avatar settings, such as sending pictures. Natural ImagePicker has many wheels. Today we introduce a powerful wheel SImagePicker.

Introduction

First of all, the powerful function.

First of all, the basic picture reading and display, as well as picture update monitoring

Oversized picture preview, such as a 19m 10000cm 5000px picture.

The cropping function of pictures

Rich configurable items, support photo selection, select the definition of the number of photos, support the selected image filtering

Support multiple image loaders (Fresco,Glide, etc.)

Don't talk nonsense, let's see the effect first.

* avatar mode, the second one selects multiple images (including animation and smooth jump), and the third is a fragment loaded oversized image (19.5m _ (10000m) 5000px)

Avatar mode, supports cropping

Choose more pictures and jump to a smooth page

Large image preview, you can see the gradient loading

How to use

1. Initialize first (it is recommended to call it in the oncreate of Application)

SImagePicker.init (new PickerConfig.Builder (). SetAppContext (this) .setImageLoader (new FrescoImageLoader ()) .setToolbaseColor (getColor (R.color.colorPrimary)) .build ())

two。 Call where you need to select a picture

SImagePicker .from (MainActivity.this) .maxCount (9) .rowCount (3) .pickMode (SImagePicker.MODE_IMAGE) .fileInterceptor (new SingleFileLimitInterceptor ()) .forResult (REQUEST_CODE_IMAGE)

Configurable item

1. Global configuration (that is, the PickerConfig passed in during initialization, which works throughout the use of SImagePicker)

The configuration parameter means the picture loader used by setImageLoader (ImageLoader). Fresco and Glide ImageLoader are implemented in the demo project. You can refer to the main tone of setToolbarColor (int) Picker. The default value is Context used internally in App's primaryColorsetAppContext (Context) Picker, and you can input ApplicationContext.

two。 Single configuration (that is, the parameter passed in each call to SImagePicker, which is valid only for this call)

The configuration parameter means that from (Activity or Fragment) can be accessed from Activity or Fragment by calling the image selector. The result of * will be returned in onActivityResult (). Now the returned result has two values: the path list data.getStringArrayListExtra (PhotoPickerActivity.EXTRA_RESULT_SELECTION) of the image selected by the user; whether the user has selected the original image data.getBooleanExtra (PhotoPickerActivity.EXTRA_RESULT_ORIGINAL, false); and the number of * * selections allowed by maxCount (int) this time. Default is 1. For example, send a maximum of 9 pictures to WeChat moments.

RowCount (int)

The picture list shows how many pictures setSelected (List) has been selected by default pickMode (int) picture selection mode, now there are two modes: avatar mode and normal mode. Avatar mode when a picture is selected, it jumps to the image cropping page by default, and only one image can be selected by default in cropFilePath (String) avatar mode. ShowCamera (boolen) whether to display the text message displayed in the lower right corner of the photo portal pickText (int) Picker (such as configuration selection, send, finish)

FileInterceptor (FileChooseInterceptor)

Image filter, for example, if the size of a single picture selected by the user is limited, it can be written in this interceptor. When the user chooses too large a picture, he can prompt and filter forResult (int requestCode) to open the image selector and pass in requestCode.

Get the result

In the Fragment or Activity that calls the picture selector

Override protected void onActivityResult (int requestCode, int resultCode, Intent data) {super.onActivityResult (requestCode, resultCode, data); if (resultCode = = Activity.RESULT_OK & & requestCode = = REQUEST_CODE_IMAGE) {final ArrayList pathList = data.getStringArrayListExtra (PhotoPickerActivity.EXTRA_RESULT_SELECTION); final boolean original = data.getBooleanExtra (PhotoPickerActivity.EXTRA_RESULT_ORIGINAL, false);}}

Realize

Reading CursorLoader from picture database

The function of loader / loader (Loader) is introduced into Android3.0, which is mainly used to load database asynchronously. Features of the loader Loader:

Loader provides the ability to load data asynchronously

The loader monitors data resources and sends new results when the content changes

When rebuilding after a configuration change, the loader automatically reconnects the loader cursor, so there is no need to re-query the data.

This project also uses loader to load and monitor image data. For Photo and Album, that is, pictures and photo albums, there is a loader and a controller,loader respectively to load the corresponding data. Controller is mainly used to refresh and release loader after data is read.

Correspondence in source code

PhotoLoader initialization

Public static CursorLoader newInstance (Context context, Album album, long minSize) {if (album = = null | | album.isAll ()) {return new PhotoLoader (context, MediaStore.Images.Media.EXTERNAL_CONTENT_URI, PROJECTION, SELECTION_SIZE, new String [] {minSize + "}, ORDER_BY);} return new PhotoLoader (context, MediaStore.Images.Media.EXTERNAL_CONTENT_URI, PROJECTION, MediaStore.Images.Media.BUCKET_ID +" =? And ("+ SELECTION_SIZE +") ", new String [] {album.getId (), minSize +"}, ORDER_BY);}

Oversized picture loading

How to display oversized pictures is a thorny problem.

Like this picture.

Http://7xpb9x.com1.z0.glb.clouddn.com/2017/01/20/b578e4755a32ac56a9c4b9a1f7e2822d.jpg

10000 to 5000 pixels, close to 20m.

It is certainly impossible to load all of these pictures into memory at once, and it can be calculated that even if it is RGB_565, all load will take up almost 90m of memory, which is obviously impossible. You can look back at the third demo gif, obviously when the user opens a picture, by default, it does not require to see the details, when the user clicks on an area to enlarge, it will only need a clear picture of this area. So the basic idea of how to show this kind of super-large picture is

First, get the file path, read out the width and height of the picture, and calculate a Samplesize that shows the full picture according to the width and height of the screen and the picture, and load a panoramic picture according to this value.

Divide the picture into blocks, and the blocks will be divided into a list of blocks under different magnification (that is, select different SampleSize). For example, how to divide blocks when magnifying 2 times and magnifying 4 times?

When the user clicks to enlarge an area, the corresponding block is selected for load and rendering according to the magnification and the current center point.

SubsamplingImageView is mainly used in the SImagePicker project.

And some modifications have been made according to the requirements of picker to realize the preview of the super-large image.

Picture list display

Show

Due to the use of cursorLoader, CursorAdapter can be used for ListView, but there is no corresponding Adapter for RecyclerView, so you can see that a RecycleCursorAdapter has been implemented in the source code, which is used to automatically refresh the data obtained from cursor.

Compatible

In order to be compatible with multiple image loaders, SImagePicker abstracts an ImageLoader interface to allow users to customize the corresponding picture loaders.

Use suggestion

SImagePicker provides dependent libraries on jitpack, which can be quickly connected to the business, but because most APP have various business requirements for the use of ImagePicker, and SImagePicker only abstracts some common configurations to allow users to quickly integrate, it is recommended that users use SImagePicker as source code references as much as possible, which is not only convenient for debugging, but also quickly understand the implementation principle. This kind of UI component code should be easy to read because it's not complicated.

Thank you for reading this article carefully. I hope the article "how to develop a powerful picture selector with Android" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.