Intent toGallery = new Intent(Intent.ACTION_GET_CONTENT);
toGallery.setType("image/*");
toGallery.addCategory(Intent.CATEGORY_OPENABLE);
startActivityForResult(toGallery, REQUEST_GALLERY);
Copy the code

Let’s take a look at what the Matisse picture selector looks like first:

Zhihu App supports day and night mode, so Matisse also needs this function. However, as an open source library, we cannot rely on the implementation of the day and night mode of the main App. We built two sets of themes for Matisse, the blue theme of Zhihu and the dark theme of Dracula. They do this by defining a set of custom properties and then each defining a theme on top of that, which they apply when creating the image selector Activity. If two built-in themes are not enough for your needs, you can also define your own theme.

The call to Matisse is very simple, using the Builder mode, just need to pass in the desired parameters at the time of the call, you don’t have to worry about the rest. An example of a call is as follows:

Matisse .from(MainActivity.this) .choose(MimeType.of(MimeType.JPEG, MimeType.PNG, MimeType.GIF)) .countable(true) .maxSelectable(9) .addFilter(new GifSizeFilter(320, 320, 5 * Filter.K * Filter.K)) .gridExpectedSize(getResources() .getDimensionPixelSize(R.dimen.grid_expected_size)) RestrictOrientation (ActivityInfo. SCREEN_ORIENTATION_UNSPECIFIED). ThumbnailScale (0.85 f) imageEngine (new GlideEngine ())  .forResult(REQUEST_CODE_CHOOSE);Copy the code

From the call example above, you should also be able to guess roughly what our interface does:

  • Support includes JPEG, PNG, GIF image type selection. Video content selection may also be supported later;

  • Support for orderly selection of images, i.e. selection of images with 1, 2, 3, 4… Style CheckBox;

  • Supports specifying a maximum number of options;

  • Support to define filter rules, you can specify a specific image type set, fully custom filter rules;

  • You can define the scale of the image thumbnail. The bigger the zoom, the clearer the thumbnail, but the slower the thumbnail loads when the list slides.

  • Supports horizontal and vertical screens. Matisse does the state saving work, so there is no need to worry about the application of configuration changes, including vertical screen conversion;

  • Different image loading libraries are supported, Glide and Picasso are currently supported. If Glide and Picasso are not what you need, you can define your own image loading engine by implementing an image loading interface. Sorry, we don’t support Fresco for now.

In terms of data loading, we use Loader as the loading mechanism of photo album and photo album image data, which can easily get the image data in the system MediaStore asynchronously. As long as the callback interface is defined, the data will be automatically returned to the UI thread. In addition, when the Configuration is changed, the page can be connected to the previous Loader without data query. If you haven’t used a Loader, recall AsyncTask, they feel similar to each other, but Loader is a much more powerful asynchronous loading framework. Students interested in Loader can refer to the official documentation of Loaders.

Instead of using architecture like MV* to help decouple the code hierarchically, we tried to avoid adding too many third-party library dependencies. Getting the image data and presenting it is a bit of a chore, so the library code is not very elegant. But Matisse shields you from the verbose logic and details of the interface presentation. All you have to do is add dependencies and call them with a few lines of code.

Matisse is easy to use and can meet your basic needs for image selection. We have already used Matisse in Zhihu Android App and opened source it on GitHub. Interested students can have a look at the source code zhihu/Matisse. If you want to make fun of it or make a bug, you can make an issue. Welcome to PR, too.

Finally, thanks to designer @Cheng Yingwei.

Henri Matisse was a French painter, founder and chief representative of fauvism, sculptor and printmaker. –
Wikipedia – Henri Matisse