CoordinatorLayout實現的效果(標題欄效果)

本文轉載自查看原文 2017-07-04 14:30 5554 Android項目拆分

一、效果

CoordinatorLayouy是一個能夠協調子布局的容器布局。

使用引入：

compile 'com.android.support:design:24.1.1'

常見的使用方法如下：
1.與AppbarLayout共同包裹Toolbar可以實現滾動隱藏Toolbar和重現Toolbar。

實現布局：（通過布局就可以實現這樣的效果）CoordinatorLayout + AppBarLayout + Toolbar 實現該效果

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:fitsSystemWindows="true"
 7     android:orientation="vertical">
 8 
 9     <android.support.design.widget.AppBarLayout
10         android:id="@+id/app_bar"
11         android:layout_width="match_parent"
12         android:layout_height="wrp_content"
13         android:fitsSystemWindows="true"
14         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
15 
16           <android.support.v7.widget.Toolbar
17               android:id="@+id/toolbar"
18               android:layout_width="match_parent"
19               android:layout_height="?attr/actionBarSize"
20               app:layout_scrollFlags="scroll|enterAlways"
21               app:navigationIcon="@drawable/ic_arrow_back" />
22     </android.support.design.widget.AppBarLayout>
23 
24     <LinearLayout
25         android:layout_width="match_parent"
26         android:layout_height="match_parent"
27         android:orientation="vertical"
28         app:layout_behavior="@string/appbar_scrolling_view_behavior">
29 
30         <LinearLayout
31             android:layout_width="match_parent"
32             android:layout_height="wrap_content"
33             android:background="@color/colorPrimary">
34 
35             <TextView
36                 android:layout_width="0dp"
37                 android:layout_height="wrap_content"
38                 android:layout_gravity="center"
39                 android:layout_weight="1"
40                 android:gravity="center"
41                 android:padding="10dp"
42                 android:text="未開始"
43                 android:textColor="#fff"
44                 android:textSize="16sp" />
45 
46             <TextView
47                 android:layout_width="0dp"
48                 android:layout_height="wrap_content"
49                 android:layout_weight="1"
50                 android:gravity="center"
51                 android:padding="10dp"
52                 android:text="已開始"
53                 android:textColor="#fff"
54                 android:textSize="16sp" />
55         </LinearLayout>
56 
57         <android.support.v7.widget.RecyclerView
58             android:id="@+id/recycle_view"
59             android:layout_width="match_parent"
60             android:layout_height="match_parent"
61             android:padding="10dp"
62             android:scrollbars="vertical" />
63     </LinearLayout>
64 
65 </android.support.design.widget.CoordinatorLayout>

2.CoordinatorLayout+CollapsingToolbarLayout配合ImageView實現視差滾動效果

　　　　　　　　　　(一)　　　　　　　　　　　　　　　　　　　　　　(二)

視差效果一和二的區別看代碼：（注釋的一行放開，就是效果二） CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout + Toolbar 實現效果

 1 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:app="http://schemas.android.com/apk/res-auto"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:fitsSystemWindows="true"
 6     android:orientation="vertical">
 7 
 8     <android.support.design.widget.AppBarLayout
 9         android:id="@+id/app_bar"
10         android:layout_width="match_parent"
11         android:layout_height="200dp"
12         android:fitsSystemWindows="true"
13         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
14 
15         <android.support.design.widget.CollapsingToolbarLayout
16             android:id="@+id/collapsing_toolbar"
17             android:layout_width="match_parent"
18             android:layout_height="match_parent"
19             android:fitsSystemWindows="true"
20             app:contentScrim="?attr/colorPrimary"
21             app:expandedTitleMarginEnd="64dp"
22             app:expandedTitleMarginStart="48dp"
23             app:layout_scrollFlags="scroll|exitUntilCollapsed">
24             
25            <!-- <ImageView
26                 android:layout_width="match_parent"
27                 android:layout_height="match_parent"
28                 android:scaleType="centerCrop"
29                 android:src="@mipmap/a"
30                 app:layout_collapseMode="parallax"
31                 app:layout_collapseParallaxMultiplier="0.7" />-->
32 
33             <android.support.v7.widget.Toolbar
34                 android:id="@+id/toolbar"
35                 android:layout_width="match_parent"
36                 android:layout_height="?attr/actionBarSize"
37                 app:layout_collapseMode="pin"
38                 app:navigationIcon="@drawable/ic_arrow_back"
39                 app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
40 
41         </android.support.design.widget.CollapsingToolbarLayout>
42     </android.support.design.widget.AppBarLayout>
43 
44     <LinearLayout
45         android:layout_width="match_parent"
46         android:layout_height="match_parent"
47         android:orientation="vertical"
48         app:layout_behavior="@string/appbar_scrolling_view_behavior">
49 
50         <LinearLayout
51             android:layout_width="match_parent"
52             android:layout_height="wrap_content"
53             android:background="@color/colorPrimary">
54 
55             <TextView
56                 android:layout_width="0dp"
57                 android:layout_height="wrap_content"
58                 android:layout_gravity="center"
59                 android:layout_weight="1"
60                 android:gravity="center"
61                 android:padding="10dp"
62                 android:text="未開始"
63                 android:textColor="#fff"
64                 android:textSize="16sp" />
65 
66             <TextView
67                 android:layout_width="0dp"
68                 android:layout_height="wrap_content"
69                 android:layout_weight="1"
70                 android:gravity="center"
71                 android:padding="10dp"
72                 android:text="已開始"
73                 android:textColor="#fff"
74                 android:textSize="16sp" />
75         </LinearLayout>
76 
77         <android.support.v7.widget.RecyclerView
78             android:id="@+id/recycle_view"
79             android:layout_width="match_parent"
80             android:layout_height="match_parent"
81             android:padding="10dp"
82             android:scrollbars="vertical" />
83     </LinearLayout>
84 
85 </android.support.design.widget.CoordinatorLayout>

二、說明

scrollFlags，通過設置它的值可以實現不同的滾動模式，有四種值

1.scroll ，滾動。所有的Flag都要設置這個值，設置了之后可以向上滾動出屏幕。
2.enterAlways ，設置了這個值的話，該View會在向下滑動的時候立刻顯示出來。
3.exitUntilCollapsed ，向上滑動時，所有組件都會滾出屏幕，但Toolbar除外。
4.enterAlwaysCollapsed ，如果你的View設置了最小高度（minHeight）,該View只會以這個最小高度滾出屏幕

layout_collapseMode，設置折疊模式，設置 parallax 為折疊，Pin 是不折疊

1  app:layout_collapseMode="parallax"

視差效果中：

1 app:contentScrim="?attr/colorPrimary"
2 app:expandedTitleMarginEnd="64dp"
3 app:expandedTitleMarginStart="48dp"

contentScrim：作用是當整個視圖收縮時，整個視圖的顏色。
expandedTitleMarginStart：設置Tittle文本的邊距，當視圖收縮后，Tittle離左邊的距離
expandedTitleMarginStart：設置Tittle文本的邊距，當視圖擴展后，Tittle離左邊的距離

圖片視差中：

app:layout_collapseParallaxMultiplier=”0.7”

layout_collapseParallaxMultiplier：視差滾動因子，自動收縮的比例值。當手指操作收縮到寬展的70%時，放開會自動收縮。

三、注意：
　　1. AppBarLayout必須是CoordinatorLayout的直接子View
　　2. 要把帶有scroll flag的view放在前面，這樣收回的view才能讓正常退出，而固定的view繼續留在頂部
　　3. android:fitsSystemWindows="true" 的使用注意
　　4. app:layout_scrollFlags屬性里面必須至少啟用scroll這個flag，這樣這個view才會滾動出屏幕，否則它將一直固定在頂部。
　　5. 在RecyclerView或者任意支持嵌套滾動的view比如NestedScrollView上添加app:layout_behavior。support library包含了一個特殊的字符串資源@string/appbar_scrolling_view_behavior，它的值為android.support.design.widget.AppBarLayout$ScrollingViewBehavior ，指向AppBarLayout.ScrollingViewBehavior，用來通知AppBarLayout 這個特殊的view何時發生了滾動事件，這個behavior需要設置在觸發滾動事件的view之上。

四、參考
http://blog.csdn.net/a8341025123/article/details/53006865
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0717/3196.html
http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 如何在Android中實現全屏，去掉標題欄效果 js實現HTML標題欄中新消息提示效果使用CoordinatorLayout、AppBarLayout和NestedScrollView實現簡單的滑動固定標題欄 el-table中怎樣設置標題欄顏色以及每一行顏色交替不同的效果小程序頂部標題欄隨滑動時的漸變隱藏和漸變顯示效果 WPF WindowChrome 自定義標題欄時窗體陰影效果設置使用 CoordinatorLayout 實現復雜聯動效果 android滑動標題欄漸變實現 Android實現隱藏狀態欄和標題欄去掉Firefox的標題欄