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

如何制作除底部导航视图外的高度与屏幕高度一致的片段布局?

要制作除底部导航视图外的高度与屏幕高度一致的片段布局,可以通过以下步骤来实现:

  1. 使用布局容器:使用合适的布局容器(如LinearLayout、RelativeLayout、ConstraintLayout等)来组织布局。
  2. 设置高度:将布局容器的高度设置为match_parent,以使其与屏幕高度相同。
  3. 添加底部导航视图:在布局容器中添加除底部导航视图以外的其他视图组件。

以下是一个示例代码,使用LinearLayout布局实现除底部导航视图外高度与屏幕高度一致的片段布局:

代码语言:txt
复制
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 顶部视图组件 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="顶部视图组件"
        android:gravity="center" />

    <!-- 中间视图组件 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="中间视图组件"
        android:gravity="center" />

    <!-- 底部导航视图 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <!-- 底部导航按钮1 -->
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="按钮1" />

        <!-- 底部导航按钮2 -->
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="按钮2" />

        <!-- 底部导航按钮3 -->
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="按钮3" />

    </LinearLayout>

</LinearLayout>

在这个示例中,顶部视图组件和中间视图组件的高度会根据内容自适应,底部导航视图会固定在屏幕底部。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用 CSS 设置和自定义水平和垂直滚动条

滚动条是图形用户界面(UI)中必不可少组件。滚动条允许用户查看超出其容器宽度或高度内容。滚动条还使用户能够查看超出屏幕宽度或高度内容。默认情况下,浏览器会为body内容溢出包含一个滚动条。...除了默认滚动条,您还可以在您网站内设置自定义垂直滚动条。垂直滚动条可以帮助您网站用户查看超出容器可见区域内容。例如,侧边栏导航。您可以设计您侧边栏以显示可滚动导航项目列表。...body高度以使其足够长以滚动以下CSS代码片段描述了如何将初始导航栏样式设置为侧边栏并调整body底部边距。...下面的截图显示了侧边栏正常内容流分开:固定溢出侧边栏上面的侧边栏具有固定位置。页面的正文继续滚动,但侧边栏保持在用户视图中。...从截图中可以看出,侧边栏底部看起来不像设置在底部。这是因为内容比其容器高度长。在下一节中,我们将学习如何防止导航项目列表显示在侧边栏之外。d).

1.7K00

折叠屏上应用设计规范,了解一下?

深入理解布局 深入理解布局指南 介绍了布局容器相关概念,它提供了一个整体框架,可帮助开发者思考如何屏幕上排列导航栏、工具栏和内容等界面元素。...规范布局 规范布局提供了一系列通用布局方案,对设计大屏幕应用非常有帮助。第一种是列表/详情,或列表网格视图简单组合,同时在开始展示内容屏幕起始侧,设置/不设置导航容器。...例如,小屏幕采用底部导航视图,中等屏幕采用 Navigation rail,大屏幕采用完整导航视图。请大家注意,这些布局采用是宽度限定符 "-w",而非最小宽度限定符 "-sw"。...我们有许多可选方案,比如使用屏幕尾侧侧边抽屉式导航栏,或者使用上滑式底部动作条,或者使用选项菜单,甚至可以将内容完全隐藏起来。...我们将使用这些坐标以及宽度和高度创建一个 Rect 对象,这样我们便得到了窗口坐标空间中视图边界。

4.5K20
  • Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

    它们通常 app 内容共面并影响屏幕布局网格。 Standard drawers 可以永久可见或通过点击导航菜单图标打开和关闭。 它们只能用于平板电脑和台式机。...Modal navigation drawers 使用遮罩来阻止用户 app 内容其余部分进行交互。 它们高于大多数 app 元素,不会影响屏幕布局网格。 主要用于屏幕空间有限移动设备。...导航抽屉表可以从屏幕左侧出现 (1),或者在 bottom app bar (2)同时使用时从屏幕底部打开。 范围小于62.5% ?...---- 行为 打开关闭 Modal navigation drawers 总是由 drawer 可见处打开,例如 top app bar 中 navigation menu icon 。...调整 bottom navigation drawer 打开位置,以便在屏幕底部剪切最后一个视图列表项。 这可以通知用户有更多项目要查看。

    3.8K40

    iOS导航栏使用总结

    目录: 一、设置导航栏样式 二、解决自定义导航栏返回按钮后侧滑不可用问题 三、隐藏导航底部分割线 四、导航栏引起布局问题 相关文章:iOS状态栏使用总结 一、设置导航栏样式 设置导航样式可分为全局设置局部设置...导航视图层级图 从图中可以看出,导航底部分割线是一个UIImageView对象,而且高度只有0.5,所以我们可以据此获取到导航底部分割线对象,在一个视图控制器中实现此需求,代码如下: #import...,用于优化滑动类视图(继承于UIScrollView视图)在视图控制里显示: iOS系统导航栏UINavigationBar标签栏UITabBar默认都是半透明模糊效果,在这种情况下系统会对视图控制器...UI布局进行优化:视图控制器里面第一个被添加进去视图是滑动类视图,并且其Frame是整个屏幕大小时,系统会自动调整其contenInset,以保证滑动视图内容不被UINavigationBarUITabBar...但是对于普通视图,此时我们仍然需要注意:非滑动视图布局仍然要考虑导航栏和标签栏高度,注意不被遮挡,比如布局时候加上导航高度,以免内容被导航栏遮挡。

    3.2K20

    FAQ | 为大屏幕设备构建应用常见问题解答

    数据显示,因为更大屏幕空间,可折叠设备多任务处理量增加了 7 倍,开发者有必要平衡布局简单性灵活性以优化应用,例如开发者在使用新窗口尺寸类别和视口断点时,如果要优化断点布局,可以将其视为 3...MAD Skills 系列之导航组件系列文章 支持不同屏幕尺寸 问: 对开发者而言,如何用最简单方法在各种尺寸屏幕上优化应用界面?...对于基于 View 应用,您可以使用资源限定布局,通过底部导航——如底部应用栏 (App Bar) 或底部导航菜单 (Navigation Menu)——形成窄小布局,也可以使用 Navigation...根据我们提供 窗口尺寸类别 和指南,对于较小布局,推荐使用底部导航菜单,对于中等和更大展开布局,建议您考虑使用 Navigation Rail,因为使用这类设备用户更多会使用双手而不是单手来操作设备...使用 ConstraintLayout,您可以根据布局视图之间空间关系指定每个视图位置和大小。这样一来,当屏幕尺寸改变时,所有视图都可以一起移动和拉伸。

    3.5K10

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

    △ 基于宽度窗口大小类表示 除了以上三种基于宽度断点,我们还引入了具有相同类别名称基于高度断点,以便适用于更高级别的布局场景,并赋予更多灵活性。...我们先来进行第一项优化,使用 NavRail 而非底部应用栏,首先我们要考虑导航模型,所幸我们不会更改很多具体视图,仅仅只会更改导航方式,因为 NavRail 会一直存在于整个视图体系中,可以通过它导航到任何其他视图...通过这种方式更新应用导航,无论屏幕尺寸如何都能够拥有相同导航图,这意味着调整屏幕尺寸不会产生导航变化,从而让用户感到困惑。...,这一布局方式是 Material Design 中推荐屏幕规范布局之一,让我们将文章列表打开文章并排显示。...△ 可折叠手机上布局转换 为了正确处理如何将列表和详情窗口折叠成单窗口层次结构,当在较小屏幕上时,我们需要知道用户最后哪个窗口交互,为此,我们实现了一个简单自定义修饰符来记录最后一次交互,并以此决定

    4.2K20

    Material Design — App bars: bottomApp bars: bottom

    App bars: bottom Material Design链接:App Bars:bottom Bottom app bar 在手机屏幕底部展示导航和关键操作。...当只有一个或没有操作(floating action button)时,不使用bottom app bars ---- 组成 Bottom app bars 可以包含适用于当前屏幕上下文操作。...2、嵌入:FAB处于 bottom app bar 相同高度,并且 bar 形状转换为让 FAB 嵌入在 bottom app bar 中。...---- 海拔 Bottom app bar 海拔高度为8dp。 当 FAB 配合时,FAB 静止和凸起高度应该增加,以便在 bottom app bar 上方保持可见。 ?...底部导航抽屉从底部应用栏打开。 抽屉在底部应用程序栏前打开,并显示顶部应用程序栏以在达到完整高度时关闭抽屉。

    2.4K80

    如何处理手势冲突 | 手势导航连载 (三)

    这是因为整个视图宽度相比,屏幕左右侧手势交互区域宽度相对较小 (默认为每边 20dp)。...出现这种重叠常见例子: 非模态底部弹出菜单,因为这种菜单常常会在屏幕底部折叠为一个较小视图,而且还需要滑动操作。 屏幕底部水平页面切换,例如软键盘里选择不同表情包 UI。...我们可以用来解决手势冲突一种方法是,将出现冲突视图移出手势导航交互区域。这对于屏幕底部附近视图尤其重要,因为该区域是系统强制手势交互区域,并且应用无法在该区域使用热区切出 API。...但是,当用户尝试快进和快退歌曲时,会发生这种情况: 发生这种情况是因为,屏幕底部系统手势交互区域进度条重叠了,而在这里系统手势优先级更高。...但请注意,我们依然需要在播放控件底部插入一个内边距,其值等于系统栏高度,这样可以使歌曲名称等文本不会被系统导航条 (即屏幕底部那条 "横线") 遮盖。

    4.9K30

    处理视觉冲突 | 手势导航 (二)

    在上一篇文章中,我们介绍了如何将应用构建到全面屏设备。然而有些交互可能导致应用某些视图被系统栏遮盖,导致用户无法看见或操作。本文正是为帮助您解决这个问题而撰写——如何判断安全交互区域。...更具体一点来说,本文主要处理系统 UI 出现视觉重叠问题。系统 UI 包括屏幕上由系统提供所有 UI,例如导航栏和状态栏,另外它还包括诸如通知面板之类内容。...在系统使用手势导航模式时 (即导航栏变成屏幕底部一条粗线,也就是导航条),由于导航条有动态色彩调整功能,这个冲突可能不会那么明显。...注意,使用可点击区域里数值进行布局时,依然可能导致自己控件系统 UI 在视觉上重叠,这一点系统窗口区域 insets 不同,使用后者值对自己控件进行位移后能确保不会与系统/导航栏发生视觉重叠...这是因为默认情况下,所有视图都会在填充区域内裁剪图形。该属性通常 RecyclerView 一起使用,我们将在以后文章中对其进行详细介绍。

    2.8K30

    Android Studio 4.0+ 中新 UI 层次结构调试工具

    通过该工具您可以逐层来检查视图层次结构,同时它还会展示所有视图属性,包括继承自视图父类属性。 接下来我们一起了解一下最新版本布局检查器是如何发挥作用。...图片成功加载后,您可以改变它半透明值 (alpha) 来比较现有布局所选设计布局之间区别。 布局检查器示例 现在大家已经了解了布局检查器使用方式。...当您运行应用时候,您会看到一个可爱 android,但是里面少了一些东西: 底部导航标签。看一下布局文件,我们可以看到底部导航视图是存在,但是屏幕却没有显示它。...首先我们可以看到 LinearLayout 里布局了一个工具栏 (toolbar),然后是 navigation host。在它下面,您可以看到导航栏位于最下方——看来底部导航栏被挤出了屏幕。...LinearLayout 尺寸正常了,但是底部导航位置不对: 有很多方法可以解决这个问题: 我们可以设置 navigation host 和底部导航 layout_weight 参数,或者我们可以将

    2.1K10

    Android Studio 4.0+ 中新 UI 层次结构调试工具

    通过该工具您可以逐层来检查视图层次结构,同时它还会展示所有视图属性,包括继承自视图父类属性。 接下来我们一起了解一下最新版本布局检查器是如何发挥作用。...,您会看到一个可爱 android,但是里面少了一些东西: 底部导航标签。...看一下布局文件,我们可以看到底部导航视图是存在,但是屏幕却没有显示它。...首先我们可以看到 LinearLayout 里布局了一个工具栏 (toolbar),然后是 navigation host。在它下面,您可以看到导航栏位于最下方——看来底部导航栏被挤出了屏幕。...LinearLayout 尺寸正常了,但是底部导航位置不对: 有很多方法可以解决这个问题: 我们可以设置 navigation host 和底部导航 layout_weight 参数,或者我们可以将

    2.4K20

    Flutter质感设计之底部导航

    BottomNavigationBar即底部导航栏控件。显示在应用底部质感设计控件,用于在少量视图中切换。...底部导航栏包含多个以标签、图标或两者搭配形式显示在项目底部项目,提供了应用程序顶级视图之间快速导航。对于较大屏幕,侧面导航可能更好。...创建navigation_icon_view.dart文件,定义一个NavigationIconView类,用于管理BottomNavigationBarItem(底部导航栏项目)控件样式、行为动画...import 'package:flutter/material.dart'; // 创建类,导航图标视图 class NavigationIconView { // 导航图标视图构造函数 NavigationIconView..., // 底部导航布局和行为:存储底部导航布局和行为 type: _type, // 当点击项目时调用回调 onTap: (int index) { // 通知框架此对象内部状态已更改 setState

    3.1K21

    Flutte部件目录-Material Components 顶

    应用程序结构和导航 Scaffold Appbar 上面两个在基本部件中已经讲过。 BottomNavigationBar ? 底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。...一个显示在应用底部材质小部件,用于在少量视图中进行选择,通常介于3到5之间。 底部导航栏由文本标签,图标或两者多个项目组成,并放置在一块材料顶部。 它提供了应用程序顶级视图之间快速导航。...对于更大屏幕,侧面导航可能更适合。 底部导航栏通常Scaffold结合使用,在Scaffold.bottomNavigationBar参数中提供它。 底部导航type会更改其条目的显示方式。...TabBarView 显示当前选定选项卡相对应部件页面视图。 通常TabBar结合使用。 ?...布局 ListTile 单个固定高度行,通常包含一些文本以及前导或尾随图标。 ? Stepper 材质设计步骤部件,通过一系列步骤显示进度。 ? Divider 一个逻辑像素粗横线,两边都有填充。

    9.5K40

    android常用布局详解「建议收藏」

    View布局显示方式直接影响用户界面,View布局方式是指一组View元素如何布局,准确说是一个ViewGroup中包含一些View怎么样布局。...ViewGroup类是布局(layout)和视图容器(View container)基类,此类也定义了ViewGroup.LayoutParams类,它作为布局参数基类,此类告诉父视图其中视图如何显示...android:layout_weight: 权重,用来分配当前控件在剩余空间大小,如果你不设置,所有的视图都有一个layout_weight值,默认为零,意思是需要显示多大视图就占据多大屏幕空间...” android:layout_alignParentTop 控件顶部父控件顶部对齐; android:layout_alignParentBottom 控件底部父控件底部对齐; android...:layout_alignBottom 控件底部边缘给定ID底部边缘对齐; android:layout_alignLeft 控件左边缘给定ID左边缘对齐; android:layout_alignRight

    2K40

    iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

    让内容固定在导航栏区域外显示(这个区域由应用statusBarFrame属性来定义)。如果你确定要这样做的话,请给导航栏区域添加固定屏幕背景色相同背景色。...工具栏: 是半透明 在iPhone上,工具栏始终位于屏幕底部,而在iPad上则有可能出现在顶部 当键盘被唤起、用户使用了手势、或者当前视图变为竖屏情况下,工具栏可以隐藏。...标签栏: 是半透明 始终出现在屏幕底部 一个标签栏一次最多可承载5个标签(多于5个标签时候,可以展示前4个标签和一个“更多”,并将其他标签以列表形式收纳到“更多”里面) 在横屏竖屏情况下,高度均保持一致...当用户在视图中拖拽内容,内容随之滚动;当用户轻扫屏幕时,内容将快速滚动——直到用户再次触摸屏幕或内容已经到达底部时停止。...对分视图控制器本身负责展示这些子视图控制器管理不同屏幕方向下对分视图转场效果。

    10.1K51

    可折叠设备桌面模式

    您可能想要将播放控件一直限定在 ReactiveGuide 底部。这样一来该控件会在屏幕完全展开时被隐藏,而当屏幕部分折叠时又出现在底部。...由于 ReactiveGuide 是水平,此属性指的是参考线到父布局底部距离。 让您应用感知屏幕折叠 现在进入最重要部分: 如何获知您手机何时进入了桌面模式,并获取到折叠处位置呢?...如果您要实现横屏功能,那么大多数时候,边界会以一个在屏幕中垂直居中矩形来表示,它和屏幕一样宽,并且高度铰链相同 (对于可折叠设备而言值为 0,对于双屏幕设备而言会是两个屏幕之间距离)。...在其他所有情况下 (非全屏) 您需要考虑导航栏或屏幕上其他 UI 组件占据空间。 为了移动参考线,您必须指定它距离父布局底部距离。...displayFeature 边界矩形视图边界矩形相交以裁剪边界。

    2.4K30

    在 SwiftUI 中实现视图居中若干种方法

    image-20220829152914736将合成后视图放置在某个可能会充满屏幕视图顶部或底部显示结果或者预期不符 VStack { // Hello world 视图 1...这是由于 HStack 高度是由容器子视图对齐排列后高度决定。...Spacer 在 HStack 中只能进行横向填充,并不具备纵向高度高度为 0 ),因此 HStack 最终需求高度 Text 高度一致。...布局容器对 Text 进行布局FrameLayout 给 Text 建议尺寸为 300 x 60Text 占位视图( 空白视图尺寸为 300 x 600 )按对齐指南 center 进行对齐这是我个人最喜欢使用居中手段...万变不离其宗,掌握了 SwiftUI 布局原理,无论需求如何变化都可轻松应对。

    6.7K40

    iOS多设备适配简史以及相应API支撑实现

    一直在做iOS开发程序员相信在下面的两个版本交界处需要处理适配坎一定让你焦头烂额过: iOS7出来后视图控制器视图默认尺寸是占据整个屏幕,如果有半透明导航条的话也默认是延伸到导航栏和状态栏下面...iOS11出来后尤其是iPhoneX设备推出,iPhoneX设备特殊性表现为顶部状态栏高度由20变为了44,底部还出现了一个34安全区,当横屏时还需要考虑左右两边44缩进处理。...你需要对所有的布局代码进行重新适配和梳理以便兼容iPhoneX和其他设备,这里面还是状态栏高度以及底部安全区高度尤为棘手。 个人认为这两个版本发布是iOS开发人员遇到需要大量布局改版版本。...从上面的这些属性中可以看出苹果提出这些解决方案其主要是围绕解决视图导航条、滚动视图、状态栏、屏幕边缘之间关系而进行。...SizeClasses多屏幕适配 当我们程序可能需要同时在横屏和竖屏下运行并且横屏和竖屏下布局还不一致时,而且希望我们应用在小屏幕上和大屏幕上(比如iPhone8 Plus 以及iPhoneX S

    1K30
    领券