Android 3D sliding menu fully analyzes Android and realizes sliding door type three-dimensional special effects

In the last article, we learned the basic usage of camera and wrote an example with them to realize the image axis rotation function similar to that in API demos. However, the core code of that example comes from the rotate3danimation class in API demos, which helps us complete all 3D rotation operations. All matrix and camera related codes are also encapsulated in this class.

If you say so, will everyone feel itchy? Although I learned the usage of camera, I didn't realize a set of very cool 3D effects according to my own understanding. Don't worry, today I'll take you to implement a 3D sliding menu, and I won't use any API demos code at all.

Of course, if you don't know how to use camera, you can read my last article, the implementation of Android axis rotation effect, and make another kind of image browser.

I have also written several articles on sliding menu. I believe that friends who have seen it should be familiar with the implementation of sliding menu. Then the focus of this article is how to add sliding door three-dimensional effect on the basis of traditional sliding menu. Friends who don't know how to realize the sliding menu can turn over my previous articles. I must make complaints about this. Recently, I found that many websites and individuals have turned malicious articles away from me, and have deliberately removed the original address information of the first line. What's more, when searching the title of my article on Baidu, I found the websites that reprinted my article first. Alas, sad, it seems that Google is more normal. So I am also @ r today_ 419_ 2472 @ in particular, all my articles are first published on CSDN blog. If you read this article on another website, you will not be able to find the article I wrote about the traditional sliding menu, and your questions and comments will not be answered.

Let's go back to the main topic. First, let's talk about the implementation principle of this time. In fact, the traditional sliding menu function is to put the menu part below and the main layout above, and then offset the main layout according to the sliding distance of the finger, so that the menu part can be displayed. However, since we want to do the sliding door three-dimensional effect this time, we need to change the traditional thinking slightly. We can hide the menu part first, but copy a menu image and generate a picture, and then conduct three-dimensional operation on the picture when the finger slides to produce the sliding door effect. When the sliding operation is completed, To show the real menu, and then hide the picture. The schematic diagram is as follows:

So let's start to implement it. First, create an Android project called threedslidinglayoutdemo.

Then create a new image3dview class inherited from view, which is used to generate mirror images and complete 3D operations. The code is as follows:

You can see that a setsourceview () method is provided in image3dview to pass in the source view. We will copy the image later. Then judge the sourcebitmap in the OnDraw () method. If it is empty, call the getsourcebitmap () method to generate a mirror image. See the details of the getsourcebitmap () method for yourself. After obtaining the mirror image, the next step is to calculate the rotation angle of the image. Here, the rotation angle is calculated proportionally by comparing the current width of image3dview with the total width of the source view. Then we call the rotateY () method of Camera to rotate the Y axis of the picture group and move the center of the rotation to the middle position of the left edge of the screen. We have seen this line of code in the last article, and it is quite familiar with it. Finally, the drawBitmap () method of Canvas is used to draw the picture.

After completing image3dview, we will start to write the code of the sliding menu. In fact, this code is similar to the previous sliding menu code. Friends who have read my previous articles will understand it easily this time. Create a new threedslidinglayout class. The code is as follows:

The code is relatively long. I'd better take you to sort out your ideas. First, in the onlayout method, we initialize the left layout object, the right layout object and the image3dview object respectively. These three objects will be configured in the activity layout later. At the end of the onLayout () method, we call the setSourceView () method of Image3dView and pass the left layout object into it, which shows that we want to mirror it later.

When the finger drags on the interface to display the left layout, it will enter the ontouch () method. Here, the checkslidestate () method will be called to check the sliding state to determine whether the user wants to display the left layout or hide the left layout, and then offset the right layout according to the sliding distance of the finger to achieve the basic sliding effect. Next is the key content. Here, the width of image3dview will be changed according to the offset of the layout on the right. When the size of image3dview changes, of course, ondraw() method will be called to redraw. At this time, the three-dimensional rotation logic we have written can be executed, and a three-dimensional sliding door effect will be generated. Note that during the whole sliding process, the real left layout is always invisible. What we see is only a mirror image of it.

When the finger leaves the screen, it will decide whether to display or hide the left layout according to the current moving distance, and will call the scrolltoleftlayout() method or scrolltorightlayout() method to complete the subsequent scrolling operation. After the whole scrolling operation is completed, the real left layout will be displayed, and then the mirror image will be hidden, so that users can click the buttons on the left layout and so on.

Next, we need to reference the 3D sliding menu framework in the activity layout file to open or create an activity_ Main.xml is the main layout file of the program, and the code is as follows:

You can see that in the outermost threedslidinglayout layout, we put three direct sub layouts. The first relativelayout is the layout on the left, which simply puts a textview and a button. The second LinearLayout is the layout on the right, which contains a button and a listview, which are prepared to display the layout on the left. The third is image3dview, which is of course used to display the mirror image of the left layout during sliding.

Finally, open or create mainactivity as the main activity of the program, and add the following code:

These codes should be very simple and familiar. They are exactly the same as the previous codes in the sliding menu. Call the setscrollevent method of threedslidinglayout and pass in the listview as a bound layout. In this way, you can drag the listview to show or hide the layout on the left. The logic of displaying and hiding the layout on the left is also added to the click event of the button.

Well, all the coding work has been completed. Let's run it. The effect is shown in the figure below:

What about? The effect is very dazzling! In fact, as long as you skillfully use camera, you can also write many wonderful special effects. It depends on whether you dare to give full play to your imagination.

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

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.