,,Android5.0+ CollapsingToolbarLayout使用详解

,,Android5.0+ CollapsingToolbarLayout使用详解

这篇文章主要为大家详细介绍了安卓5.0折叠工具栏布局使用,感兴趣的小伙伴们可以参考一下

折叠工具栏布局作用是提供了一个可以折叠的工具栏,它继承至框架布局,给它设置布局_滚动标志它可以控制包含在折叠工具栏布局中的控件(如:图像视图,工具栏)在响应布局_行为事件时作出相应的滚动标志滚动事件(移除屏幕或固定在屏幕顶端)。

使用CollapsingToolbarLayout:

安卓。支持。设计。小部件。应用程序栏布局

Android:layout _ width=' match _ parent '

android:layout_height='256dp '

Android:fitsSystemWindows=' true '

安卓。支持。设计。小部件。折叠工具栏布局

Android:id=' @ id/collapsing _ toolbar _ layout '

Android:layout _ width=' match _ parent '

Android:layout _ height=' match _ parent '

应用程序:contentScrim='#30469b '

app:expandedTitleMarginStart=' 48dp '

app:layout _ scroll flags=' scroll | exituntillcollapsed '

图像视图

Android:layout _ width=' match _ parent '

Android:layout _ height=' match _ parent '

android:scaleType='centerCrop '

android:src='@mipmap/bg '

app:layout _ collapse模式=' parallax '

app:layout _ collapseParallaxMultiplier=' 0.7 '/

安卓。支持。V7。小部件。工具栏

android:id='@ id/toolbar '

Android:layout _ width=' match _ parent '

android:layout_height='?'' attr/actionBarSize '

app:layout_collapseMode='pin' /

/安卓。支持。设计。小部件。折叠工具栏布局

/安卓。支持。设计。小部件。应用程序栏布局

我们在折叠工具栏布局中设置了一个图像视图和一个工具栏。并把这个折叠工具栏布局放到AppBarLayout中作为一个整体。

1、在折叠工具栏布局中:

我们设置了布局_滚动标志:关于它的值我这里再说一下:

滚动-想滚动就必须设置这个。

总是输入-实现快速返回效果,当向下移动时,立即显示查看(比如工具栏).

exituntillcollapsed向上滚动时收缩查看,但可以固定工具栏一直在上面。

输入总是折叠-当你的视角已经设置米恩海特属性又使用此标志时,你的视角只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。

其中还设置了一些属性,简要说明一下:

内容稀松布-设置当完全折叠工具栏布局折叠(收缩)后的背景颜色。

expandedTitleMarginStart -设置扩张时候(还没有收缩时)标题向左填充的距离。

没扩张时候如图:

2、在图像视图控件中:

我们设置了:

布局_折叠模式(折叠模式) - 有两个值:

pin -设置为这个模式时,当折叠工具栏布局完全收缩后,工具栏还可以保留在屏幕上。

视差-设置为这个模式时,在内容滚动时,折叠工具栏布局中的查看(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout _ collapseParallaxMultiplier(设置视差因子)搭配使用。

layout _ collapseParallaxMultiplier(视差因子) - 设置视差滚动因子,值为:0~1。

3、在工具栏控件中:

我们设置了布局_折叠模式(折叠模式):为别针。

综上分析:当设置了布局_行为的控件响应起了折叠工具栏布局中的布局_滚动标志事件时,图像视图会有视差效果的向上滚动移除屏幕,当开始折叠时折叠工具栏布局的背景色(也就是工具栏的背景色)就会变为我们设置好的背景色,工具栏也一直会固定在最顶端。

效果如图:

【注】:使用折叠工具栏布局时必须把标题设置到折叠工具栏布局上,设置到工具栏上不会显示。即:

mcollapsingtoolbarlayout。设置标题(" ");

该变标题的字体颜色:

扩张时候的标题颜色:mcollapsingtoolbarlayout。setexpandtitlecolor();

收缩后在工具栏上显示时的标题的颜色:mcollapsingtoolbarlayout。setcollapsedtitletextcolor();

这个颜色的过度变化其实折叠工具栏布局已经帮我们做好,它会自动的过度,比如我们把收缩后的标题颜色设为绿色,效果如图:

没录好,反正效果出来了。

接下来看看代码怎么实现吧:

布局文件:

安卓。支持。设计。小部件。协调器布局

xmlns:Android=' http://模式。安卓。' com/apk/RES/Android '

xmlns:app=' http://模式。安卓。' com/apk/RES-auto '

xmlns:tools=' http://模式。安卓。' com/tools '

Android:layout _ width=' match _ parent '

Android:layout _ height=' match _ parent '

工具:上下文='。'主要活动'

安卓。支持。设计。小部件。应用程序栏布局

Android:layout _ width=' match _ parent '

android:layout_height='256dp '

Android:fitsSystemWindows=' true '

安卓。支持。设计。小部件。折叠工具栏布局

Android:id=' @ id/collapsing _ toolbar _ layout '

Android:layout _ width=' match _ parent '

Android:layout _ height=' match _ parent '

应用程序:contentScrim='#30469b '

app:expandedTitleMarginStart=' 48dp '

app:layout _ scroll flags=' scroll | exituntillcollapsed '

图像视图

Android:layout _ width=' match _ parent '

Android:layout _ height=' match _ parent '

android:scaleType='centerCrop '

android:src='@mipmap/bg '

app:layout _ collapse模式=' parallax '

app:layout _ collapseParallaxMultiplier=' 0.7 '/

安卓。支持。V7。小部件。工具栏

android:id='@ id/toolbar '

Android:layout _ width=' match _ parent '

android:layout_height='?'' attr/actionBarSize '

app:layout_collapseMode='pin' /

/安卓。支持。设计。小部件。折叠工具栏布局

/安卓。支持。设计。小部件。应用程序栏布局

线性布局

Android:layout _ width=' match _ parent '

Android:layout _ height=' match _ parent '

安卓:方向='垂直'

app:layout _ behavior=' @ string/app bar _ scrolling _ view _ behavior '

安卓。支持。V7。小部件。回收视图

Android:id=' @ id/recycle view '

Android:layout _ width=' match _ parent '

Android:layout _ height=' match _ parent '

安卓系统:滚动条='无'/

/线性布局

/安卓。支持。设计。小部件。协调器布局

代码文件:

Toolbar mToolbar=(Toolbar)findViewById(r . id。工具栏);

setSupportActionBar(mToolbar);

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

mtoolbar。setnavigationonclicklistener(新视图OnClickListener() {

@覆盖

公共void onClick(视图五){

onBackPressed();

}

});

//使用折叠工具栏布局必须把标题设置到折叠工具栏布局上,设置到工具栏上则不会显示

CollapsingToolbarLayout mCollapsingToolbarLayout=(CollapsingToolbarLayout)findViewById(r . id。折叠_工具栏_布局);

mcollapsingtoolbarlayout。设置标题(' CollapsingToolbarLayout ');

//通过折叠工具栏布局修改字体颜色

mcollapsingtoolbarlayout。setexpandtitlecolor(Color .白色);//设置还没收缩时状态下字体颜色

mcollapsingtoolbarlayout。setcollapsedtitletextcolor(Color .绿色);//设置收缩后工具栏上字体的颜色

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • windowsandroid手机版下载,windowsandroid安装apk
  • windowsandroid手机版下载,windowsandroid安装apk,WindowsAndroid 安装教程详解
  • android调用webview方法,androidwebview是什么,Android 中 WebView 的基本用法详解
  • android传感器高级编程,Android传感器,Android编程之光线传感器用法详解
  • android.app.Dialog,android自定义dialog对话框,Android开发笔记之-Dialog的使用详解
  • android 图片视频轮播框架,androidlayout轮播图,Android实现炫酷轮播图效果
  • android里的viewpager,安卓自定义view流程,Android自定义引导玩转ViewPager的方法详解
  • android里的viewpager,android viewpager详解
  • android里的viewpager,android viewpager详解,Android自定义超级炫酷的ViewPage指示器
  • android调用webview方法,androidwebview是什么
  • android设置控件宽度,android获取屏幕宽度和高度
  • android设置控件宽度,android获取屏幕宽度和高度,Android中获取控件宽高的4种方法集合
  • android蓝牙开发的基本流程,安卓蓝牙app开发教程
  • android蓝牙开发的基本流程,安卓蓝牙app开发教程,android蓝牙简单开发示例教程
  • android菜单栏,android菜单控件
  • 留言与评论(共有 条评论)
       
    验证码: