Android implements similar 3D touch menu functions

preface

In the development, we often encounter the need for the implementation of menu function, and we often refer to the excellent design of others. For example, the 3D touch menu is an eye-catching new feature on iPhone 6 and iPhone 6S. Now, we hope to try our best to imitate this menu design, because the differences of the system will make it difficult to implement many things.

thinking

I want to try my best to imitate this menu. After analysis, I think it mainly realizes the following points:

1) On IOS, the menu appears in a way that users press with their fingers. However, on Android, due to hardware constraints, we can't capture the action of pressing with force. Therefore, I switch to another less important way, long press pop-up to capture the action of long press with their fingers.

2) On the menu interface, you need to deal with the background blur effect.

3) For the touch event processing of the menu, we can see that after long pressing the finger, the menu appears. At this time, the finger does not leave the screen, slides to an option in the menu, and then lifts it up. At this time, this option will be displayed accordingly.

realization

Background blur processing

After some research, in addition to calling various drawing effect libraries of great God above GitHub, we have two ideas to realize it ourselves.

Renderscript scheme

Renderscript is a language introduced by Android 3.0 to write high-performance code on Android. Advantages: easy to use, the official Android API comes with it, and the performance processing effect is excellent. Disadvantages: more than api17 is required.

It is very simple to use. We only need to obtain an instance of renderscript and pass in the parameters required for the blurred image

Java code layer implementation scheme

Image blur processing can also be realized through Java layer code. GitHub God has implemented this image algorithm for us.

Using fastblur algorithm to realize image blur, there is no version compatibility problem. However, if we need a blurred image that is not small, we will find that the time required for the blurred image is far beyond the range we can accept. If a large image is loaded, the situation will be even worse. A better processing method is to compress the image before blur processing, and then enlarge it according to the original size after blur processing, which can effectively reduce the time-consuming of blur processing.

Here we make a version judgment

Handling of touch events

Let's talk about how the fuzzy layer appears. It must be to achieve a full screen effect. For the full screen effect, we can use dialog, floating window, transparent activity, or insert a view covering the parent layout in the decitorview. These four methods can achieve the full screen effect. Here, we choose to insert a view in the decitorview.

How to achieve it?

As mentioned earlier, long press with your finger. After the menu pops up, you can select the menu option without lifting your finger. This may sound a little difficult to understand. We have seen a lot of touch event analysis of view written by the great God. We also have to study the source code ourselves. We all have a certain understanding of touch event transmission.

Generally, when we long press a view in the interface, and then before we lift our finger, all touch events will be handled by this view, that is, targetview (when a view consumes touch events, it will be set as targetview and receive the next touch events). So how can we make the fuzzy layer view just appear to take over the next finger slide, that is, action, without raising the finger_ Move and action_ What about the up event?

Often think about it, I think of a more euphemistic way

We all know that when the finger is raised, decorview and its child views will receive an action_ Up touch event. This event will tell decorview that the finger touch series action has ended. Then the method comes. We don't need to really lift the finger. We just need to simulate a finger lift action, that is, send an action ourselves_ With the up event, decorview can receive the action_ Up event, and then look for targetview again, that is, the new fuzzy layer view. At this time, we simulate sending an action_ Down event.

design sketch

The final rendering is as follows. Due to less time, there are many places that are not well improved. The appearance angle and style of the menu are not beautiful enough. At the same time, it is not judged whether the menu appears above or below icon.

GitHub project address: Click to open the address.

The effect idea is still not perfect and needs a better scheme.

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.