Android imitation function button floatingactionbutton effect

Some time ago, I was watching attribute animation. It happened that the effect of this button can be realized by attribute animation, so I came to practice. The effect is basically out. You can improve it yourself.

Let's first look at the renderings:

We see that after clicking the floating action button, some items will be expanded, and then there will be a mask effect. These are the functions of this view. Then the whole view must be a ViewGroup. Let's look at it part by part.

The first is the smallest tag:

This tag can be a textview with text, but for beauty, we use cardview. Cardview is a FrameLayout. If we want it to have the function of displaying text, we will inherit cardview and customize a ViewGroup.

Internally maintain a textview. In its constructor, we instantiate a textview to display text, and add the textview to the cardview when calling settagtext externally.

Next, let's look at this item, which is a combination of a tag and a fab:

Tag uses the tagview we customized just now, and Fab uses the floatingactionbutton of the system. Obviously, a ViewGroup is needed to combine the two sub views. You can use LinearLayout. Here we directly use ViewGroup.

We set custom properties for this ViewGroup to set text for the tag:

Get the custom attribute in the constructor, initialize the tagview and add it to the ViewGroup:

Measure the ViewGroup in onmeasure. Here, I directly set the width and height to wrap_ Content, match_ Parent and exact values don't feel necessary. Tagview and floatingactionbuttons are arranged horizontally, leaving a little space in the middle and on both sides.

Layout horizontally in onlayout, with tag on the left and fab on the right.

Also register onclicklistener for these two child views, which is the source of click event transmission.

Now that the item's ViewGroup is available, we also need a mask and a main fab. Let's look at the final ViewGroup.

The idea is also very clear. The mask is match_ For parent, the main fab is in the lower right corner (of course, we can set it ourselves or provide an external interface to set the location), and three items (i.e. tagfablayout) are above the main fab. As for the animation effect, it is triggered in the click event.

Here, we also need to customize some attributes, such as the color of the mask, the color of the main fab, the pattern of the main FAB (of course, you can directly define these attributes by writing the main Fab directly in XML), the duration of animation, the mode of animation, etc.

In the constructor, we also get and initialize properties:

Then we initialize and add the mask and the main fab.

In onmeasure, we will not wrap the ViewGroup_ Content is supported because it is basically match_ There will be no exact value for parent, and the ViewGroup should be at the top level. Let's look at the onlayout method, in which we layout all the sub views.

First, layout the main Fab in the lower right corner, and then add a click event. After clicking the main fab, it will involve operations such as rotating the main fab, changing the transparency of the mask, opening or closing items, which will be discussed later.

Then layout the background:

Then layout items and add click events for items. Each item is a tagfablayout, which can be setontagclicklistener and setonfabclicklistener, so that we can respond when we click on these two areas, and we let the two callback functions do the same thing: rotate the main fab, change the background and close items (because it must be in the expanded state when we can click). At this point, we also need to set up an interface OnFabItemClickListener in this ViewGroup to transfer the location of the click, for example, Activity implements the interface, so we can call the mOnFabItemClickListener.onFabItemClick () method in onTagClick and onFabClick methods. Let's talk about the layout here, which is cumulative upward. Pay attention to the calculation of coordinates.

Now that all layout and click events have been bound, let's take a look at rotatefloatingbutton (), changebackground (), openmenu (), closemenu (), which are functions related to attribute animation.

In fact, it is also very simple. Rotatefloatingbutton () changes the rotation attribute of mfloatingactionbutton to judge whether the menu is open or not.

Changebackground() changes the alpha attribute of mbackgroundview, which is also judged by whether the menu is open or not.

Openmenu () realizes the opening effect according to different modes. Take a look at scaletoshow (). Here, the three attributes of scaleX, Scaley and alpha are animated at the same time to achieve the effect of zooming in.

It has almost achieved the desired effect, but there is one small thing to note. When the menu is expanded, if we click on an area other than the menu, that is, an area on the mask, the ViewGroup will not intercept any touch events. If there are views that can be clicked and responded to under this floatingactionbutton, such as listview, It will respond when the mask is displayed. The correct logic should be to close the menu.

Then we need to handle the event interception in onintercepttouchevent. The judgment method here is: if the menu is open, we judge whether X and Y fall in area a or B in the down event, as shown in the following figure

If so, the ViewGroup should intercept this event and hand it over to its ontouchevent.

Close the menu in ontouchevent.

Look again, the effect is good.

Since the small app I made involves switching the night mode, the background color of the ViewGroup should change with the theme, and set the background color of the view to

Override the setbackgroundcolor method of ViewGroup. The so-called background color here is actually the color of the mask.

The basic functions have been completed here, and there are still many problems. For example, there is no layout according to different positions, and there is no effect of setting menu opening and closing according to different modes. However, I will continue to improve and improve in the future. Welcome to communicate. If you need the source code, you can get it from the customview in my source code. here

The above is the Android imitation function button floatingactionbutton effect introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!