Android implementation of two-way sliding effect example code

I remember a long time ago, I wrote an article about Android sliding menu, in which a friend left a message in the comment, hoping I can help him change this sliding menu into a two-way sliding mode. At that time, I didn't want to spend too much time. I simply modified it and sent it to him. Unexpectedly, a large number of friends came to ask me for the code of the two-way sliding menu. Because this code was written carelessly, I couldn't bear to continue to send it after I sent it to some friends, so I decided to write an article to introduce a better implementation method of Android two-way sliding menu.

Before you start, let's talk about the implementation principle. There are three parts in the layout of an activity, one is the layout of the menu on the left, one is the layout of the menu on the right, and one is the content layout. The left menu is aligned with the left edge of the screen, and the right menu is aligned with the right edge of the screen. Then the content layout occupies the whole screen and is pressed on the left menu and the right menu. When the user's finger slides to the right, the right menu is hidden and the left menu is displayed. Then, the left menu can be displayed by offsetting the position of the content layout. Similarly, when the user swipes his finger to the left, the left menu is hidden and the right menu is displayed. By offsetting the position of the content layout, the right menu can be displayed. The schematic diagram is shown below:

After introducing the principle, let's start to implement it. Create a new Android project called bidirslidinglayout. Then create our main bidirslidinglayout class, which is the core class to realize the function of two-way sliding menu. The code is as follows:

The above code comments have been written in great detail. I'll explain them briefly again. First, obtain the parameters of the left menu, the right menu and the content layout in the onlayout () method, and redefine the width of the content layout to the width of the screen, so as to ensure that the content layout can not only cover the following menu layout, but also offset the screen. Then monitor the touch screen event in the ontouch () method to determine the intention of the user's gesture. Several sliding States, do, are defined in advance_ Noting indicates that no sliding is performed, show_ LEFT_ Menu indicates that the user wants to slide out the left menu, show_ RIGHT_ Menu indicates that the user wants to slide out of the right menu, hide_ LEFT_ Menu indicates that the user wants to hide the left menu, hide_ RIGHT_ Menu indicates that the user wants to hide the menu on the right. In the checkslidestate() method, determine which sliding operation the user wants to perform, assign a value to the slidestate variable, and then determine how to offset the content layout according to the value of slidestate. Then, when the user's finger leaves the screen, the subsequent scrolling direction will be determined according to the current sliding distance, and the complete sliding process will be completed through leftmenuscolltaskand rightmenuscolltask. In addition, during the sliding process, events on the content layout will be shielded, mainly through a series of return operations. For friends who do not understand this part, please refer to Android to thoroughly understand the analysis of event distribution mechanism from the perspective of source code.

Then let's take a look at the setscrollevent method, which takes a view as a parameter and binds a touch event to the view. What does that mean? Let's imagine a scenario. If the content layout is a LinearLayout, I can control its offset by listening to the touch event on the LinearLayout. However, if a listview is added to the LinearLayout of the content layout, and the listview is full of the entire LinearLayout, the LinearLayout cannot be touched again. At this time, we need to register the touch event on the listview. The setscrollevent method provides a registration interface, and the touch event will be registered on the incoming view.

Next, open or create a new activity_ Main.xml file, add the following code:

You can see that we used the custom bidirslidinglayout as the root layout, and then added three sub layouts as the layout of the left menu, the right menu and the content. A textview is simply placed in the left menu and the right menu to display a paragraph of text, and a listview is placed in the content layout. Note that the left menu is aligned with the left edge of the parent layout, and the right menu is aligned with the right edge of the parent layout.

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

Here we fill in a few data for ListView, and get the BidirSlidingLayout object through findViewById () method, then call its setScrollEvent () method to bind ListView, so that we can display the left menu and the right menu by left and right ListView.

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

It still looks good! And more importantly, we can easily add the two-way sliding menu function anywhere in the project in the future. We only need the following two steps:

1. In acitivty's layout, we introduce our custom bidirslidinglayout, and add three direct child elements to this layout.

2. Register a touch event for a view through setscrollevent method in activity.

In this way, it is appropriate to realize the function of two-way sliding menu in one minute.

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

Click here to download the version with button

The above is the whole content of this article. I hope the content of this article has a certain reference value for your study or work. If you have any questions, you can leave a message. Thank you for your support for programming tips.