Reprint please indicate source: a maple leaf column

Recently, I developed an App that needed to cascade the Toolbar and the top content area. At first, I thought of the AppBarLayout control that was added to Android 5.0 to achieve this effect, so I immediately used this component to achieve a similar effect, as shown below:

Well, it’s easy to use the new AppBarLayout for Android 5.0. Here’s how to use AppBarLayout to achieve a similar effect:

(1) add Compile reference

The compile 'com. Android. Support: design: 22.2.1'Copy the code

(2) Add Layout file




    

        

            

                

                

                

                    

                    

                    
                
            

            

                

                    

                    
                
            

        

    

    

Copy the code

In the definition of the layout file: 1) The AppBarLayout needs to be wrapped with CoordinatorLayout; CoordinatorLayout is also a new control for Android 5.0. The new idea is to coordinate the scheduling of sub-layouts to achieve the animation effect of touching the layout. CoordinatorLayout schedules subviews by setting their Behaviors. System (Support V7) provides AppBarLayout. Behaviors, AppBarLayout. ScrollingViewBehavior, FloatingActionButton. Behaviors, SwipeDismissBehavior, etc.

2) Then add AppBarLayout. All views in the top area are placed inside AppBarLayout. AppBarLayout is also a new control in Android 5.0. AppBarLayout inherits the vertical layout from the LinearLayout. It lets you customize what the child views inside a scrollable View do when the scroll gesture changes.

3) Outside of AppBarLayout, inside of CoordinatorLayout, put a View with scrollable. For example, RecyclerView.

4) View in AppBarLayout is controlled by app:layout_scrollFlags. There are four types of flags.

  • Scroll: A View whose value is set to Scroll will move with the scroll event

  • EnterAlways: a View set to enterAlways that scrolls directly down when ScrollView scrolls down. I don’t care if the ScrollView is scrolling

  • ExitUntilCollapsed: a View with an exitUntilCollapsed value that “dies” upwards and responds to the internal sliding events of the ScrollView until the remaining peak reaches its minimum

  • EnterAlwaysCollapsed: EnterAlways is an additional option to enterAlways, usually used with enterAlways, which means that when a View “appears” down, the first effect is enterAlways. When the height of the View reaches the minimum height, the View temporarily stops scrolling down. Until the ScrollView slides to the top and stops sliding, the View continues sliding until it reaches the top of the View

  • Snap: Set the scrolling View not to stay in half, that is, the scrolling View is either expanded or contracted

5) Set the property app:layout_behavior on the scrollable View, as in our example: App :layout_behavior= “@string/appbar_scrolling_view_behavior” is a value defined by Android Support Library and can be used directly. This Behavior class really controls the scrolling Behavior of the View while it’s scrolling. Of course, sometimes we can also manually implement a custom Behavior to achieve a unique scrolling Behavior.

This realized a simple RecyclerView and AppBarLayou cascade scrolling effect, but after the completion of the implementation there is a problem is, when MY RecyclerView scroll down, the end of the rolling, directly stopped, and can not continue to AppBarLayout scroll down, Well, that seems to be a bug too.

Since this need to achieve their own RecyclerView rolling end cascading AppBarLayout effect, then thought of can detect RecyclerView rolling end and then manually execute AppBarLayout expansion action. Specific code part, just need to implement RecylerView logic can be.

/ * * * custom RecyclerView implement of AppBarLayout scrolling effect. * / RecyclerView addOnScrollListener (object: RecyclerView.OnScrollListener() { override fun onScrolled(recyclerView: RecyclerView? , dx: Int, dy: Int) { } override fun onScrollStateChanged(recyclerView: RecyclerView? , newState: Int) { if (newState == RecyclerView.SCROLL_STATE_IDLE) { var visiblePosition = linearLayoutManager.findFirstCompletelyVisibleItemPosition() if (visiblePosition == 0) { barLayout.setExpanded(true, true) } } } })Copy the code

So after rewriting, when we slide RecyclerView, when RecyclerView slides to the top, it will slide AppBarLayout:

When RecyclerView scroll down to the end, AppBarLayout will be expanded if there is still a speed to slide down, see the effect is still good, ^_^

Another problem in the implementation process is the layout file:



                

                    

                    
                
            Copy the code

The Toolbar under the RelativeLayout cannot be centered, and the left side of the Toolbar has a Padding length that cannot be filled. As a result, the Title cannot be centered.

/ update the title position * * * * / titleText post {titleText. OffsetLeftAndRight (- titleView. Left / 2)}Copy the code

Move the titleText within the code by the left length of the RelativeLayout so that the title is centered.