学习Android CoordinatorLayout（二）

上一篇文章介绍了几种coordinatorlayout的基础用法，其实就是用的系统自带的那种behavior，而有的时候那种效果是不满足需求的，向京东app头部那种随着页面的上下滑动actionbar的透明度也随之变化，下面就开始实现这种效果。这种效果就需要自定义behavior了，如果对behavior比较陌生可以百度下behavior的资料还是很多的强烈推荐鸿神微信公众号里面的文章关于CoordinatorLayout的内部原理强烈推荐啊！
下面开始咱们的代码首先是xml:

<?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:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="600px"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <!--<TextView-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="500px"-->
        <!--android:text="这是测试"-->
        <!--app:layout_scrollFlags="enterAlways" />-->

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="600px"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="600px"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher"
                app:layout_collapseMode="parallax" />

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

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


    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:lineSpacingExtra="10dp"
                android:text="测试\n测试1的状态\n测试2的状态\n测试3的状态\n测试4的状态\n测试5的状态\n测试6的状态\n测试7的状态\n测试8的状态\n测试9的状态\n测试10的状态\n测试11的状态\n测试12的状态\n测试13的状态\n测试14的状态\n测试15的状态\n测试16的状态\n测试12的状态\n测试13的状态\n测试14的状态\n测试15的状态\n测试16的状态\n测试12的状态\n测试13的状态\n测试14的状态\n测试15的状态\n测试16的状态"
                android:textSize="18sp" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:elevation="4px"
        <!--这是设置一个背景通常是一个PNG的图片，要是用单纯的颜色的话里面的内容也会变浅没法实现像京东一样的那种效果 -->
        android:background="@mipmap/lll"
        <!-- 这里用到了自定义的behavior-->
        app:layout_behavior="www.yunhuxinxi.coordinatorlayout.ToolbarAlphaScrollBehavior"
        app:layout_collapseMode="none"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100px"
            android:gravity="center"
            android:text="首页" />
    </android.support.v7.widget.Toolbar>

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

其实没什么特殊的就是在toolbar里面添加了一个自定义的behavior，下面看看自定义behavior的代码:

public class ToolbarAlphaScrollBehavior extends CoordinatorLayout.Behavior<Toolbar> {
    public ToolbarAlphaScrollBehavior() {

    }

    public ToolbarAlphaScrollBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, Toolbar child, View dependency) {
        return dependency instanceof AppBarLayout;
    }

    @Override
    public boolean onInterceptTouchEvent(CoordinatorLayout parent, Toolbar child, MotionEvent ev) {
        return ev == null || super.onInterceptTouchEvent(parent, child, ev);
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, Toolbar child, View dependency) {
        if (dependency instanceof AppBarLayout) {
        //计算滑动的比例根据这个比例来计算透明度
            float ratio = (float) getCurrentScrollValue(child, dependency) / getTotalScrollRange(child, dependency);
            float alpha = 1f - Math.max(0f, Math.min(1f, ratio));

            if (child.getChildCount() != 0)
                child.getChildAt(0).setAlpha(alpha);
        }

        return false;
    }
<!--
因为coordinatorlayout是一种特殊的fragmentlayout所以在以上xml里面child.gettop永远是0，这样写的目的是为了更加严谨一眼看上去就知道这个区域是那里）
!-->
    private int getCurrentScrollValue(Toolbar child, View dependency) {
        return dependency.getBottom() - child.getTop();
    }
<!--
滑动的距离
!-->
    private float getTotalScrollRange(Toolbar child, View dependency) {

        return Math.max(dependency.getHeight(), ((AppBarLayout) dependency).getTotalScrollRange()) - child.getTop();
    }

}

这就是我们所需要的beavior而在Activity里面代码：

 @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.ac_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    }

其实beavior里面最重要的就是根据比例来计算透明度，当然了还有一些更复杂的效果，比如支付宝app首页的头部，不光光是透明度的变化，actionbar上面的view的位置也会变化，当然还有更复杂的效果也都是利用这个coordinatorayout来完成的，总体来说这个布局把原来需要一大堆手势判断的才能实现的效果现在只需要简单的几行代码就能实现，进步还是很大的，android 的自带的动画效果和ios比来说那简直是太low了，不过android也在慢慢的改进，希望有一天android的ui效果可以干过ios！！！！！
coordinatorlayout就学到这，虽然还有好多不明白的但是算是入门了，下面开始学习自定义view，做一些市面上的app比较酷炫的view