CollapsingToolbarLayout的使用
知识点:
1、CollapsingToolbarLayout的使用;
2、AppBarLayout + Toolbar控件;
在不少的app中,我们都可以看到一些很炫的动画效果,其中一个便是往上滑动的时候,页面上部的一个区域会根据上划的距离来收缩。还带着一些文字的运动和颜色的变化等等。是很吸引人的效果。其中最主要的就是Google新提供的MD设计的控件之一:CollapsingToolbarLayout。还结合AppBarLayout,Toolbar等等新控件的结合使用。
除了Toolbar是在v7支持包中,其余的控件都是在android.support.design.widget 的v7包中。
我这里有一个效果图,可以看看
布局文件
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.tanksu.kuyuyaojt.minetest.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<!--
app:collapsedTitleGravity="center"//收缩后,title位于titlebar的那个位置,
有right|center|left|bottom|center_horizontal|fill_vertical|start|end|top属性
可以结合使用
app:expandedTitleGravity="left|bottom"//展开后,title位于左下角
app:layout_scrollFlags="scroll|exitUntilCollapsed"//这个是重点
scroll:这个是设置布局可以跟随滚动的,不设置则没有效果
exitUntilCollapsed:收缩后,titlebar会固定在顶部
enterAlways:实现quick return效果, 当向下移动时,立即显示View(比如Toolbar)
enterAlwaysCollapsed:当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度
app:title="Collapsing"//设置标题为Collapsing
以上这些属性,也是可以在代码中设置的,我在代码中也写了部分的属性设置的代码
这里不多说,我要说的都在代码里面说明白了。
-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleGravity="center"
app:expandedTitleGravity="left|bottom"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="Collapsing">
<!--
app:layout_collapseMode="pin"//
pin:收缩时,设置控件位置固定不动
parallax:收缩是,设置控件位置跟随往上滚动,直至滚出屏幕
none:收缩时,不受滚动的限制,无效果
-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay"></android.support.v7.widget.Toolbar>
<!--
这里一定要注意布局控件的层次关系,我们要将返回按钮和username等控件放在toolbar之后
只有这样,这些控件才会在toolbar之上,我们才可以点击这些控件
-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
app:layout_anchor="@+id/app_bar"
app:layout_collapseMode="pin">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@mipmap/car3"
android:text="userName"
android:textColor="#f3d468"
android:textSize="20sp" />
</LinearLayout>
<ImageButton
android:id="@+id/imgbtn_back"
android:layout_width="50dp"
android:layout_height="?attr/actionBarSize"
android:src="@mipmap/back"
android:text="back"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
android:id="@+id/include"
layout="@layout/content_scrolling" />
<!--
这个控件很多地方都可以用到,请不错的,翻译过来就是浮动按钮。悬浮与父布局之上,可以很友好的进行动作的相应
这里我就不多讲。重点讲一下这个属性:
app:layout_anchor="@+id/app_bar"//布局锚点
这里设置了@+id/app_bar,说明此控件的动作,是由id = app_bar控件来触发的。这里相当于做一个监听注册
这里id = app_bar 的控件是AppBarLayout
app:layout_anchorGravity="bottom|right"
设置浮动按钮的位置为右下角
-->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="139dp"
android:layout_gravity="top"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email"
app:layout_anchor="@+id/app_bar"
app:layout_anchorGravity="bottom|right" />
</android.support.design.widget.CoordinatorLayout>
java文件的主要代码:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scrolling);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);
// collapsingToolbar.setTitle("Title");
// collapsingToolbar.setCollapsedTitleTextColor(Color.RED);//收缩中字体颜色逐渐向指定的红颜色改变
// collapsingToolbar.setDrawingCacheBackgroundColor(Color.GREEN);//收缩后title的背景色为绿色
// collapsingToolbar.setCollapsedTitleGravity(Gravity.CENTER);//设置字体收缩后,放置到titlebar的中间部分
// collapsingToolbar.setBackgroundResource(R.mipmap.ts_fa);//设置整个toolbar的背景图片
// collapsingToolbar.setContentScrim(getResources().getDrawable(R.mipmap.ts_shou));//设置收缩后,titlebar的背景图片
// collapsingToolbar.setContentScrimColor(Color.GRAY);//设置收缩后,titlebar的背景颜色为灰色
// collapsingToolbar.setExpandedTitleColor(Color.YELLOW);//扩张时候的title颜色为黄色
findViewById(R.id.imgbtn_back).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(ScrollingActivity.this, "imgbtn_back", Toast.LENGTH_SHORT).show();
}
});
}
收缩完成:
以上只是很粗浅的理解,望各位指出错误之处。
如有任何疑问,请及时联系我。