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

当约束布局在ScrollView中时,如何修复底部导航栏?

当约束布局在ScrollView中时,修复底部导航栏的方法是使用SafeAreaLayoutGuide来设置约束。

SafeAreaLayoutGuide是一个UIView的属性,它表示视图的安全区域,即不会被遮挡的区域。在ScrollView中,我们可以使用SafeAreaLayoutGuide来设置底部导航栏的约束,以确保它不会被ScrollView遮挡。

具体步骤如下:

  1. 在ScrollView中添加一个容器视图,作为ScrollView的子视图。
  2. 在容器视图中添加底部导航栏,并设置其约束。
  3. 使用Auto Layout来设置底部导航栏与容器视图的约束关系。
    • 底部导航栏的底部约束与容器视图的底部约束相等,以确保底部导航栏位于容器视图的底部。
    • 底部导航栏的顶部约束与容器视图的SafeAreaLayoutGuide的底部约束相等,以确保底部导航栏不会被ScrollView遮挡。
  • 设置ScrollView的contentSize,确保其能够滚动显示整个容器视图的内容。

修复底部导航栏的代码示例(Swift语言):

代码语言:txt
复制
let scrollView = UIScrollView()
let containerView = UIView()
let bottomNavigationBar = UIView()

// 将容器视图添加到ScrollView中
scrollView.addSubview(containerView)

// 将底部导航栏添加到容器视图中
containerView.addSubview(bottomNavigationBar)

// 使用Auto Layout设置约束
containerView.translatesAutoresizingMaskIntoConstraints = false
bottomNavigationBar.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([
    containerView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
    containerView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
    containerView.topAnchor.constraint(equalTo: scrollView.topAnchor),
    containerView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
    containerView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
    
    bottomNavigationBar.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
    bottomNavigationBar.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
    bottomNavigationBar.bottomAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.bottomAnchor),
    bottomNavigationBar.heightAnchor.constraint(equalToConstant: 50) // 设置底部导航栏的高度
])

// 设置ScrollView的contentSize
scrollView.contentSize = containerView.bounds.size

这样,底部导航栏就会被正确地显示在ScrollView中,并且不会被遮挡。

对于腾讯云相关产品和产品介绍链接地址,由于不能提及具体品牌商,建议您访问腾讯云官方网站,查找与云计算相关的产品和服务。腾讯云提供了丰富的云计算解决方案,包括云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。

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

相关·内容

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

一直在做iOS开发的程序员相信在下面的两个版本交界处需要处理适配的坎一定让你焦头烂额过: iOS7出来后视图控制器的根视图默认的尺寸是占据整个屏幕的,如果有半透明导航条的话也默认是延伸到导航和状态的下面...iOS11出来后尤其是iPhoneX设备推出,iPhoneX设备的特殊性表现为顶部的状态高度由20变为了44,底部还出现了一个34的安全区,横屏还需要考虑左右两边的44的缩进处理。...你需要对所有的布局代码进行重新适配和梳理以便兼容iPhoneX和其他设备,这里面还是状态的高度以及底部安全区的的高度尤为棘手。 个人认为这两个版本的发布是iOS开发人员遇到的需要大量布局改版的版本。...从上面的这些属性可以看出苹果提出的这些解决方案其主要是围绕解决视图和导航条、滚动视图、状态、屏幕边缘之间的关系而进行的。...NSLayoutConstraint约束以及iOS9上的封装改进 iOS6代苹果推出了AutoLayout的技术解决方案,这是一套采用以相对约束来替代硬编码的解决方法,然而糟糕的方法名和使用方式导致使用成本和代码量的急剧增加

1K30

关于刘海打理这种事儿,美团点评的iOS工程师早就有经验了,不信你看!

图1.4 “我的Tab”表现 图1.1乍一看表现还不错,可是图1.2,下拉刷新之后,我们的导航还是被刘海挡住了。搜索也中枪,搜索首页没有办法取消,“热门搜索区域”也多出来一块儿空白。...iPhone X 为用户垂直空间上提供了更多展示余地,且状态也包含了用户需要知道的信息,除非能通过隐藏状态带给用户额外的价值,否则苹果建议大家将状态还给用户。"...这个问题也是新的导航结构视图下会出现,原因是新的导航结构用了 AutoLayout 布局,我们这个并不是用常规的 UIBarButtonItem 方式实现的,而是一个 UIBarButtonItem...图4.7 加约束修正后样式 以下是尝试修复这部分问题的代码: // offset 问题 if (@available(iOS 11.0, *)) { self.contentViewController.tableView.contentInsetAdjustmentBehavior...归结起来是三类问题: StatusBar 变高并且绝对布局导航的视图层级结构发生变化而导致 UI(titleView、UIBarButtonItem) 问题。

2.1K70
  • Android监听键盘状态获取键盘高度的实现方法

    一个View attach到一个窗口上就会创建一个ViewTreeObserver对象,这样一个View的视图树发生改变,就会调用该对象的某个方法,将事件通知给每个注册的监听者。...OnGlobalLayoutListener是ViewTreeObserver定义的众多接口中的一个,它用来监听一个视图树全局布局的改变或者视图树的某个视图的可视状态的改变。...软键盘由隐藏变为显示,或由显示变为隐藏,都会调用当前布局中所有存在的View的ViewTreeObserver对象的dispatchOnGlobalLayout()方法,此方法中会遍历所有已注册的...因为还么有考虑到顶部的状态底部的虚拟导航. 当然也可能不是键盘. 然后我们根据这个高度和之前已知的键盘状态来判断是否为键盘. 并回调给监听者....我通过LayoutParams给它设置边距 , 只设置了底部边距 , 值为返回的”键盘高度”- 顶部状态高度-虚拟导航的高度. 得到真实的键盘高度.

    2.1K10

    MyLayout&TangramKit 的重大升级!

    一个视图有自己的固有内容尺寸,就不需要再为视图设置宽度或者高度约束。这也就是为什么一般情况下不对UILabel视图设置宽度和高度约束系统也能正常完成布局。...系统内部的实现如果布局引擎布局发现某个视图没有设置高度或者宽度约束那么就会去调用这个视图的intrinsicContentSize方法,如果这个方法返回了正常的尺寸则视图就按这个尺寸来进行渲染和展示...那就是添加或者删除子视图以及调整了某个子视图的位置和尺寸就需要重新调整父视图的自适应约束设置。...设置约束依赖将容器视图的上下左右分别依赖UIScrollView视图的上下左右边界,如果需要上下滚动则将容器视图中的最底部子视图的底部边界依赖容器视图的底部边界。...因为MyLayout&TangramKit的尺寸自适应约束不需要明确依赖某个子视图,因此布局视图中的子视图有变化时系统会自动重新进行布局视图的尺寸计算,而布局视图的尺寸变化时又会调整UIScrollView

    2.1K20

    iOS_Memory Leak 内存泄露治理

    底部: snapshots,可以设置检测泄露的时间间隔,也有立即检测按钮: Input Filter可通过线程过滤 Detail Filter可通过关键字过滤 也可选择时间段过滤...导致的循环引用,按调用堆栈找到对应的代码: 4.3.3、Call Tree页面 点击中间的左侧切换到Call Tree统计模式,也可通过底部的工具进行过滤 Separate By Thread...:会将调用栈里递归函数作为一个入口(很少使用) 底部可设置各种约束进行过滤(用的比较少): 按符号过滤 or 按库过滤 设置最大最小值进行过滤: 设置 符号/库 变化时/删减掉 进行过滤...5.2、入口: Xcode 运行项目可点击中部的Debug Memory Graph按钮,查看内存图: 5.3、使用分析: 5.3.1、分析方式1: 点击左侧 导航 - 底部 的 Show...... } 修复方案:可以使用代理类若引用该 scrollView: /// 记录用户最后滑动的 scrollView (case: 刚拖拽完tab1,立马切换到tab2) static QLWeakProxy

    66420

    Swift-MVVM 简单演练(三)

    之前微博的版本和现在多少有点区别,首页的导航的标题位置仅仅是显示自己的昵称,并且可下拉展开。...自定义 UIButton-文字左、图片在右(二) 将导航标题设置成自定义Button 这个没什么技术含量,直接上代码了。...这里有一个关于自动布局开发的使用原则: 所有使用约束设置位置的控件,不要再设置 frame 原因:自动布局系统会根据设置的约束,自动计算控件的frame layoutSubviews函数设置frame...工作原理: 有一个运行循环启动,自动布局系统,会收集所有的约束变化 在运行循环结束前,调用layoutSubviews函数统一设置frame 如果希望某些约束提前更新!...该如何处理呢? 上面说自动布局工作原理的时候提到过 如果希望某些约束提前更新!

    2.5K30

    iOS导航使用总结

    目录: 一、设置导航样式 二、解决自定义导航返回按钮后侧滑不可用问题 三、隐藏导航底部的分割线 四、导航引起的布局问题 相关文章:iOS状态的使用总结 一、设置导航样式 设置导航的样式可分为全局设置与局部设置...; 1.全局设置 全局设置一般的都是AppDelegate设置,这样整个app都会生效,相关的代码与效果图如下: //1.设置导航背景颜色 [[UINavigationBar appearance...导航视图层级图 从图中可以看出,导航底部分割线是一个UIImageView对象,而且高度只有0.5,所以我们可以据此获取到导航底部分割线对象,一个视图控制器实现此需求,代码如下: #import...,默认值是UIRectEdgeAll,即:当前视图控制器里各种UI控件会忽略导航和标签的存在,布局若设置其原点设置为(0,0),视图会延伸显示到导航的下面被覆盖。...self.edgesForExtendedLayout=UIRectEdgeNone 3.导航透明属性translucent 上述两种属性都是解决导航半透明情况下的布局问题,但是如果我们的需求就是导航不透明

    3.2K20

    六天完成一个简单iOS App - 第四天

    精华页面的搭建 精华页面全部界面的显示 日期的处理 热门评论的显示和处理 精华页面的搭建 精华页面分为全部、视频、声音、图片、段子五个界面,五个界面可以通过点击导航下面的titleView进行页面的切换...(3)手指滑动界面进行切换界面,也将相应的按钮置于选中状态,底部指示条移动到选中按钮,之前的按钮取消选中状态。页面的滑动切换需要用到ScrollView的代理方法对页面的滑动进行判断。...也就是点击了button或者滑动界面之后,根据scrollView的偏移量判断需要加载哪个控制器的View,然后将View添加到scrollView。...cell的xib布局 其中添加自动布局约束是比较麻烦的,但是只要细心一步一步添加,就可以约束成功,添加约束还是多多练习熟练之后还是有很多便捷之处。...titleView上方添加下拉刷新的View,使用scrollView代理方法监听tableView的contentOffset,开始下拉,contentOffset改变显示刷新View,滑动结束并且

    1.4K70

    掌握 SwiftUI 的 Safe Area

    掌握 SwiftUI 的 Safe Area 访问我的博客 www.fatbobman.com[1] 可以获得更好的阅读体验 Safe Area(安全区域)是指不与导航、标签、工具或其他视图控制器提供的视图重叠的内容空间...对于根视图来说,safeAreaInsets 反映的是状态导航、主页提示器以及 TabBar 等各个边的占用数值。...如果一个视图可以完整地放置父视图的安全区域中,该视图的 safeAreaInsets 为 0。视图尚未在屏幕上可见,该视图的 safeAreaInset 也为 0 。...使用 safeAreaInset 扩展安全区域 SwiftUI ,所有基于 UIScrollView 的组件(ScrollView、List、Form),默认情况下都会充满整个屏幕,但仍可确保我们可以安全区域内看到所有的内容...该 Bug 已在 iOS 15.2 得到了修复。本文中的代码, Xcode 13.2 beta (13C5066c) 之后的版本都可以获得符合预期的表现。

    7.6K31

    六天完成一个简单iOS App - 第六天

    评论界面xib 需要注意的还是约束的添加,因为这里需要底部工具条随着键盘的弹出上移,所以底部工具条的底部与SuperView的底部间距为零,如图 底部工具条最底端约束 然后我们拿到这个约束,监控键盘的弹出...,键盘弹出的时候,将约束间距修改为键盘的高度,同时也可以拿到键盘弹出的时间,使底部工具条相同时间内上移即可。...其实现原理为: 布局button,先将button放在现在的位置上,然后设置button的transform下移一个屏幕的高度 btn.transform = CGAffineTransformMakeTranslation...,其实scrollView有scrollsToTop这个属性,并且默认就是YES,但是有个局限性,只有在有一个屏幕滚动视图的时候才会生效,scrollView中有一个以上的滚动视图,将会失效。...有没有显示keywindow上,实质上是判断scrollView和keywindow有没有重叠的地方,而判断他们有没有重叠的前提是他们同一个坐标系,即在同一个父控件

    1.3K50

    Android开发笔记(一百六十四)仿京东首页的下拉刷新

    所以此处得捕捉页面滚动到顶部的事件,相对应的则是页面滚动到底部的事件。鉴于App首页基本采用滚动视图ScrollView实现页面滚动功能,故而该问题就变成了如何监听该视图滚到顶部或者滚到底部。...正好ScrollView提供了滚动行为的变化方法onScrollChanged,通过重写该方法即可判断是否到达顶部或底部,重写后的代码片段如下所示:     protected void onScrollChanged...然而成功监听页面是否到达顶部或底部,仅仅解决了状态和工具的变色问题。因为页面到顶继续下拉,ScrollView要怎么处理?...不管ScrollView是惊慌失措,还是不知所措,恰恰说明它是真正的束手无策了,为此还要一个和事佬来摆平下拉布局和滚动视图之间的纠纷。...,触摸监听器用于处理下拉过程的持续位移。

    2.9K40

    Android ScrollView粘性头部代码分享

    逻辑是外部的ScrollView没有滑到底部的时候,往上滑动的时候,是滑动外部的ScrollView外部的ScrollView到达底部的时候,我们再网上滑,就是滑动内部的列表了,另外在左右滑动的时候...5.0.0.3版本修复底部有操作的时候,界面的滚动出现错乱的问题。...如下,我列了表格: 父ScrollVIewScrollView 手势滑动方向 滑动事件交由哪个view控制 不在底部顶部向上父ScrollView 不在底部顶部向下父ScrollView 底部不在顶部向上子...ScrollView 底部不在顶部向下子ScrollView 底部顶部向下父ScrollView 底部顶部向上子ScrollView 在这里ScrollView不在底部的时候,不会出现子ScrollView...6.3.分析了,什么情况我们应该让子ScrollVIew还是父ScrollView捕获滑动事件了,我们就可以我们的子ScrollView编写对应的代码处理了?

    1.4K20

    iOS导航基础效果配置

    navigationController侧滑手势失效的问题 self.navigationController.interactivePopGestureRecognizer.delegate = (id)self; // 控制手势根控制器不触发...gestureRecognizer shouldReceiveTouch:(UITouch *)touch{ return self.childViewControllers.count > 1; } 复制代码 导航透明和底部分隔线...//全局设置导航主题,只AppDelegate中有效, 或者是UINavagaitonController的RootController 设置有效 - (void)setNavigationControllerAppearance...self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav"] forBarMetrics:UIBarMetricsDefault]; 复制代码 导航上添加多个按钮...self.navigationController.navigationBar.hidden = YES; 复制代码 导航的动态消失 if (scrollView.contentOffset.y >

    1.5K10

    IOS学习——iphone X的适配

    iPhone X屏幕尺寸的变化主要出现在屏幕的头部和底部,头部设置了导航,基本没有出现什么问题,尾部主要就是某些控件的位置出现变化,可能是因为设置的相对位置是相对view的mas_bottom设置的(...,大号字体的变化,iOS 11之前的导航高度是64px,其中状态的高度是20px,iOS 11状态的盖度是44px。...自定义的导航的返回按钮右移明显     iOS 11改动相当大的就是导航的部分,除了新加入了largeTitles和searchController两个新特性,还对导航的图层结构进行了调整,原来的已经复杂的不要的图层又新增了新的图层...ExtendedLayoutIncludesOpaqueBars参数的含义是不透明的导航条下是否可以扩展,默认是NO,如果设为YES,则表示可以扩展,即可能会受到导航的影响,我们知道iOS 11导航的变化非常大...,加上导航的高度的变化和safeArea的概念的提出,使得UITableviewiOS 11的布局上会出现一些偏差,因为涉及到项目信息,所以就不放图了。

    1.5K60

    Flutter基础(二)

    这个是多页面应用用来控制页面跳转的,类似于网页的网址 initialRoute :第一个显示的路由名字,默认值为 Window.defaultRouteName onGenerateRoute : 生成路由的回调函数,导航的命名路由的时候...主体部分大部分是通过组合 Container ,Column,Row,Stack来实现的 floatingActionButton:悬浮按钮 bottomNavigationBar:底部类Tab导航...、布局/Flex main函数开启网格调试布局 debugPaintSizeEnabled=true; flutter采用Flex布局。...Row:child水平(左右)方向上进行布局 Colomn:child竖直(上下)方向上进行布局 Expanded:填充剩余空间,必须放置于Row, Column或Flex内, Stack+Positoned...图片放入 pubspec.yam添加 flutter: assets: - images/lake.png - images/background.png 如果要,包含images

    98330

    iOS小技能:适配安全区域距离(safeAreaInsets)

    引言 应用场景1:自定义导航栏内容,导航显示公告和标题 应用场景2:自定义视图底部工具 应用场景3: 适配上拉加载更多控件 _vcView.tableView.mj_footer.ignoredScrollViewContentInsetBottom...但是如果一个view没有视图层次结构或未在屏幕上显示, 则safeAreaInsets为0; 1.1 问题 视图底部工具显示到安全区域之外 1.2 判断安全区域距离 #define isIphoneX...; NSLog(@"导航高度:%f",navHeight); //获取tabBar的高度 //1.tabBarController中使用(你的继承自UITabBarController的VC) CGFloat...///*状态导航总高度*/ #define kStatusBarHeight (CGFloat)(isIphoneX?...2:修改上拉加载控件距离底部的高度 【推荐】 /** 忽略多少scrollView的contentInset的bottom */ //@property (assign, nonatomic) CGFloat

    4K30

    【Hybrid开发高级系列】ReactNative(七) —— RN组件专题

    一个常见的用例是为每一页设置backgroundColor     tintColor字符串型导航的按钮使用的颜色 1.4 iOS选择器 1.4.1 Props onValueChange 函数型...工具可以显示一个标志,导航图标(如汉堡包菜单),标题 和副标题和操作列表。标题和子标题被扩展这样以来标志和导航图标显示左边,标题和副标题在中间并且操作 右边。         ...如果重新呈现它们耗费很大,那就把它们包在StaticContainer或其他适当的机制每一个呈现过程,页脚始终是列表的底部,页眉始终列表的顶 部。...alwaysBounceVertical 布尔型         为真,滚动视图到达内容底部,垂直反弹,即使该内容小于滚动视图。...布尔型         为真,轻击状态滚动视图会滚动到顶部。

    53540

    轻松实现app导航Tab悬浮功能

    又到了更博的时间了,今天给大家带来的就是“导航Tab悬浮功能”了。通常大家玩手机的过程应该会注意到很多的app都有这种功能,比如说外卖达人常用的“饿了么”。...“饿了么”导航Tab效果图gif 可以看到上图中的“分类”、“排序”、“筛选”会悬浮在app的顶部,状态随着ScrollView(也可能不是ScrollView,在这里姑且把这滑动的UI控件当作ScrollView...像这种导航Tab悬浮的作用相信大家都能体会到,Tab不会随着ScrollView等的滚动而被滑出屏幕外,增加了与用户之间的交互性和方便性。...首先大家要明白一点:Tab的状态变化是要监听ScrollView滑动距离的。至于如何得到ScrollView的滑动距离?...这是因为标题的存在导致了计算悬浮窗y轴的值要额外加上标题的高度(当然你也可以保留标题,然后计算再加上标题的高度_!)。

    1.8K30
    领券