当CollapsingToolbarLayout与ToolBar如何设置Title居中
来源:互联网 发布:win8开始菜单软件 编辑:程序博客网 时间:2024/06/06 10:37
一、概述:
CollapsingToolbarLayout是一个可以折叠的Toolbar,继承与FrameLayout,是一个增强型的FrameLayout,给它设置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)
二、使用:
<?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"android:id="@+id/cdl_content"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="400dip" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/ctl_title" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="400dip" android:background="@mipmap/i1" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <android.support.v7.widget.Toolbar android:id="@+id/tl_title" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> </android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout><android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <TextView android:layout_width="match_parent" android:layout_height="1000dip" android:text="1000" /></android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>
我们看到xml里面有个app:layout_scrollFlags
属性,这个属性有几个值:
- scroll 想滚动就得设置这个
- enterAlways 快速显示View,也就是当向下滑动时候,立即就显示View
- exitUntilCollapsed 向上滚动收缩View
- enterAlwaysCollapsed 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度
还有其他的一些值:比如contentScrim
- contentScrim 收缩后的背景色
在ImageView
我们设置app:layout_collapseMode
跟app:layout_collapseParallaxMultiplier
layout_collapseMode(折叠模式)有两个值:
- pin 这个模式在Toolbar可以很好的体现,可以看到我们在Toolba就设置了这个模式,就是收缩后,留在屏幕上
- parallax 这个模式让滚动的同事也让ImageView同事滚动,实现双向滚动效果,和视差因子
app:layout_collapseParallaxMultiplier
一起使用.视差因子值为0~1;
代码里面还有NestedScrollView
,CoordinatorLayout
这两个控件都是MD的控件,这个NestedScrollView
跟ScrollView
,在使用并没有多大区别,但是NestedScrollView
提供了一套父View与子View滑动交互机制。
效果大致就像下面:
效果还是可以的。在Activity
需要写如下代码:
setSupportActionBar(tlTitle);//设置toolbar ctlTitle.setCollapsedTitleGravity(Gravity.CENTER);//设置收缩后标题的位置 ctlTitle.setExpandedTitleGravity(Gravity.CENTER);////设置展开后标题的位置 ctlTitle.setTitle("苍井空");//设置标题的名字 ctlTitle.setExpandedTitleColor(Color.WHITE);//设置展开后标题的颜色 ctlTitle.setCollapsedTitleTextColor(Color.WHITE);//设置收缩后标题的颜色
恩~大致效果就是这样,一般这个做详情页比较实用。
三、问题:
我相信眼睛尖的小伙伴已经发现了一个问题,对,就是那个标题不居中,这个对用户体验很不好。 上面图可能太快了,我给大家发个静态的。
这个问题在stackoverflow
有说给CollapsingToolbarLayout
设置app:expandedTitleGravity="center_horizontal
,但是然并软,没用,后来发现Toolbar
有两个这样的属性(切记:是Toolbar
属性不是CollapsingToolbarLayout
的属性):
- app:contentInsetLeft=”0dp”
- app:contentInsetStart=”0dp”
给这两个都是设置0dp就可以实现标题居中了。
最后的效果:
推荐:
程序员自己的导航网站
- 当CollapsingToolbarLayout与ToolBar如何设置Title居中
- CollapsingToolbarLayout 中的Toolbar Title 居中
- Android-Toolbar title文字大小设置及居中显示
- 自定义ToolBar与ToolBar的封装,使ToolBar的Title居中
- 设置toolbar标题居中
- Toolbar设置标题居中
- toolbar标题设置居中
- ToolBar的title居中以及一些注意事项
- ToolBar的title的精确居中!
- ToolBar的title居中以及一些注意事项
- ToolBar的title居中以及一些注意事项
- 如何使TITLE居中
- Toolbar标题居中怎么设置
- CollapsingToolbarLayout设置contentScrim,当剩余折叠高度是ToolBar高度的两倍的时候,contentScrim设置的背景就出现了。
- CoordinatorLayout与CollapsingToolbarLayout实现视差滚动动画和Toolbar滚动
- RecyclerView与CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout 解决上滑到toolbar卡顿
- CollapsingToolbarLayout可折叠的toolbar
- CollapsingToolbarLayout结合ToolBar使用
- gevent:轻松异步 I/O
- JavaScript sort的使用
- 对齐次矩阵(homogeneous matrix)的理解
- Android M 新的运行时权限开发者需要知道的一切
- 网页输出的种种bug
- 当CollapsingToolbarLayout与ToolBar如何设置Title居中
- 2017-04-09人人网鄙视题后三道原创正解,后续补分析!!!!
- jQuery事件之表单事件
- servlet实现简单的聊天室
- 使用dm-cache,将SSD用作HDD的Cache
- 史上最简单的SpringCloud教程 | 第六篇: 分布式配置中心(Spring Cloud Config)
- 优化 | 重要的MySQL开发规范都在这了
- leetcode题目:gas-station 使用start/end方法的个人理解
- 【CF GYM101341I】Matrix God 题解