Android imitation wechat picture click full screen effect

No more nonsense. Let's see the effect first:

First wechat

Then imitate

Let's talk about the implementation principle first, and then analyze it step by step

There are two activities here. One is the home page and the other is the page that displays our picture effects. The parameters are transmitted through intent. The material content comes from the network. (thanks to the smart mushroom) the pictures are asynchronous under glide. The important things under glide are said three times, and then the animation is used to enlarge and display them (there is no implementation of downloading the original image. Anyway, it is the same, and the animation doesn't need to be easier).

OK, let's look at the analysis

Obj, two objects are created in the directory. One is used to process the image size information and location information of the display page, and the other is used to attach URL and resolution

The Config class is our URL. There is nothing else.

Let's look at it page by page. Let's first look at mainactivity

What he does is very simple. He initializes some information on the next page and then passes it through intent. He doesn't do any redundant operations

Specific business class showimageactivity

The general process is as follows: 1. Get the screen information, the parameters passed from the previous class and some calculations on the coordinate points in init (), and then use the handler to start the animation effect. 2

2. Showimageview() handles the implementation of animation. (the animation effect is implemented by compile 'com. Facebook. Bound: Bound: 0.3.8'. There is no tutorial here. The portal is given: http://facebook.github.io/rebound/ ）

Summary:

The overall implementation is not too difficult, because there is a framework, so that complex animation parts do not need to be written by themselves. Just do business in the callback under the call. Here are some technical points used in the process

1. Zoom mode of image: Android: scaletype controls how the image is resized / moved to match the size of ImageView.

Imageview.scaletype/android: scaletype values have different meanings:

Center / center is displayed in the center according to the original size of the picture. When the length / width of the picture exceeds the length / width of view, the middle part of the picture will be intercepted for display

CENTER_ Crop / centercrop enlarges the size of the picture in proportion to the center display, so that the length (width) of the picture is equal to or greater than the length (width) of the view

CENTER_ Inside / centerinside displays the contents of the picture completely in the center. By scaling down or the original size, the length / width of the picture is equal to or less than the length / width of the view

FIT_ Center / fitcenter enlarges / reduces the picture to the width of the view in proportion and displays it in the middle

FIT_ End / fitend enlarges / reduces the picture to the width of the view and displays it in the lower part of the view

FIT_ Start / fitstart enlarges / reduces the picture to the width of the view and displays it in the upper part of the view

FIT_ XY / fitxy picture  Do not scale up / down to the size of the view display

Matrix / matrix is drawn with matrix, and dynamically reduced and enlarged pictures are displayed.

**Note that the names of pictures in the drawable folder cannot be capitalized

2. Common properties of layout:

This example is just an example. Some coordinates and styles are written dead. If they are to be applied to the actual project, it is still necessary to do some work. During the operation, it is also tested to load multiple pictures. There is no oom yet, and the memory usage diagram is added (it has been very stable)

Write a picture description here

Code address: https://github.com/ddwhan0123/BlogSample/tree/master/ImitateWeChatImage Source code download address: https://github.com/ddwhan0123/BlogSample/blob/master/ImitateWeChatImage/ImitateWeChatImage.zip?raw=true

The above is the whole content of this article. I hope it can help you realize the full screen effect of Android imitation wechat picture click. Thank you for reading.