首页
学习
活动
专区
工具
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的技术解决方案,这是一套采用以相对约束来替代硬编码的解决方法,然而糟糕的方法名和使用方式导致使用成本和代码量的急剧增加

1.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
  • 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

    90320

    Swift-MVVM 简单演练(三)

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

    2.6K30

    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.7K31

    六天完成一个简单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

    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.6K10

    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

    99130

    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的概念的提出,使得UITableview在iOS 11的布局上会出现一些偏差,因为涉及到项目信息,所以就不放图了。

    1.5K60

    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

    4.6K30

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

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

    1.9K30

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

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

    58340

    Android--仿淘宝商品详情(继续拖动查看详情)及标题栏渐变

    下面我们来看看怎么实现的吧 实现 首先我们分析淘宝布局的界面难点大致就下面3个部分: *标题栏渐变,文字渐变隐藏 *透明通知栏(支持到4.4) *继续拖动查看详情,Scrollview有一个弹性的效果...继续拖动查看详情有一个弹性动画的效果: 仔细分析这个效果我们知道上面的布局可以滑动,当滑动到下面的布局时候同时下面的布局依然可以滑动,所以我们自定义一个View来包含两个Scrollview,上面一个下面一个...当手指抬起触发UP事件时,通过判断y轴滑动速度以及手指滑动方向利用计时器实现上下View的滚动事件,这里详细介绍一下requestLayout()这个方法 我们可以理解为重新布局了一下view;...当Invalidate()被调用的时候,View的OnDraw()就会被调用,Invalidate()必须是在UI线程中被调用,如果在新线程中更新视图的就调用postInvalidate()。...布局里面最外层用这个ScrollviewContainer包裹着两个Scrollview分别为上面的布局和下面的布局就可以了,当然因为我们上面的布局还涉及到标题栏渐变,所以上面的Scrollview要自定义滑动监听

    1.4K10
    领券