Reprint please indicate the author AndroidMksy and provenance blog.csdn.net/AndroidMsky… Github: github.com/AndroidMsky…

First look at the effect of Zhihu:

Let’s look at what we achieved:

There are a lot of examples of nested sliding on the web, so let’s talk about the advantages of mine. 2. Add viewpager 3 below. Support RecyclerView and ScrollView 4. Based on Behavior can obtain the fact of rolling distance can do more linkage 5. You don’t have to overwrite the sliding event handling and almost just play with XML

CoordinatorLayout does the top layer layout, the upper part of the expansion of AppBarLayout, the viewPager below put NestedScrollView.

Observe the effect of zhihu home page: 1. Slide upward in the following items to first expand the upper head, and slide below the head after shrinking. 2. Conversely, pull down to the top of the item first, then stretch the head. 3. Left and right swiping is supported for multiple items below. 4. Fade out the avatar name. 5. Two titles can be clicked (title is in the head instead of below)

Let’s do it one by one: 1 and 2 are actually the easiest to implement

Since Google came out with CoordinatorLayout nesting and sliding it’s not that difficult to play, the 12 implementation is actually very simple because you can do it with your own system, you don’t have to write Java code. Structure is as follows

CoordinatorLayout – AppBarLayout – CollapsingToolbarLayout – the Toolbar. CoordinatorLayout – viewPager.

Parent layout CoordinatorLayout two nodes AppBarLayout and viewPager Node ollapsingToolbarLayout whose node is Toolbar This layout nesting linkage scaling toolsbar effect is achieved. The following is shorthand code for the layout nested structure.

<? xml version="1.0" encoding="utf-8"? > <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"

    android:fitsSystemWindows="true">


    <android.support.v4.view.ViewPager
          app:layout_behavior="@string/appbar_scrolling_view_behavior" >
    </android.support.v4.view.ViewPager>
<android.support.design.widget.AppBarLayout
        android:id="@+id/appbar">

        <android.support.design.widget.CollapsingToolbarLayout
            >
       <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                >

       </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>Copy the code

And then the viewpager below 3 first of all the viewPager must add this life line, otherwise the slide event won’t be distributed to it,

app:layout_behavior="@string/appbar_scrolling_view_behavior"Copy the code

Also note that the viewPager height must be match — parent otherwise there will be no linkage effect.

<android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
    </android.support.v4.view.ViewPager>Copy the code

4. When the head fades out, we need to find a direct child view in CoordinatorLayout and say:

app:layout_behavior="com.example.liangmutian.linkscrollmsky.RelativelayoutBehavior"Copy the code

So let’s look at the RelativelayoutBehavior class that we’ve done a little bit of coordinate manipulation with in this demo,

@Override
    public boolean layoutDependsOn(CoordinatorLayout parent, RelativeLayout child, View dependency) {
float maxL = DensityUtil.dip2px(mContext, 150) + DensityUtil.getZhuangtai(mContext);
Message message = new Message();

        if (dependency.getY() > 0) {
float a = ((dependency.getY() - maxL) / (DensityUtil.dip2px(mContext, 356) - maxL));
message.what = (int) (a * 100f);
if(MyActivity.mHandler ! =null)
                MyActivity.mHandler.sendMessage(message);
        }
        return super.layoutDependsOn(parent, child, dependency);
    }Copy the code

RelativeLayout Child is the direct child view, and View Dependency is the view that creates the slide. Through the control of view sliding distance, we can calculate the current sliding range, so as to realize the head fading. 356DP is the height of the entire AppBarLayout and 150DP is the height of the Toolbar. The total distance that can be slid is the height of AppBarLayout – the height of the Toolbar – the height of the status bar. That can be sliding the total distance to do the denominator, sliding distance to do the numerator, also calculated the sliding service, using the Handler to update the Activity control transparency, it is ok.

super.handleMessage(msg);
float alpha = ((float) msg.what) / 100f;
Log.e("alpha", msg.what + ":" + alpha);
overRe.setAlpha(alpha);Copy the code

5. Two titles can be clicked and slide with the head. Please note that there is a high risk of pit. The toolsBar was set to a transparent color to allow real-time visibility into the View in AppBarLayout. When fully scaled, the toolsBar was set to a transparent color. The Toolsbar appears at the front, and everything behind it can’t be clicked. The Toolsbar has a layout stone that shrinks when the head is expanded and displays when the head is not expanded, dynamically displaying and hiding two identical layouts. If you put the layout in AppBarLayout at the bottom and let the head completely indented, the two layouts will not overlap completely, so that there will be a slight jump in the control, display and hide. So witty as I, found that they are just a state of distance well a line of code, close the distance between you and me:

RelativeLayout backRe;
backRe.setPadding(0.0.0, DensityUtil.getZhuangtai(this));
Copy the code

It’s all done, just a little bit of coordinate manipulation inside your RelativelayoutBehavior that you don’t need anywhere else, so it’s pretty easy to use. I feel that there are still areas to be optimized and I hope you can give more suggestions.

Github: github.com/AndroidMsky…

See Chris Banes at github.com/chrisbanes