首页 > 代码库 > Android控件大全(四)——CoordinatorLayout

Android控件大全(四)——CoordinatorLayout

2024-09-02 21:43:07   223人阅读

CoordinatorLayout 其实就是个高级的FrameLayout，用于协调子布局
要使用该控件，需要再gradle中加入：
 compile ‘com.android.support:design:24.2.1‘
1、CoordinatorLayout与AppBarLayout
 1 <android.support.design.widget.CoordinatorLayout
 2     android:layout_height="match_parent"
 3     android:layout_width="match_parent"
 4     xmlns:app="http://schemas.android.com/apk/res-auto"
 5     xmlns:android="http://schemas.android.com/apk/res/android">
 6        <android.support.design.widget.AppBarLayout
 7            android:layout_width="match_parent"
 8            android:layout_height="wrap_content">
 9            <android.support.v7.widget.Toolbar
10                app:layout_scrollFlags="scroll"
11                android:layout_width="match_parent"
12                android:layout_height="?attr/actionBarSize">
13            </android.support.v7.widget.Toolbar>
14        </android.support.design.widget.AppBarLayout>
15        <android.support.v7.widget.RecyclerView
16           app:layout_behavior="@string/appbar_scrolling_view_behavior"
17           android:id="@+id/recycler"
18           android:layout_width="match_parent"
19           android:layout_height="match_parent">
20    </android.support.v7.widget.RecyclerView>
21 </android.support.design.widget.CoordinatorLayout>

注意：代码的第10行和第16行  @string/appbar_scrolling_view_behavior 是系统自带的一个Behavior，我们之后再讨论，这边先看一下 app:layout_scrollFlags="scroll"

　　 　scroll、enterAlways、enterAlwaysCollapsed、exitUtilCollapsed、snap 五中可选

　　　　　scroll：伴随着滚动时间滚进滚出屏幕，如果设置了其他的flag，这个flag是必须写上的，不然没有效果；前面所有的子View都必须带上这个属性，不然没有效果

　　　　　enterAlways：快速返回模式，优先滚动toolbar

　　　　　enterAlwaysCollapsed ：要使用这种属性，必须设置一个minHeight，先将toolbar滚动至minHeight，然后滚动RecycylerView,滚动至顶部之后就继续滚动toolbar，并且需要配合enterAlways一起使用，否则没有效果

　　　　　exitUtilCollapsed：先将toolbar滚动至minHeight，然后滚动recyclerView，toolbar不会完全滚出屏幕

　　　　　snap：toolbar滚动添加一个吸附的效果



2、CoordinatorLayout与CollapsingToolbarLayout




 1 <android.support.design.widget.CoordinatorLayout
 2     android:layout_height="match_parent"
 3     android:layout_width="match_parent"
 4     xmlns:app="http://schemas.android.com/apk/res-auto"
 5     xmlns:android="http://schemas.android.com/apk/res/android">
 6    <android.support.design.widget.AppBarLayout
 7        android:layout_width="match_parent"
 8        android:layout_height="256dp">
 9     <android.support.design.widget.CollapsingToolbarLayout
10           android:id="@+id/collapse"
11           app:contentScrim="#30469b"
12           app:layout_scrollFlags="scroll|exitUntilCollapsed"
13           android:layout_width="match_parent"
14           android:layout_height="match_parent">
15              <ImageView
16                 app:layout_collapseMode="parallax"
17                 android:scaleType="center"
18                 android:src="@mipmap/timg"
19                 android:layout_width="match_parent"
20                 android:layout_height="match_parent" />
21              <android.support.v7.widget.Toolbar
22                  app:layout_collapseMode="pin"
23                  android:id="@+id/toolbar"
24                  android:layout_width="match_parent"
25                  android:layout_height="?attr/actionBarSize">
26          </android.support.v7.widget.Toolbar>
27       </android.support.design.widget.CollapsingToolbarLayout>
28    </android.support.design.widget.AppBarLayout>
29    <android.support.v7.widget.RecyclerView
30        app:layout_behavior="@string/appbar_scrolling_view_behavior"
31        android:id="@+id/recycler"
32        android:layout_width="match_parent"
33        android:layout_height="match_parent">
34    </android.support.v7.widget.RecyclerView>
35 
36 </android.support.design.widget.CoordinatorLayout>




注意：第11行：app:contentScrim设置折叠之后的颜色；


　　　第12行，flag必须设置成 scroll|exitUntilCollapsed；


　　　第16行 app:layout_collapseMode 设置成 parallax，表示图片会随着滚动开始渐变；


　　　第22行：设置成pin表示toolbar会停留在最上方


　　　此时如果要设置文字必须从CollapsingToolbarLayout入手




 <android.support.design.widget.FloatingActionButton
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="right|bottom|end"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />




　　实现floatingActionButton与AppbarLayout一同消失和呈现


 


 


Android控件大全(四)——CoordinatorLayout






























        

            
                
                  
                
                

                    联系

                    我们