Shulou(Shulou.com)06/01 Report--

This article mainly introduces the "Android how to use Scroller to achieve an upward sliding bottom navigation bar" related knowledge, Xiaobian through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "Android how to use Scroller to achieve an upward sliding bottom navigation bar" article can help you solve the problem.

Take a look at the effect:

First of all, if the control is sliding, you will definitely use scrollTo () or scrollBy (), and the Scroller class. Well, let's briefly introduce these three things.

ScrollTo (int, int) and scrollBy (int, int)

ScrollTo scrolls the content of View to (x, y) relative to the initial position of View.

ScrollBy scrolls the content of View to (x, y) relative to the current position of View.

Scroller class

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

StartScroll (int startX, int startY, int dx, int dy) and startScroll (int startX, int-startY, int dx, int dy, int duration).

Where does the startX,x direction start to move?

Where does the startY,y direction start to move?

How far to move in the dx,x direction.

How far to move in the dy,y direction.

Duration, how long will it take to complete this mobile operation? the default is 250ms.

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

@ Overridepublic void computeScroll () {if (mScroller.computeScrollOffset ()) {/ / calculates the new position and determines whether the previous scroll is complete. ScrollTo (mScroller.getCurrX (), mScroller.getCurrY ()); invalidate (); / / call computeScroll again. }}

ComputeScrollOffset ()

This method is used to calculate a new location you want to know. Scroller will automatically calculate a new location based on the coordinates, time, and current position of the mark, and record it internally. We can get the new location through Scroller#getCurrX () and Scroller#getCurrY ().

What you need to know is that the new location it calculates is a closed space [x, y], and it will gradually move the distance between int startX and int dy from your specified int startX and int startY within the incoming time when you call startScroll, so every time we call Scroller#computeScrollOffset () and then call View's scrollTo (int, int) and 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 type boolean, and internally uses a boolean to record whether it is completed. When calling Scroller#startScroll), the boolean parameter is set to false. The internal logic is to first judge whether the startScroll () animation is still continuing, if not, calculate the latest position, and judge the duration before calculating the latest position. First, if the time is not up, the real calculated position is returned and true is returned. Second, if the time is up, mark the boolean member variable of whether the record continues or not, and directly assign the latest position as the final destination position, and return true. If startScroll () has been completed, it returns directly to false. When we decide that Scroller#computeScrollOffset () is true, it means we haven't finished yet, so we get Scroller#getCurrX () and Scroller#getCurrY () to do a scroll.

Scroller#getCurrX ()

Scroller#getCurrY ()

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

Scroller.isFinished () whether the last animation is complete.

Scroller.abortAnimation () cancels the last animation.

All right, with this in mind, let's start to achieve this effect.

First of all, make a layout, including the head of the bottom navigation bar and the contents of the navigation bar.

With the effect picture.

A very simple effect (here only look at the effect, not UI), the blue is the content, the red is the head.

So what effect do I want to achieve, that is, you can't see the blue part at the beginning, click or slide the red part to show the blue part, a pull-up and drop-down effect. So it's definitely time to implement a custom viewGroup to implement this layout.

First of all, I build a class BottomBar.class, which I directly use to inherit LinearLayout for simplicity. Override its onLayout () method. Because I'm going to hide the blue part, leaving only the red part. How to do this, the code is as follows:

@ Override protected void onLayout (boolean changed, int l, int t, int r, int b) {super.onLayout (changed, l, t, r, b); bottomBar.layout (0, getMeasuredHeight ()-bottomBar.getMeasuredHeight (), getMeasuredWidth (), getMeasuredHeight ()); bottomContent.layout (0, getMeasuredHeight (), getMeasuredWidth (), bottomBar.getBottom () + bottomContent.getMeasuredHeight ());}

Change its position so that the blue part is hidden by the onLayout () method.

The next step is to deal with the sliding event. I want to press and hold the red part up and down to show and hide the blue part, so I must have gesture recognition, rewrite onTouchEvent (), and work with view's scrollTo () method to achieve this simple effect.

@ Override public boolean onTouchEvent (MotionEvent event) {super.onTouchEvent (event); switch (event.getAction ()) {case MotionEvent.ACTION_DOWN: Log.i ("", "- > x =" + event.getX () + ", y =" + event.getY ()); downX = (int) event.getX (); downY = (int) event.getY (); break Case MotionEvent.ACTION_MOVE: int endY = (int) event.getY (); int dy = (int) (endY-downY); int toScroll = getScrollY ()-dy; if (toScroll

BottomContent.getMeasuredHeight () {toScroll = bottomContent.getMeasuredHeight ();} scrollTo (0, toScroll); downY = (int) event.getY (); break; case MotionEvent.ACTION_UP: scrollOffset = getScrollY (); if (scrollOffset > bottomContent.getMeasuredHeight () / 2) {showNavigation ();} else {closeNavigation ();} break } return true;}

The code is lazy and has no comments, but I will explain it below, it's all some simple logic, first of all, the code in ACTION_DOWN just records the pressed coordinates, it doesn't matter. Then there is the code for ACTION_MOVE. You should first understand getScrollY (), which is the distance the control slides, with an initial value of 0. You can see that I call scrollTo (0, toScroll), and toScroll = getScrolly ()-dy;,dy is an offset of finger sliding. After passing 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 is also one of my questions 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 assignment of downY, just 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 its original state and slide again. So why does it have such an effect? if you look closely, you will find that dy is 0 every time you click, so every time you call scrollTo (x, y), x and y are always 0, and the natural menu will go back to its original position. So getScrollY ()-dy is actually recording the last location so that the value of'y'is not 0 on the next click. The premise is that the downY needs to be re-assigned each time. All right, with these up-and-down effects, there will be. But only this is not enough, we have to make it pop up and retract automatically. The next step is to deal with ACTION_UP. I called showNavigation (); and colseNavigation ();, and the code below is simple logic without interpretation.

Private void showNavigation () {int dy = bottomContent.getMeasuredHeight ()-scrollOffset; mScroller.startScroll (getScrollX (), getScrollY (), 0,dy, 500); invalidate ();} private void closeNavigation () {int dy = 0-scrollOffset; mScroller.startScroll (getScrollX (), getScrollY (), 0, dy, 500); invalidate () } this is the end of the introduction to "how Android uses Scroller to achieve a bottom navigation bar that can slide up". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.