Sideslip menu effect of Android imitation Renren client sliding menu

There is a special effect in Renren client, which is quite attractive. You can show the menu by sliding your finger to the right in the main interface, and most of the main interface will be hidden, but there is still a small part on the left to be displayed with the menu.

It is said that this special effect of Renren client is imitated from Facebook client. It is unclear whether Facebook is imitated from other places. OK, today we'll work together to achieve this effect. In short, the first time I saw this special effect was on Renren client. I subjectively think I'm imitating the special effect on Renren client.

Although there are many implementations of similar effects on the Internet, I find that most of the implementation schemes are very complex and not easy to understand. But in fact, this effect is not difficult to achieve, so what I bring you today is also the simplest sliding menu implementation scheme in history.

First, let's talk about the implementation principle. There are two parts in the layout of an activity, one is the layout of menu and the other is the layout of content. The two layouts are arranged horizontally, with the menu layout on the left and the content layout on the right. During initialization, shift the menu layout to the left so that it can be completely hidden, so that the content layout will be completely displayed in the activity. Then, the left offset distance of the menu layout is changed by monitoring the finger sliding event, so as to control the display and hiding of the menu layout.

The schematic diagram is as follows:

When the left offset value of the menu layout is changed to 0.

The renderings are as follows:

OK, let's start with code. First, create a new Android project in eclipse. The project name is renrenslidemenudemo. Then write the layout file and create or open the activity in the layout directory_ Main.xml file, add the following code:

The outermost layout of this layout file is a LinearLayout, which is arranged horizontally. Two sub linearlayouts are nested under this LinearLayout, namely, menu layout and content layout. In order to make the layout as simple as possible, no controls are added to the menu layout and content layout, but a background picture is added to each of the two layouts. These two background pictures are the pictures I cut off from Renren client. In this way, we can focus our attention on how to achieve the effect of sliding menu, and don't care about the complex layout inside.

Create or open mainactivity. This class is still the main activity of the program and the only activity in this demo. Add the following code:

All the code is here. We can see that with comments, only more than 200 lines of code can realize the special effect of sliding menu. Let me explain the above code. First, call the initvalues method during initialization, where the width of the content layout is set to the width of the screen, and the width of the menu layout is set to the width of the screen minus the menupadding value, so as to ensure that part of the content layout can be seen when the menu layout is displayed. If the two layout widths are not redefined during initialization, both layouts will be filled as declared in the layout file_ Parent, so the effect of sliding menu cannot be realized. Then set the left offset of the menu layout to the negative width of the menu layout, so that the menu layout will be completely hidden, and only the content layout will be displayed on the interface.

Then register the listening event for the content layout, so that the ontouch event will be triggered when the finger slides on the content layout. In the ontouch event, the left offset of the menu layout will be changed according to the sliding distance of the finger, so as to control the display and hiding of the menu layout. When the finger leaves the screen, it will judge whether it should slide to the menu layout or content layout. The judgment is based on the sliding distance or sliding speed of the finger. See the notes in the code for details.

Finally, the code of androidmanifest.xml is generated automatically, which is very simple:

Well, now let's run it and see the effect. First, when the program is just opened, the content layout is displayed. Slide your finger to the right in the interface to see the menu layout appear.

When the menu layout is fully displayed, the effect is as follows:

Today, you see the simplest implementation scheme of sliding menu in history. It is really very simple. Then a friend may ask, it is very simple to implement the sliding menu in an activity, but if there are many activities in my application that need the sliding menu, and each activity is implemented in this way, it will become complicated. Yes, the current solution is only applicable to a single activity. If you want to realize the effect of sliding menu in multiple activities, please refer to my other article Android to realize the complete analysis of sliding menu effects.

If you are interested in the two-way sliding menu, please read the example code of Android to realize the two-way sliding effect.

Well, that's the end of today's explanation. Friends with questions can leave messages 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.