学习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也会切换.
还有其他的内容有需要的话会在下一篇的文章会接着写。
如果文章有错误的地方希望能指出,避免误导他人.
