Android realizes the axis rotation effect, and Android makes another kind of picture browser

There are many nice examples in Android API demos. The code of these examples is very well written. If you study every example in API demos thoroughly, congratulations on becoming a real Android expert. This can also be regarded as pointing out a direction for some confused Android developers to improve their ability. There are many examples in API demos. Today we will imitate one of the 3D transformation effects to realize a different kind of image browser.

Since it is the special effect of central axis rotation, the function of 3D transformation must be used. In Android, if you want to achieve 3D effects, you generally have two options: one is to use open GL es, and the other is to use camera. Open GL es is too complex to use. It is generally used for advanced 3D effects or games. For simple 3D effects, camera is enough.

Camera provides three rotation methods: rotatex (), rotatey () and rotatez. By calling these three methods and passing in the corresponding angle, you can rotate the view around these three axes. Today, the effect of central axis rotation is to rotate the view around the Y axis. The schematic diagram of using camera to rotate the view is as follows:

Let's start. First, we created an Android project called rotatepicbrowserdemo, and then we prepared several pictures for browsing in the picture browser later.

API demos has provided us with a very useful tool class rotate3danimation for 3D rotation animation. This tool class is implemented by camera. We first copy this class into the project, and the code is as follows:

You can see that the constructor of this class receives some parameters required for 3D rotation, such as the angle of start and end of rotation, the center point of rotation, etc. Then focus on the applytransformation () method. First, calculate the current rotation angle according to the animation playback time, and then let camera offset the Z axis according to the animation playback time, so as to make the view feel far away from the perspective. Then call the rotatey () method of camera to rotate the view around the Y axis, so as to produce the effect of stereo rotation. Finally, the position of the center point of rotation is determined through the matrix.

With this tool class, we can use it to easily realize the special effect of central axis rotation. Then create an entity class picture of the picture. The code is as follows:

There are only two fields in this class. Name is used to display the name of the picture, and resource is used to represent the resource corresponding to the picture.

Then create an adapter pictureadapter for the picture list, which is used to display the name of a group of pictures on the listview. The code is as follows:

The above code is very simple and there is nothing to explain. Then we open or create an activity_ Main.xml, as the main layout file of the program, the code is as follows:

As you can see, we are in activity_ A listview is placed in main.xml to display a list of picture names. Then an ImageView is added to display the pictures, but at the beginning, the ImageView is set to invisible, because the pictures will be displayed later by rotating the central axis.

Finally, open or create mainactivity as the main activity of the program. The code is as follows:

The code in mainactivity has been annotated in great detail. Here I'll take you to sort out its execution process. First, we call the initPics () method in the onCreate () method, and initialize the data in the picture list here. Then get the instance of the control in the layout and let the data in the list be displayed in the listview. Then register their click events for listview and ImageView respectively.

When a sub item in the listview is clicked, the image in the ImageView will first be set as the resource corresponding to the clicked item, and then the center point position of the whole layout will be calculated as the center point of the central axis rotation. Then create a rotate3danimation object, rotate the layout from 0 degrees to 90 degrees around the Y axis with the calculated center point, and register turntoimageview as the animation listener. Monitor the animation completion event in turntoimageview. If it is found that the animation has been played, set listview to invisible and ImageView to visible, and then create a rotate3danimation object, this time from 270 degrees to 360 degrees. In this way, you can make the listview disappear by rotating around the central axis, and then the ImageView rotates around the central axis.

When clicking ImageView, the processing is similar to the above. First rotate the ImageView from 360 degrees to 270 degrees (so as to ensure to rotate back in the opposite direction), and then listen for animation events in turntolistview. After the animation is completed, set ImageView to invisible, listview to visible, and then rotate listview from 90 degrees to 0 degrees, This completes the whole process of central axis rotation.

Well, now that all the code has been completed, let's run it to see the effect. After clicking an item in the picture name list interface, the central axis will rotate to the corresponding picture, then click the picture, and the central axis will rotate back to the picture name list interface, as shown in the following figure:

The effect is very dazzling! The main code in this article actually comes from API demos, and I don't have many original parts. I hope that through this article, everyone can roughly understand the usage of camera, and then in the next article, I will lead you to use camera to complete more dazzling and cool effects. Interested friends, please continue to read the complete analysis of Android 3D sliding menu to realize the sliding door three-dimensional special effects.

Well, this is the end of today's explanation. If you have any questions, please leave a message.

Please click here to download the source code

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.