美文网首页
CoordinatorLayout

CoordinatorLayout

作者: qianxL | 来源:发表于2016-10-06 14:42 被阅读0次

    CoordinatorLayout

    • 此布局呢主要用于协调子View的显示的位置,核心Behavior(行为)类, 其中更细分的概念就是 Child 和 Dependency . Child 指的就是 移动位置的View (子View),dependency 指的是CoordinatorLayout的直接从属View 。从这样的一个结构上就能看出 。Child 要 怎么移动呢就是在Behavior类中定义的。

    • 在XML布局文件加入 app:layout_behavior 就是子View (此处调用的就是Behavior类), 而只定义了app:layout_scrollFlags属性的呢就是dependency 。

    • 系统自带的就是支持AppBarLayout 做为dependency , 想支持其他的话就自己 继承 CoordinatorLayout.Behavior<T> 类,其中的泛型 就是传入 child 的类型.

    • Toolbar

      更大的作用就是替换ActionBar ,Toolbar 是可以根据需求自由排放的,跟重要的是统一每个版本动作条的外观。在代码中调用setSupportActionBar( )方法设置,使用时还是通过getSupportActionBar( )方法来获取actionBar 对象 ,来进行操作。

    • AppBarLayout

      AppBarLayout主要继承LinearLayout,而且布局方向为垂直(并提供滚动手势),其子View通过app:layout_scrollFlags标签设置其需要的滚动行为。通常来讲需要toolbar 的移动效果呢。CoordinatorLayout 作为顶层布局,AppBarlayout 做包含 toolbar 的 父布局,和AppBarlayout 并方置的就是主内容的布局。 综合来看呢就是 AppBarLayout 布局 作为dependency , 主内容布局作为 child (子View) ,这样呢CoordinatorLayout 就是通过dependency 来 协调 child 。

    • scrollFlags 主要常用四个标志位:

      • scroll ,此标志位呢一定得加,这样AppBarLayout下的子View 才能滚动。其他标志位仅仅是决定其滚动的特征的 。 就是scrollView 的一部分。即意味着只有到该view位置时才能滚动。


        scrollscroll
      • enterAlways , 加入此标识位呢,view总是跟随ScrollView 一起滚动。scrollview下滑时呢就跟着下滑,反之同理。

      • exitUntilCollapsed , 当View 加入此标志位后呢。就是当出现上滑的滚动事件时呢,如果这个View 所占高不是最小呢,就优先此滚动,直至此view 收起后才 ,响应滚动scrollView 。


        exitUntilCollapsedexitUntilCollapsed

        .

      • enterAlwaysCollapsed , 此标识位呢一般配合enterAlways来使用。 如果设置了此标志的View 已经隐藏了,scrollView 发生下滑事件,那么该view 会是先出现最小高度,
        当scrollView 已经滑动完了,该view 其他部分才出现。但是当出现上滑事件时呢还是此view先滑动,这些效果都是配合CollapsingToolbarLayout 使用。


        enterAlwaysCollapsedenterAlwaysCollapsed
    • 注意 当需要AppBarLayout 和 ScrollView 联动时呢,ScrollView 就只能使用NestedScrollView了,不然 AppBarLayout 是不能滚动的。

    CollapsingToolbarLayout

    应用此布局呢,就可以实现toolbar 展开时呢,有一个大背景,而收缩后还是toolbar,此布局需要放入到AppBarLayout 布局中作为其的直接子View。做出折叠的效果。
    此布局主要有5个功能:

    (1) 折叠Title:当此布局全部显示时呢,title 是最大的,但随着View 渐渐移出屏幕,title会逐渐变小。

    (2) 内容纱布 :根据滚动的位置看是否达到要求,来决定是否对View盖上"纱布"。通过setContentScrim(Drawable),来设置图片。

    (3) 状态栏纱布 :根据滚动的位置是否达到要求,来决定是否对title 盖上"纱布",可通过setStatusBarScrim(Drawable) 。但是只对大于等于LOLLIPOP(棒棒糖)的设备有作用。

    (4) 视差滚动子View 。就是将View 滚动速度减慢造成,折叠的效果,在XML文件中设置app:layout_collapseMode设为parallax 。

    (5) 将子View 的位置固定,这对Toolbar 很有用,因为当布局移动时呢,就可将其固定。在XML中通过app:layout_collapseMode 设为pin .

    布局:
    
    <?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:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    
            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
                <ImageView
                    android:id="@+id/main.backdrop"
                    android:layout_width="wrap_content"
                    android:layout_height="300dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/material_img"
                    app:layout_collapseMode="parallax" />
    
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?android:attr/actionBarSize"
                    app:layout_collapseMode="pin"  />
    
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>
    
        <android.support.v4.widget.NestedScrollView
    
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="50dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/my_txt"
                android:textSize="20sp" />
    
        </android.support.v4.widget.NestedScrollView>
    
    </android.support.design.widget.CoordinatorLayout>
    

    实现的效果:

    CollapsingToolbarLayoutCollapsingToolbarLayout

    相关文章

      网友评论

          本文标题:CoordinatorLayout

          本文链接:https://www.haomeiwen.com/subject/rjveyttx.html