最近,看你很多手机APP上有一些非常酷炫的动画,以为非常难,上网查询结果非常简单。只需要简单使用控件就可以完成,不用写一些动画效果。当然,自己不满意也可以自己实现动画效果。在这里就简单介绍CoordinatorLayout组件的使用。
CoordinatorLayout的历史我就不介绍,网上有很详细的介绍,我就直接进入正题。
CoordinatorLayout是一个能够协调子视图之间的样式动画改变的效果。(自己看别人代码自己理解的,可能解释不准确)
首先还是的引入库:compile'com.android.support:design:23.1.1'
CoordinatorLayout + AppBarLayout效果实现(效果图和代码如下)
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.example.goordinatorlayout.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#FF7F50"
app:layout_scrollFlags="scroll|enterAlways">
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="我是顶层"
android:textSize="20dp"
android:textColor="#ffffff"
android:gravity="center"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!--滑动里的英文文本布局-->
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
布局很丑,不要在意!!!
结合代码,在上面黄色部分就是我的AppBarLayout布局包裹的,红色是我的NestedScrollView(RecyclerView也可以)布局包裹的部分。整个的CoordinatorLayout包裹的使用之前,看了一些博客上文章,发现有的人说Listview实现不了效果,查了资料,发现CoordinatorLayout实现NestedScrollingParent接口,RecycleView实现了NestedScrollingChild接口.
在这里注意滑动的View,目前只支持RecyclerView和NestedScrollView这两种(查资料网上有解决的办法,其实Lsitview可以实现,但要给Listview实现NestedScrollingChild接口,并且再给外嵌套NestedScrollView)。所以很麻烦,用RecyclerView就可以了,而且功能比Listview强大。
其实,我们可以从代码看出,黄色部分其实是没有滑动的能力的,但他是怎么进行与NesetedScrollView联动的呢?
其实就是CoordinatorLayoutde的子View进行交互的插件behavior(这里behavior代码不做介绍)
首先要联动滑动效果要求:
(1)给能够滑动的View加上app:layout_behavior="@string/appbar_scrolling_view_behavior"
(例如:NsetedScrollView,RecyclerView)
(2)给需要被滑动的View加上app:layout_scrollFlags="scroll|enterAlways
(我这是给LinearLayout加的)
这样是可以实现联动滑动折叠的效果了。
介绍app:layout_scrollFlags五个属性:(重点)
scroll:
不加这个属性,上图中的黄色部分是不会具有滑动效果的,会直接固定在顶部的。(必须加这个scroll)
加上这个属性,动画效果:当NesetedScrollView中的内容全部滑动到顶部时,图中黄色部分才会进行折叠效果。如下图
scroll|enterAlways:
当黄色部分完全折叠或者完全展开的时候,NesetedScrollView里内容才会进行滑动。如下图:
对比Scroll和Scroll|enterAlways效果,前者是以NesetedScrollView内容优先,后者是以子视图(也就是黄色区域部分)为优先。
scroll|enterAlways|enterAlwaysCollapsed:
使用enterAlwaysCollapsed的条件:
(1)依赖enterAlways,如果直接Scroll|enterAlwaysCollapsed是没有效果的
(2)设置最小高度minHeight.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#FF7F50"
android:minHeight="50dp"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
</LinearLayout>
由之前的Scroll和scroll|enterAlways效果的对比,首先,子视图(也就是黄色部分)会先滑动到设置的最小的高度minHeight(这时黄色部分并未完全展开哦!!!),在滑动NesetedScrollView里的内容,知道内容滑动到最顶部,黄色区域才会滑动至最大高度,这时黄色区域完全展开。如下图:
通过上面图,可以知道为什么scroll|enterAlways|enterAlwaysCollapsed缺一不可,原因很简单,上面的图中黄色部分是分了两次展开。两次展开是根据两次临界点,根据scroll|enterAlways的优先级是先子视图(黄色部分),在下面文字滑动。第一次滑动到最小高度,这是文字内容在滑动至顶部,子视图进行第二次滑动至完全展开。如果写成scroll|enterAlwaysCollapsed这时优先级是NesetedScrollView(也就是文字区域),请问如果要实现一样效果,两次临界点在哪???所以必须写成scroll|enterAlways|enterAlwaysCollapsed。
scroll|exitUntilCollapsed:
同样也要设置最小高度,当向上滑动时,子视图(黄色区域)先滑动最小高度,但之后无论怎么滑动都不会完全让子视图消失的。如下图
scroll|snap:
这个效果是在你滑动一定高度时,它有个弹出或者回弹的效果,这很难描述-_-||,而且从效果图里看不出什么差别 ,这个你的自己动手实现,最好在手机上运行,亲自感受。如下图
其实,上面五种都很不错,而且结合其他控件还可以完成多种很好看的效果。
如果不满意自己也可以自己实现behavior里方法,不过自己还没研究过,所以只讲述控件的使用。