学习CoordinatorLayout你需要知道的那些事

随着Android M的发布同时也带来了新的控件CoordinatorLayout.

想要你的各控件之间有很好的"联动性"动画效果,学会使用这个控件能帮你解决这个问题.

下面一步步的去了解CoordinatorLayout控件怎么用:

CoordinatorLayout

CoordinatorLayout的作用是什么?

CoordinatorLayout是用来协调其子view们之间动作的一个父view

• CoordinatorLayout须作为顶层父View
• 子View想要与CoordinatorLayout实现"联动性"效果的首要条件是这个View必须实现了NestedScrollingChild接口 RecyclerView，NestedScrollView等新的控件都实现这个接口,ListView这些旧的控件就无法使用了.
• 只有CoordinatorLayout的直接子View才会有效果,子View的子View无效

Behavior

Behavior的作用是什么?

Behavior用于当前控件的父控件CoordinatorLayout中的其他子控件的关系

• 使用Behavior的控件必须是直接从属于CoordinatorLayout,否者无效

• 自定义Behavior的时候必须覆盖下面的构造方法,因为通过反射实例化的时候用的就是该构造方法.

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

AppBarLayout

AppBarLayout下的子View,注意是AppBarLayout如果设置了layout_scrollFlags="snap",但是Viewpager没有设置layout_behavior,View一样会自动隐藏,但是是动画形式,而不是跟随手机移动距离进行判断,并且AppBar控件会显示在ViewPager的上面挡住,Viewpager设置了layout_scrollFlags以后会恢复正常.

AppBarLayout的作用是什么?

作为一个容器把AppBarLayout内的所有子View"合并"成一个整体的View.

ezgif.com-optimize.gif

两个自定义Behavior的效果都图都差不多,上图是Behavior2的效果,两者的区别是前者随着AppBarLayout的滑动一起滑动,后者是dy大于0执行隐藏动画 小于0执行显示动画

只要理解了各个控件的作用,其实用起来并不难.

TabLayout

TabLayout的作用是什么?

作用就是实现上一张gif图的效果,在Toolbar下面显示多个Tab.

直接看源码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
>


/*
* Google官方的侧滑菜单控件和本文知识点无法,可以无视.
*/
<android.support.design.widget.NavigationView
    android:id="@+id/nv_left_content"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="left"
    android:background="#696969"
    app:headerLayout="@layout/fragment_navigation"
    app:menu="@menu/left_home_botton"
    />



    <android.support.design.widget.CoordinatorLayout

    android:id="@+id/behavior_demo_coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:title="CoordinatorLayout"
            >
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            app:tabIndicatorColor="@color/colorAccent">

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="tab1"/>

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="tab2"/>

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="tab3"/>

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="tab4"/>

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

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


    <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>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        android:background="@color/colorPrimary"
        android:gravity="center"
        app:layout_behavior="com.lipt0n.coordinatorlayout.MyFabBehavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="底部菜单"
            android:textColor="#ffffff"/>
    </LinearLayout>

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

看到上面的AppBarLayout部分的代码了?再次体现了AppBarLayout下子View作为一个整体的作用

screenrecorder_Trimmed_20170207_135046.gif

注意点:可以看到TabLayout没有设置app:layout_scrollFlags属性,原因是我只希望ToolBar进行滑动隐藏,TabLayout只是跟随ToolBar滑动不隐藏.(看不懂文字的可以看gif图),想要让TabLayout也隐藏加上app:layout_scrollFlags属性.

代码部分简单讲一下:

就是先对ViewPager进行适配,然后实例化TabLayout,然后调用tablayout.setupWithViewPager(viewPager)让tablayout和Viewpager进行关联,这样滑动viewpager,tablayout的指示器就会跟着改变,点击tablayout的指示器,Viewpager也会切换.

还有其他的内容有需要的话会在下一篇的文章会接着写。

如果文章有错误的地方希望能指出,避免误导他人.