首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

安卓: CoordinatorLayout -如何在顶部屏幕上有一个固定的标题视图?

在安卓开发中,可以使用CoordinatorLayout来实现在顶部屏幕上有一个固定的标题视图。CoordinatorLayout是一个可以协调子视图之间交互的布局容器,它可以用于创建复杂的用户界面。

要在CoordinatorLayout中实现固定的标题视图,可以使用AppBarLayout和Toolbar组合。AppBarLayout是一个垂直滚动的布局容器,可以响应滚动事件,并与Toolbar进行交互。

以下是实现固定标题视图的步骤:

  1. 在XML布局文件中,使用CoordinatorLayout作为根布局容器,并添加一个AppBarLayout作为子视图。
代码语言:txt
复制
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!-- 添加Toolbar和其他内容 -->

    </com.google.android.material.appbar.AppBarLayout>

    <!-- 添加其他内容 -->

</androidx.coordinatorlayout.widget.CoordinatorLayout>
  1. 在AppBarLayout中添加一个Toolbar,并设置其属性。
代码语言:txt
复制
<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.appbar.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:title="标题"
        app:titleTextColor="@android:color/white" />

</com.google.android.material.appbar.AppBarLayout>
  1. 在Activity或Fragment中,找到Toolbar并设置为ActionBar。
代码语言:txt
复制
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

通过以上步骤,就可以在顶部屏幕上实现一个固定的标题视图。CoordinatorLayout会自动处理滚动事件,并根据内容的滚动状态来调整标题视图的显示效果。

推荐的腾讯云相关产品:无

参考链接:

  • CoordinatorLayout:https://developer.android.com/reference/androidx/coordinatorlayout/widget/CoordinatorLayout
  • AppBarLayout:https://developer.android.com/reference/com/google/android/material/appbar/AppBarLayout
  • Toolbar:https://developer.android.com/reference/com/google/android/material/appbar/Toolbar
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar-Android M新控件

- 作为一个为子视图之间相互协调手势效果一个协调布局 - ) 该控件也是Design包下一个控件,然而这个控件可以被称为Design包中最复杂、功能最强大控件:CoordinatorLayout...CoordinatorLayout使得子view之间知道了彼此存在,一个子view变化可以通知到另一个子view,CoordinatorLayout 所做事情就是当成一个通信桥梁,连接不同view...layout_scrollFlags说明 value comment scroll 所有想滚动出屏幕view都需要设置这个flag, 没有设置这个flagview将被固定屏幕顶部。...enterAlwaysCollapsed 当你视图已经设置minHeight属性又使用此标志时,你视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度 exitUntilCollapsed...滚动退出屏幕,最后折叠在顶端 【注意】: 设置了layout_scrollFlags标志View必须在没有设置View之前定义,这样可以确保设置过View都从上面移出, 只留下那些固定View

2K30

【翻译】MotionLayout实现折叠工具栏(Part 2)

我们已经讨论过 MotionLayout 是如何在 ConstraintSets 中所定义固定布局之间进行过渡动画了。...而关键帧允许我们在两个固定布局之间定义一个中间点,并对此点属性值进行操作控制。...首先我们并不局限于目前仅使用两个关键帧限制,事实上我们可以创建更多精细动画。甚至使用关键帧我们都能够创建出自定义渐进曲线来(对于开发者来说也就是所谓插值)。...但是在目前来说,添加 tools:showPaths="true" 这段代码能够让 MotionLayout 计算并显示这三个被过渡动画所影响视图控件轨迹路线:标题文本控件(顶部,中心左侧),工具栏海滩小排屋图片...值得注意是,我们在文本控件上添加关键帧就是位于左边路径顶部下方一个红点。如果你仔细查看标题文本移动,你会清楚看到这一行轨迹始终穿行在字母 n 和 g 之间,并且它到达关键点位置要相对快些。

1.7K30

Material Design技术分享

Behavior中有两个方法layoutDependsOn和onDependentViewChanged,前者是确定所提供视图是否有另一个特定兄弟视图作为一个布局依赖。...在CoordinatorLayout中使用AppBarLayout,如果AppBarLayout子View(ToolBar、TabLayout)标记了app:layout_scrollFlags滚动事件...layout_scrollFlags中几个值:   scroll:所有想滚动出屏幕view都需要设置这个flag, 没有设置这个flagview将被固定屏幕顶部。   ...enterAlwaysCollapsed:当你视图已经设置minHeight属性又使用此标志时,你视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。   ...Material Design动画风格简洁而不失多样化,直观但高度迎合了用户体验,google原生视觉与效果也越来越有设计感,但是要想实现google官方视频推荐中很多动画其实还是很耗费时间

2.1K60

通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout

,如果里面包含多个子View时,要想有折叠动画效果,必须把带有scroll flagview放在前面,这样收回view才能让正常退出,而固定view继续留在顶部。...,它可以控制包含在CollapsingToolbarLayout中控件在响应layout_behavior事件时作出相应scrollFlags滚动事件(移除屏幕固定屏幕顶端)。...它是设计用于直接AppBarLayout视图。...与 Actionbar 相比,Toolbar 明显要灵活多。它不像 Actionbar 一样,一定要固定在Activity顶部,而是可以放到界面的任意位置。...除此之外,在设计 Toolbar 时候,Google也留给了开发者很多可定制修改余地,这些可定制修改属性在API文档中都有详细介绍,: 设置导航栏图标; 设置Applogo; 支持设置标题和子标题

2.2K90

详解android特性之CoordinatorLayout用法探析实例

当我在AS上新建一个module时,系统默认最外层布局不再是我们熟悉五大布局中一种,而是一个全新布局:CoordinatorLayout。...那么,效果图就像下面展示莪一样: ? 接下来看一个高级点效果,就是标题栏,也就是ToolBar扩展与收缩效果。...首先因为我们TooBar是需要响应滚动视图,所以需要为其配置一个属性:layout_scrollFlags。...然后呢,我们需要定义一下AppBarLayout与滚动视图(RecyclerView,NestedScrollView等可以支持嵌套滚动控件)supportlibrary包含了一个特殊字符串资源@...通过效果显示,当视图在滚动时候,ToolBar滚出了屏幕,为内容区域留出了更大空间。

87641

Android之MaterialDesign应用技术

PS:纵观现在大大小小软件界面都变比较漂亮,还有一些系统了,比如小米MIUI,华为EMUI等,虽然底层都是,但他们界面多多少少都会不同,谷歌对这个UI也是非常重视,MaterialDesign...网上冲浪,这是一个很有意思事情,可以看到最新工程师动态,最新技术和该技术广泛性,网上有很多人写过这个design文章,但一般都没有写滑动删除和滑动标题悬浮等功能,这个标题悬浮和那个tablayout...recyclerview,往下滑,则返回顶部图标显示,往上滑图标不显示, 原因:在很多段子软件中,会有大量文字和图片,当用户往下翻时候,也就是说内容会不断在上方消失,下面的内容不算刷新出来,这时右下角出现一个辅助用户回到顶部按钮...2.1:创建布局文件 外层是协调者布局,中间就是一个类似于listviewRecyclerView,和一个右下角返回顶部按钮。...这样就Ok了;   总结:这里代码虽然看着少,那是因为大部分代码都被封装好了,我们一开始添加依赖就是封装好包,悬停效果能够给人一个很好体验,当你在翻一个软件简介时候,无论翻多少行,标题始终都会在上头悬浮

1.3K90

在项目中运用Meterial Design实现动画效果

导语 在 2015 年 I/O 开发者大会上,Google 介绍了一个 Android Design Support Library,该库可以帮助开发者在应用上使用 meterial design...以前在自己公司项目上有用过,最近把这个库中 CoordinatorLayout单独拿出来做了个小例子写篇博文,纯粹当成整理复习笔记,下次如果需求再碰到这个,直接用上 。。。...这几个控件相互配合,可以写出一个类似上面效果图不错页面出来。...3、app:expandedTitleMarginStart="48dp" 可以设置扩张时候标题向左填充距离。...,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上,在折叠时候最后固定在顶端; parallax:视差模式,在折叠时候会有个视差折叠效果。

38630

Android程序员 7.0新特性奉上 重视这些改变

7.0介绍 7.0是于2016谷歌IO开发者大会上推出新一代版本,被定名为Nougat(牛轧糖)。 作为一个大版本更新,7.0中较以往增加了很多新特性新功能,丰富了生态。...也就意味着你可以在一个屏幕上显示多个应用进行操作。 现在你可以一次在屏幕上同时打开两个应用。同时这种多窗口模式在平板或者电视等大屏幕上尤为突出,这些大屏设备甚至可以进行诸如画中画格式。...多窗口界面 如何使用多窗口模式: 打开多任务管理界面,选择一个应用卡片,拖动至屏幕顶部,即可开启多窗口模式。现在支持上下分屏和左右分屏。 通知增强 7.0中对通知进行了许多增强。...消息传递样式可以进行自定义,开发者只需使用类MessagingStyle进行配置消息、标题和内容视图即可。 7.0可以将一个应用多条通知归拢在一起。用户可以进行拒绝和归类操作。...低耗电模式 7.0中滴耗电模式进一步增强,屏幕关闭片刻之后,并且设备没有插入电源的话,就会进入低耗电模式。这就意味着只要关闭屏幕就实现了省点,这极大延长了电池寿命。

82730

CollapsingToolbarLayout使用

CollapsingToolbarLayout 可以看到,Toolbar标题放大并在下方显示,当我们向上滑动列表时,顶部Header部分图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式方式显示蓝色主题...是对 Toolbar 一个包装,以达到折叠 AppBar 交互视觉效果。...注意,没有设置这个属性时,默认使用Toolbar标题;statusBarScrim顶部视图折叠状态下,状态栏遮罩色。通常这样设置:app:statusBarScrim="?...addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);(支持API19及以上版本,位于setContentView语句前面)一起使用,使顶部视图展开时图片能够延伸到状态栏位置显示...,效果图中所示;contentScrim内容遮罩,上下滚动时图片上面显示和隐藏遮罩色,Toolbar位置背景色;通常这样设置:app:contentScrim="?

2.4K60

炫酷!MotionLayout 使用介绍 (第一章)

MotionLayout  是ConstrainLayout 2.0库中被引入一个新类,帮助开发者关联手势和组件动画。接下来文章将介绍会如何在应用中添加和使用MotionLayout。...系统框架中已经提供下面几种方法在应用中使用动画: 动画矢量Drawable 属性动画框架 LayoutTransition动画 使用TransitionManager进行布局转换 CoordinatorLayout...[strip] 最后,作为ConstrainLayout 2.0一部分,它最低支持API 14,99.8%设备都可以使用。...[image] 一个MotionScene文件可以所有游戏动画所需所用内容: 包含 ConstraintSets 这些ConstraintSet之间转换(过渡) 关键帧,事件处理 例如,你可以将一个查看从屏幕一侧拖拽到另一侧...: [strip] 示例1:关联布局文件 需要你使用ConstrainLayout创建³³两个ConstrainSet一个英文初始位置(组件在屏幕左面)一个是结束位置(组件在屏幕右边) 初始位置:

4.1K00

React Native 系列(八) -- 导航

常用方法 push(route) : 加载一个页面(视图或者路由)并且路由到该页面。 pop():返回到上一个页面。 popN(n):一次性返回N个页面。...title:标题,如果设置了这个导航栏和标签栏title就会变成一样,不推荐使用 header:可以设置一些导航属性,如果隐藏顶部导航栏只要将这个属性设置为null headerTitle...:设置导航栏标题,推荐 headerBackTitle:设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题。...,需要版本大于5.0 gesturesEnabled:是否支持滑动返回手势,iOS默认支持,默认关闭 screen:对应界面名称,需要填入import...之后页面 mode:定义跳转风格 card:使用iOS和默认风格 modal:iOS独有的使屏幕从底部画出。

6K80

为任意屏幕尺寸构建 Android 界面

Trackr 开发曾是为了展示如何在 Android 中支持无障碍功能体验最佳实践,随着最近针对大屏幕更新,它无疑是一个很好示例。...所有的界面都是通过在代码中描述而成,这样也就很容易在运行时做出关于界面样式决策,而在传统视图系统中,我们通过对不同屏幕配置进行编译,从而实现对视图配置,这两者有着巨大不同。...为了并排显示 Feed 和 Post,JetNews 简单地使用 Row 包裹两个组件,第一个组件具有固定宽度,第二个组件填充屏幕其余部分。...其中比较有趣一点是思考应用如何在不同尺寸布局之间转换,例如对于可折叠手机,应用可能会从较大屏幕变为较小屏幕。...但这次更改是针对屏幕尺寸做决策,我们是不是可以让单个组件自身根据页面而拥有不同尺寸呢?例如我们有一张卡片,当在列表中因为空间限制只展示标题和副标题,而有更多空间时,则调整为显示图像。

4.1K20

Android中如何指定SnackBar在屏幕位置及小问题解决

Android指定SnackBar在屏幕位置 Snackbar 常以一个弹出框形式,出现在手机屏幕下方或者桌面左下方,并且是在屏幕所有层最上方。...如果要指定它在屏幕出现位置,可以把SnackBar放置在android.support.design.widget.CoordinatorLayout内。...位置来改变Snackbar位置,设置android:paddingBottom=”16dp”。...当然自己写显示在上边很麻烦,还要处理显示及隐藏动画 在Snackbar.Java animateViewIn() 和 animateViewout() 里都有规定 Github上有个很不错...总结:如果长期显示在顶部可以用Github项目,否则用design库就行 总结 以上就是这篇文章全部内容了,希望本文内容对大家学习或者工作具有一定参考学习价值,如果有疑问大家可以留言交流,谢谢大家对

4.2K20

CoordinatorLayout使用(四):和Toolbar简单使用

其中snap是后面添加) scroll: 代码中枚举SCROLL_FLAG_SCROLL 所有想滚动出屏幕view都需要设置这个flag, 没有设置这个flagview将被固定屏幕顶部。...enterAlwaysCollapsed: 代码中枚举SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED 当你视图已经设置minHeight属性又使用此标志时,你视图只能已最小高度进入...,只有当滚动视图到达顶部时才扩大到完整高度。...这里,如果设置scroll,也就是为true时候,上面的Toolbar就会跟着滑动,并且会隐藏 反之,不设置,也就是false,就不会隐藏,只会固定不动 snap相关(scroll条件下)...这个时候,我们想做一个pendingTabLayout 滑动时候,隐藏上面的Toolbar 于是, AppBarLayout中,Toolbar下面,添加一个TabLayout Toolbar添加

1.4K30

自定义 Behavior,实现嵌套滑动、平滑切换周月视图日历

简介 先上个小米日历图,让大家知道要做一个什么效果: [strip] 这是小米日历效果,在用户操作列表时候,将日历折叠成周视图,扩大列表显示区域,同时也不影响日历部分功能使用,有趣且实用。...列表滚动范围则是固定,最多向上移动 5 倍日历行高,也就是从 0 到 -calendarLineHeight 5。...上面效果可以看到,显示星期标题也一起向上移动了,而且 MaterialCalendarView 是没办法隐藏这个标题。...没办法,只好自己写一个星期标题控件盖在上面,简单写了一个 WeekTitleView,代码就不贴了,在布局里加上: <?xml version="1.0" encoding="utf-8"?...惯性滑动 上面效果可以看出一个问题,当滑动到一半时候松手,应该要恢复到完整视图位置。这里包含了,快速滑动后惯性滑动到指定位置效果,和没有快速滑动时,往就近指定位置滑动这两种效果。

3.2K10

react-navigation,刷新你导航一、属性介绍二、案例

故不建议使用 header:设置一些导航属性,若想要隐藏顶部导航栏则只需要把这个属性设置为null headerTitle:设置导航栏标题 headerBackTitle:设置跳转页面左侧返回箭头后面的文字...当然只有在5.0以上才有效果 gesturesEnabled:是否支持滑动返回手势。...iOS默认支持,默认关闭 screen:对应界面名称,需要填入import之后页面 mode:定义跳转风格 card:使用iOS和默认风格。...iOS默认在底部,默认在顶部 swipeEnabled:是否允许在标签之间进行滑动 animationEnabled:是否在更改标签时显示动画 lazy:是否在app打开时候将底部标签栏全部加载...pressColor:material涟漪效果颜色(版本需要大于5.0) pressOpacity:按压标签透明度变化(版本需要小于5.0) scrollEnabled:是否启用可滚动选项卡

19.6K90
领券