CoordinatorLayout组件的简单使用(一)

最近,看你很多手机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里方法,不过自己还没研究过,所以只讲述控件的使用。



 
 


猜你喜欢

转载自blog.csdn.net/qq_37238649/article/details/79140549