android之CollapsingToolbarLayout的使用

CollapsingToolbarLayout的使用

http://blog.csdn.net/qq_16628781/article/details/51569220

知识点：

1、CollapsingToolbarLayout的使用；

2、AppBarLayout ＋ Toolbar控件；

在不少的app中，我们都可以看到一些很炫的动画效果，其中一个便是往上滑动的时候，页面上部的一个区域会根据上划的距离来收缩。还带着一些文字的运动和颜色的变化等等。是很吸引人的效果。其中最主要的就是Google新提供的MD设计的控件之一：CollapsingToolbarLayout。还结合AppBarLayout，Toolbar等等新控件的结合使用。

除了Toolbar是在v7支持包中，其余的控件都是在android.support.design.widget 的v7包中。

我这里有一个效果图，可以看看

布局文件

[html]  view plain  copy

 

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.     xmlns:tools="http://schemas.android.com/tools"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     android:fitsSystemWindows="true"  
8.     tools:context="com.tanksu.kuyuyaojt.minetest.ScrollingActivity">  
9.   
10.     <android.support.design.widget.AppBarLayout  
11.         android:id="@+id/app_bar"  
12.         android:layout_width="match_parent"  
13.         android:layout_height="@dimen/app_bar_height"  
14.         android:fitsSystemWindows="true"  
15.         android:theme="@style/AppTheme.AppBarOverlay">  
16.   
17.         <!--  
18.         app:collapsedTitleGravity="center"//收缩后,title位于titlebar的那个位置,  
19.         有right|center|left|bottom|center_horizontal|fill_vertical|start|end|top属性  
20.         可以结合使用  
21.   
22.         app:expandedTitleGravity="left|bottom"//展开后,title位于左下角  
23.   
24.         app:layout_scrollFlags="scroll|exitUntilCollapsed"//这个是重点  
25.         scroll:这个是设置布局可以跟随滚动的,不设置则没有效果  
26.         exitUntilCollapsed:收缩后,titlebar会固定在顶部  
27.         enterAlways:实现quick return效果, 当向下移动时，立即显示View（比如Toolbar)  
28.         enterAlwaysCollapsed:当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度  
29.   
30.         app:title="Collapsing"//设置标题为Collapsing  
31.         以上这些属性,也是可以在代码中设置的,我在代码中也写了部分的属性设置的代码  
32.   
33. 这里不多说，我要说的都在代码里面说明白了。  
34.   
35.         -->  
36.         <android.support.design.widget.CollapsingToolbarLayout  
37.             android:id="@+id/toolbar_layout"  
38.             android:layout_width="match_parent"  
39.             android:layout_height="match_parent"  
40.             android:fitsSystemWindows="true"  
41.             app:collapsedTitleGravity="center"  
42.             app:expandedTitleGravity="left|bottom"  
43.             app:layout_scrollFlags="scroll|exitUntilCollapsed"  
44.             app:title="Collapsing">  
45.   
46.             <!--  
47.             app:layout_collapseMode="pin"//  
48.             pin:收缩时,设置控件位置固定不动  
49.             parallax:收缩是,设置控件位置跟随往上滚动,直至滚出屏幕  
50.             none:收缩时,不受滚动的限制,无效果  
51.             -->  
52.             <android.support.v7.widget.Toolbar  
53.                 android:id="@+id/toolbar"  
54.                 android:layout_width="match_parent"  
55.                 android:layout_height="?attr/actionBarSize"  
56.                 app:layout_collapseMode="pin"  
57.                 app:popupTheme="@style/AppTheme.PopupOverlay"></android.support.v7.widget.Toolbar>  
58.   
59.             <!--  
60.                 这里一定要注意布局控件的层次关系,我们要将返回按钮和username等控件放在toolbar之后  
61.                 只有这样,这些控件才会在toolbar之上,我们才可以点击这些控件  
62.             -->  
63.             <LinearLayout  
64.                 android:layout_width="wrap_content"  
65.                 android:layout_height="wrap_content"  
66.                 android:layout_gravity="center"  
67.                 android:orientation="vertical"  
68.                 app:layout_anchor="@+id/app_bar"  
69.                 app:layout_collapseMode="pin">  
70.   
71.                 <TextView  
72.                     android:layout_width="wrap_content"  
73.                     android:layout_height="wrap_content"  
74.                     android:drawableTop="@mipmap/car3"  
75.                     android:text="userName"  
76.                     android:textColor="#f3d468"  
77.                     android:textSize="20sp" />  
78.             </LinearLayout>  
79.   
80.             <ImageButton  
81.                 android:id="@+id/imgbtn_back"  
82.                 android:layout_width="50dp"  
83.                 android:layout_height="?attr/actionBarSize"  
84.                 android:src="@mipmap/back"  
85.                 android:text="back"  
86.                 app:layout_collapseMode="pin" />  
87.   
88.         </android.support.design.widget.CollapsingToolbarLayout>  
89.     </android.support.design.widget.AppBarLayout>  
90.   
91.     <include  
92.         android:id="@+id/include"  
93.         layout="@layout/content_scrolling" />  
94.   
95.     <!--  
96.     这个控件很多地方都可以用到,请不错的,翻译过来就是浮动按钮。悬浮与父布局之上,可以很友好的进行动作的相应  
97.     这里我就不多讲。重点讲一下这个属性:  
98.     app:layout_anchor="@+id/app_bar"//布局锚点  
99.     这里设置了@+id/app_bar,说明此控件的动作,是由id = app_bar控件来触发的。这里相当于做一个监听注册  
100.     这里id = app_bar 的控件是AppBarLayout  
101.   
102.     app:layout_anchorGravity="bottom|right"  
103.     设置浮动按钮的位置为右下角  
104.     -->  
105.     <android.support.design.widget.FloatingActionButton  
106.         android:id="@+id/fab"  
107.         android:layout_width="wrap_content"  
108.         android:layout_height="139dp"  
109.         android:layout_gravity="top"  
110.         android:layout_margin="@dimen/fab_margin"  
111.         android:src="@android:drawable/ic_dialog_email"  
112.         app:layout_anchor="@+id/app_bar"  
113.         app:layout_anchorGravity="bottom|right" />  
114.   
115. </android.support.design.widget.CoordinatorLayout>  

java文件的主要代码：

[java]  view plain  copy

 

1. @Override  
2.     protected void onCreate(Bundle savedInstanceState) {  
3.         super.onCreate(savedInstanceState);  
4.         setContentView(R.layout.activity_scrolling);  
5.         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  
6.         setSupportActionBar(toolbar);  
7.   
8.         FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);  
9.         fab.setOnClickListener(new View.OnClickListener() {  
10.             @Override  
11.             public void onClick(View view) {  
12.                 Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)  
13.                         .setAction("Action", null).show();  
14.             }  
15.         });  
16.         CollapsingToolbarLayout collapsingToolbar =  
17.                 (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);  
18. //        collapsingToolbar.setTitle("Title");  
19. //        collapsingToolbar.setCollapsedTitleTextColor(Color.RED);//收缩中字体颜色逐渐向指定的红颜色改变  
20. //        collapsingToolbar.setDrawingCacheBackgroundColor(Color.GREEN);//收缩后title的背景色为绿色  
21. //        collapsingToolbar.setCollapsedTitleGravity(Gravity.CENTER);//设置字体收缩后,放置到titlebar的中间部分  
22. //        collapsingToolbar.setBackgroundResource(R.mipmap.ts_fa);//设置整个toolbar的背景图片  
23. //        collapsingToolbar.setContentScrim(getResources().getDrawable(R.mipmap.ts_shou));//设置收缩后,titlebar的背景图片  
24. //        collapsingToolbar.setContentScrimColor(Color.GRAY);//设置收缩后,titlebar的背景颜色为灰色  
25. //        collapsingToolbar.setExpandedTitleColor(Color.YELLOW);//扩张时候的title颜色为黄色  
26.         findViewById(R.id.imgbtn_back).setOnClickListener(new View.OnClickListener() {  
27.             @Override  
28.             public void onClick(View v) {  
29.                 Toast.makeText(ScrollingActivity.this, "imgbtn_back", Toast.LENGTH_SHORT).show();  
30.             }  
31.         });  
32.     }  

收缩过程中的效果图：

收缩完成：

以上只是很粗浅的理解，望各位指出错误之处。

如有任何疑问，请及时联系我。