Android imitation wechat picture click browsing effect

In this article, let's make a click browsing effect similar to wechat pictures. After clicking the small picture, it will be enlarged to the full screen display, with a 2D smooth transition effect in the middle.

The idea is as follows:

First, jump from the picture thumbnail interface to the picture details page. You should jump from one activity to another. The picture details page also has many operations. It is not very good to use view or dialog. So now the difficulty is how to make the ImageView of the previous interface zoom and cut animation in another interface. Secondly, the ImageView of the general thumbnail interface is square and center_ Of the crop scaling attribute. CENTER_ The crop attribute will cause the bitmap displayed in the ImageView to be cut to achieve the effect of filling. The ImageView of the details page is generally fit_ Zoom attribute of center. Therefore, to ensure the smoothness of the jump animation, the following changes should be made:

1. The scaling of bitmap is because the scaling of thumbnail and detail map is certainly different. 2. The translation of the bitmap position, because the position of the thumbnail is uncertain, we need to make it translate to the middle. 3. Bitmap cut because center_ Crop is cut, not fit_ If the center is not cut, the content areas displayed in the two figures are different, so the smooth transformation of the area should also be displayed.

To complete the above effect, if it only refers to an animation transformation of ImageView, I don't think it can meet this requirement. So I rewritten ImageView to complete the above transformation.

Customize smoothimageview • set initial information, mainly initial width, height and position

• start performing entry or exit actions

• the entry or exit action will immediately call OnDraw to redraw

OnDraw will call the following steps: • initialize transfrom, mainly the zoom scale of the picture after the action is executed, and the position information of the start area and end area

• set the zoom ratio and position before the start of the action according to whether to enter or exit the operation

• start the transformation action, mainly setting the start area, start zoom ratio, end area and end zoom ratio according to whether to enter or exit the action. Then calculate the area information and zoom ratio of each position in the middle through the attribute animation, and redraw the view during the monitoring process of the animation, so as to form a smooth transition effect from the start area to the end area.

• finally, let's take a look at the animation drawing process: get the transformation matrix of the picture, first set a zoom to the matrix according to the current scale, and then set a translation to the matrix according to the difference between the current picture and the display area, so as to realize center_ Effect of crop

Start canvas drawing by translating and cutting the area, and then associating the above matrix

So far, the content of custom smoothimageview is almost finished. Let's take a look at how to use it.

Using smoothimageview

• access

• exit

In the custom view, we also implement the callback after the exit operation is successful. For example, after the exit is successful in the demo, the current activity will be destroyed.

Finally, let's take a look at the running effect diagram!

Source code download: http://xiazai.jb51.net/201609/yuanma/Android2DImageView (jb51.net).rar

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.