preface
Large image browsing is almost a must for apps, because the images displayed in the list are usually compressed thumbnails for performance, speed and server bandwidth. If the user wants to see a detailed large picture, he/she needs to click the picture to enter the large picture browsing interface.
How to do large picture browsing interface?
Roughly we can use a dialog box, put the ViewPager inside, and then zoom in with the PhotoView. I used to do the same thing. But this is not Material Design, because the interface switch is too abrupt, there is no silky transition effect.
No PIC say Diao
Here’s what I achieved:
Previously on Android terminal, I think the best big picture browsing experience is the effect of nuggets App, I should be comparable to the effect of nuggets. Try it out and you’ll find it’s probably smoother and silky than the Nuggets.
The principle of analysis
There are several points in principle:
- Transitions between images
The transition between images refers to the transition from small image to large image, without any jump changes in the middle, it needs to be smooth and natural transition. The user’s ImageView to consider may be a variety of ScaleTypes. How do you make a perfect transition for any ScaleType?
There’s only one answer: Martirx.
Because no matter what the ImageView’s ScaleType is, it will eventually compute a DrawMartix, which represents the pixel matrix of the image. So the transition to Martix was the right thing to do, and in the process I explored many options, such as width and height, and calculating Martix manually.
As for how to transition Martix, we can easily write a ValueAnimator or use the system’s ChangeImageTransform to do this. I chose the latter. Look at the source code.
- Transitions between interfaces
The transition between interfaces refers to the transition from the caller’s interface to the big picture interface. This is actually a popover effect, which is accompanied by a gradient of background light and shade, which is easy to implement. You can use PopupWindow, Dialog, whatever. I rely directly on popovers provided by XPopup(one of my popovers).
- Draggable container
As you can see from the driven image, large view browsing can be closed by clicking, or by swiping up and down with gestures. Dragable containers are not too difficult to implement, either by using TouchEvent itself or ViewDragHelper. I prefer the latter. The core drag-and-drop code is actually no more than 50 lines.
Just drag and drop is easy to do, but when it comes to the ViewPager and the PhotoView inside it, it’s a little tricky. You need to take care of the slide preference with the ViewPager and whether the PhotoView allows external drag and drop. Look at the code for more details.
How to use
The effect above, which I built directly into XPopup, provides a wrapper. This is how it works:
XPopup.get(getContext()).asImageViewer(imageView, position, list, new OnSrcViewUpdateListener() {
@Override
public void onSrcViewUpdate(ImageViewerPopupView popupView, int position) {
// When Pager switches images, the source View needs to be updated
popupView.updateSrcView((ImageView) recyclerView.getChildAt(position));
}
}).show();
Copy the code
For details, please check: github.com/li-xiaojun/…
Finally: This is a small contribution to simplifying Android development, which used to be hard.