Android折叠式工具栏的实现(CollapsingToolbar的应用)

  • 先添加依赖库的代码在build.gradle中,由于依赖库代码一直更新,还请直接去官网查找。
  • 在activity_main.xml文件中添加AppBarLayout
<android.support.design.widget.AppBarLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content">
	</android.support.design.widget.CoordinatorLayout>
  • 在AppBarLayout布局中添加一个CollapsingToolbarLayout并在该布局中添加一个ImageView组件用于显示展开后得工具栏图片,然后再添加一个Toolbar组件用于显示工具栏
<android.support.design.widget.CollapsingToolbarLayout
	android:id="@id/collapsingToolbarLayout"
	app:layout_scrollFlags="scroll|exitUntilCollapsed">
	<ImageView
	id="main.backdrop"
	scaleType="centerCrop">
	<!--上面一行代码的翻译:标度类型=“中心裁剪”-->
	<android.support.v7.widget.Toolbar
	id="toolbar"
	app:layout_collapseMode="pin">

上面最后一行代码的解释:
ImageView 组件中的app:layout_collapseMode="parallax属性代表在折叠的过程中图片产生错位偏移的视觉效果。
而ToolBar组件中app:layout+collapseMode="pin"属性表示在折叠的过程中该组件的位置始终保持不变。

  • AppBarLayout布局下添加一个NestedScrollView(嵌套滚动布局)然后在该组件中添加一个TextView组件来实现滚动现实的文字
<android.support.v4.widget.NestedScorllView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
lw="mp"
lh="wc">
	<TextView
	lw="m_p"
	lh="w_c"
	text="随你便">

NestedScrollView组件不仅像ScrollVewi那样使用滚动的方式查看屏幕以外的数据,还增加了相应滚动事假的功能,由于CoordinatorLayout已经可以相应滚动事件了,所以该布局中需要使用NestedScrollView或者是recyclerView这样的滚动组件折叠工具栏进行联动。该组件中的app:layout_behavior="@string/appbar_scrolling_view_behavior"属性这里是指NestedScrollView组件只可保持在AppBarLayout的下面,改变AppBarLayout内容位置是NestedScrollView组件时刻保持在AppBarLayou的下面,改变AppBarLayout内容位置时NestedScrollView组件可以一起滚动,起到联动的作用。

public class MainActivity extends AppCompatActivity{
	@Override
	protected void onCreate(Bundle saveInstanceState){
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		Toolbar toolbar =  findViewById(R.id.toolbar);//获取ToolBar
		setSupportActionBar(toolbar);//设置工具栏为ToolBar
		CollapsingToolbarLayout ctl = findViewById(R.id.collapsingToolbarLayout);
		ctl.setTitle("这是标题文字");
		ctl.setExpandedTitleColor(Color.RED);//未折叠时标题文字的颜色
		ctl.setCollapsedTitleTExtColor(Color.WHITE);//折叠后的标题文字颜色
		ctl.setContentScrimColor(getResources().getColor(R.color.colorPrimary));
	}
}

以下是结果图
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值