Android custom control imitation QQ drawer effect

In fact, there are many similar implementations on the Internet, and the principle is not difficult, but there are some problems when various online demos run down. After tossing and turning for a long time, I decided to realize one by myself.

First, let's look at the implementation effect:

Compared with various online demos, the main points to be realized this time are as follows:

1. Slide drawer view 2. Slide drawer hidden view control click event 3. Click any item to hide the displayed drawer view 4. Slide list to hide the displayed drawer view 5. Add swipelayout click event and swipe touch event judgment processing 6. Optimize the judgment processing of multiple swipelayout sliding status when quickly opening multiple drawer hidden views, and only display the last sliding drawer hidden view, Hide all open drawer views in front (when sliding quickly, multiple drawer views may be open, and the main problems of several demos found on the Internet are concentrated in this one)

Implementation principle

In fact, the implementation principle of a single swipelayout is very simple. In fact, when a single swipelayout hides the drawer state, it should be like this:

In other words, in the initial hidden state, the hide view area is actually laid out to the right of the content view to achieve the hidden effect, and then the display dynamically lays out two views according to the change of the dragged x value, so as to achieve the effect of a sliding drawer. Of course, directly rewriting the ontouchevent of the view to dynamically layout the two views can achieve the effect we need, but there is a better way to achieve it, that is, through the viewdraghelper. Viewdraghelper is an official class provided by Google for gesture analysis and processing. There are a lot of resources on the Internet about the basic use of viewdraghelper. For the specific introduction and basic usage of viewdraghelper, this article will not repeat the wheel making. Here we recommend a microblog of Hongyang great God: Android viewdraghelper fully analyzes the custom ViewGroup artifact.

Concrete implementation

Now let's start the concrete implementation. The layout is relatively simple. No code will be pasted here. Finally, the complete code address of this demo will be pasted.

First, we implement a custom swipelout that inherits FrameLayout and override the onfinishinflate method: here, we only allow swipelayout to set two child views, and contentlayout is a custom layout that inherits LinearLayout. We will talk about this later and skip it here first;

Then override the onsizechanged, onlayout, onintercepttouchevent methods:

Then, the key is to rewrite the ontouchevent method and the viewdraghelper. Callback callback callback. We set an enum to judge the three states of swipelayout. In onviewpositionchanged, there are two methods to realize the accompanying movement of content view and hide view. One is to directly offset the horizontal change of view, and the other is to directly through layout. Both methods can be used.

Open(), close() implementation

Basically, the drawer sliding effect of a single swipelayout is realized, but many judgments need to be made when setting this swipelayout as an item layout to a listview.

Due to the reuse mechanism of listview, we do not do any processing for listview here. Therefore, once an item's swipelayout is in the open state, it is inevitable that several other items must be in the open state. Therefore, we need to detect the sliding of listview. When listview slides, close swipelayout. Since the switch of swipelayout needs to be controlled externally, we first define a swipelayoutmanager to manage the control of swipelayout.

In this way, you can monitor the sliding of listview, and then close all drawer views when listview slides.

Considering that most of the time, when we open and close the drawer view, the external needs to know the status value of swipelayout, we need to add several interfaces in swipelayout to tell the external the current status value of swipelayout:

SwipeLayout.java

Next, write a swipeadapter set for listview

SwipeAdapter.java

At this time, we have basically realized most of the functions we need, but when we slide, we find new problems. There are problems in our swipelayout and listview sliding judgment. Because we simply left the touch interception event to viewdraghelper.shouldintercepttouchevent (EV) for processing, there are some problems in the handling of swipelayout and listview intercepting touch events. Here we want to mention a knowledge point: the transmission of Android view events. (1) First, the activity distributes it to the root view, that is, the decorview (decorview is the top view of the entire window interface) (2) and then the root view distributes it to the child view

The view event interception is shown in the following figure:

The consumption of the view event is shown in the following figure:

Note: the above two figures refer to the classic figures summarized on the Internet

So here we will talk about the content layout that appeared at the beginning, mainly rewriting onintercepttuchevent and ontuchevent.

In addition, because the parent view swipelayout switch status and swipelayout control are required in contentlayout, another interface is being written for contentlayout to obtain swipelayout switch status and update swipelayout.

Next, we will improve swipelayout's onintercepttouchevent. We will add a gesturedetectorcompat to handle gesture recognition:

In this way, the whole view, whether dragging up and down or swipelayout switch sliding, has been completed. Finally, click events corresponding to overhead, delete and item are added. Here, the code of swipeadapter is improved as follows.

Finally, paste the mainactivity code. Here, delete and top items through the onswapecontrollistener interface callback:

So far, the whole demo has been basically completed, and the functions completed this time can be directly used in the project. In fact, the most troublesome thing is the interception and processing of the touch event in the view. However, after opening the log of this demo and comparing it, you can understand the whole delivery process.

Full demo address: https://github.com/Horrarndoo/SwipeLayout

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.