Android uses scroller to implement an upward sliding bottom navigation bar

I waited quietly for 5 minutes and didn't know how to write my first article. I want to study hard every time. I have time to knock on the code and write some articles of my own. It's finally implemented today. I'm still a little excited. ha-ha!

Well, there's no more nonsense. One of the functions I want to achieve today is a menu bar that can slide up and down the bottom. Why do I want to do such a thing? It's still because a year ago, we had such a demand for apps. At that time, baidu or Google didn't find the desired effect. In fact, it's a very simple effect. But at that time, I was really too delicious. I really couldn't do all the custom controls. It's OK to see other people's code. If I wrote it myself, I wouldn't have a clue at all. Because I tried to write, I really can't. At that time, I thought I was useless. All the effects were others' and I couldn't write. Also decided to do a good job of custom controls, drag and drop until now. After learning about the custom control for a period of time, I remembered this effect, and then I worked it out for him.

See the following effect:

First of all, the control is sliding, and scrollto() or scrollby() and the scroller class will certainly be used. Let's briefly introduce these three things first.

Scrollto (int, int) and scrollby (int, int)

Scroller class

Scroller is an important auxiliary class in finger sliding. It can help developers complete a smooth scrolling. It mainly includes:

If you really want to use this class, you also need to cooperate with the computescroll () method. Override this method

computeScrollOffset()

This method is used to calculate a new location you want to know. Scroller will automatically calculate a new location according to the coordinates, time and current location at the time of marking, and record it internally. We can get the new location through scroller #getcurrx() and scroller #getcurry().

You should know that the new position calculated by it is a closed interval [x, y], and will gradually move the distance between int DX and int dy from the int startx and int starty specified by you within the time you call startscroll. Therefore, each time we call scroller #computescrolloffset(), we call scrollto (int, int) of view, and then pass in scroller #getcurrx() and scroller #getcurry() You can get a gradual moving effect.

At the same time, this method has a return value of boolean type. Internally, a Boolean is used to record whether it is completed. When calling scroller #startscroll), this Boolean parameter will be set to false. The internal logic is to first judge whether the startscroll() animation is still continuing. If it is not completed, the latest location will be calculated. Before calculating the latest location, the duration will be judged. First, if the time is not up, the real location will be calculated and true will be returned. Second, if the time is up, the Boolean member variable recording whether to continue will be marked as completed, And directly assign the latest location as the final destination location, and return true; If startscroll () has completed, it returns false directly. When we judge that scroller #computescrolloffset() is true, it indicates that it has not been completed. At this time, we get scroller #getcurrx() and scroller #getcurry() to scroll.

Scroller#getCurrX()

Scroller#getCurrY()

These two methods are to get the new position calculated by scroller #computescrolloffset(), as explained above.

Whether the last animation of scroller. Isfinished() has been completed.

Scroller. Abortanimation() cancels the last animation.

Well, after understanding these, let's start to achieve this effect.

First, make a layout, including the head of the bottom navigation bar and the content body of the navigation bar.

With renderings.

A very simple effect (here only depends on the effect, not the UI). The blue one is the content and the red one is the head. So what effect do I want to achieve? I can't see the blue part at the beginning. Clicking or sliding the red part can display the blue part, a pull-up and pull-down effect. Now we must implement a custom ViewGroup to implement this layout.

First, I build a class bottombar.class. For simplicity, I directly use it to inherit LinearLayout. Override its onlayout () method. Because I'm going to hide the blue part and leave only the red part. How? The code is as follows:

Change its position through the onlayout () method to hide the blue part.

The next step is to handle the sliding event. If I want to press and hold the red part to slide up and down to show and hide the blue part, there must be gesture recognition. Rewrite ontouchevent() and cooperate with the scrollto() method of view to achieve this simple effect.

The code is lazy and has no comments, but I will explain it below. It is all simple logic. First, action_ The code in down only records the pressed coordinates. It's nothing. Then action_ Move code. First, you should understand getscrolly (), which is the sliding distance of the control, and the initial value is 0. You can see that I call scrollto (0, toscroll), and toscroll = getscroll () - dy;, Dy is an offset of the finger slide. Through these calculations, you will find that toscroll is the height of the blue part. Then the effect has been achieved. It's very simple. After reading it, will you have such a question, ha, which was also my question at that time, that is, why don't we directly use Dy, that is, a distance of finger sliding, as the value of toscroll (regardless of the following assignment of downy, it is simply the distance of finger sliding). In fact, it is possible. The control will slide with the finger. However, when the finger leaves the screen and clicks again, the menu will return to the original state and slide again. So why is this effect? If you look carefully, you will find that dy is 0 every time you click, so x and y are 0 every time you call scrollto (x, y), and the natural menu will return to its original position. So getscrolly () - dy actually records the last position so that the value of 'y' is not 0 at the next click. The premise is that downy needs to be re assigned each time. Well, with these pull-up and pull-down effects. But this is not the only way. We should make it pop up and retract automatically. Next is action_ When up, I called shownavigation(); And colsenavigation();, The following code is simple logic without explanation.

The effect is realized, ha ha. It's really simple. I hope it will help you in your study, and I also hope you can support programming tips.