欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-06-09 19:45:44
先添加依赖库的代码在build.gradle中,由于依赖库代码一直更新,还请直接去官网查找。在activity_main.xml文件中添加AppBarLayout
  • 先添加依赖库的代码在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));
	}
}

以下是结果图
Android折叠式工具栏的实现(CollapsingToolbar的应用)

本文地址:https://blog.csdn.net/a_pogrammer/article/details/109631105