IOS开发中topLayoutGuide与bottomLayoutGuide的使用小技巧

白花蛇
• 阅读 3123

在IOS开发的过程中我们经常会遇到一些紧贴tabbar有工具条之类的页面,比如说购买、支付等页面,往往这些页面有时候在栈底显示(页面有tabbar),有时不在(页面没有tabbar)。比如:

IOS开发中topLayoutGuide与bottomLayoutGuide的使用小技巧

这种页面对于常规的做法是有tabbar的时候设置一套约束,没有tabbar的时候更新一下约束。但是苹果提过了一个bottomLayoutGuide可以让我们更优雅的处理这类问题。
代码如下:

_bottomView = [UIView new];
    _bottomView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:_bottomView];
    [_bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@40);
        make.left.and.right.equalTo(self.view);
        make.bottom.equalTo(self.mas_bottomLayoutGuide);
    }];

搭配Masonry,使用Masonry提供的mas_bottomLayoutGuide仅需一行我们就可以实现这样的效果。

同样来说这种效果对于navigationBar也适用——topLayoutGuide。对应的Masonry使用方法是mas_topLayoutGuide。
完整代码(代码量太少就不给完整的链接了):

#import "ViewController.h"
#import "Masonry.h"
@interface ViewController ()
@property (strong, nonatomic) UIView *topView;
@property (strong, nonatomic) UIView *bottomView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(0, 164, 80, 50);
    [btn setTitle:@"top" forState:UIControlStateNormal];
    btn.backgroundColor = [UIColor redColor];
    [btn addTarget:self action:@selector(topClick) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];

    UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn1.backgroundColor = [UIColor yellowColor];
    btn1.frame = CGRectMake(0, 264, 80, 50);
    [btn1 setTitle:@"bottom" forState:UIControlStateNormal];
    [btn1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [btn1 addTarget:self action:@selector(bottomClick) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn1];
    [self initView];
}

- (void)initView {
    _topView = [UIView new];
    _topView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:_topView];
    [_topView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@40);
        make.left.and.right.equalTo(self.view);

        make.top.equalTo(self.mas_topLayoutGuide);

    }];

    _bottomView = [UIView new];
    _bottomView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:_bottomView];
    [_bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@40);
        make.left.and.right.equalTo(self.view);
        make.bottom.equalTo(self.mas_bottomLayoutGuide);
    }];
}
- (void)topClick{

    [self.navigationController setNavigationBarHidden:!self.navigationController.navigationBarHidden animated:NO];
//    [self updateViewConstraints];
}
- (void)bottomClick{

    [self.navigationController setToolbarHidden:!self.navigationController.toolbarHidden animated:NO];
    // 手动触发updateViewConstraints
//    [self updateViewConstraints];
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
点赞
收藏
评论区
推荐文章
编程范儿 编程范儿
3年前
Vue刷新页面有哪几种方式
在Vue项目中,刷新当前页除了window.reload(),你还能想到什么办法?而且这种办法会重新加载资源出现短暂的空白页面。体验不是很好。在某个详情页面的时候,我们经常需要通过路由中的详情id去获取内容,当我们在不同的详情页来回切换的时候,打开的页面是同一个,只是需要通过监听路由中的参数id的变化去重新请求详情接口。如果这个详情页只需要一个接口
马丁路德 马丁路德
4年前
小程序开发不得不爬的坑,我替你爬过了!
不得不说,目前这个项目做的真是够久,在开发过程中遇到了一些坑,解决了分享出来给大家。在各方面综合考虑之下,鄙人抛弃了各大多端开发框架,使用了原生的小程序框架进行开发。前人掘坑、后人遭殃,祝各位早日成为大牛!!👻👻👻👻自定义动态Tabbar导航栏在默认的小程序开发中,定义tabbar,需要在app.json中配
皕杰报表如何在web页面调节大小和位置和按钮?
皕杰报表工具中报表在页面显示的大小和位置可以通过在URL后面添加servlet参数的方式来控制。控制页面大小的参数有两个,一个是rptwidth,一个是rptheight,分别代表报表在页面的输出宽度和高度,支持像素和百分比。控制工具条位置的是toolbardisplay,他有四个参数值,top在表格上方显示,below在表格下方显示,bottom在表格底
浩浩 浩浩
4年前
【Flutter实战】 路由管理
2.2路由管理路由(Route)在移动开发中通常指页面(Page),这跟web开发中单页应用的Route概念意义是相同的,Route在Android中通常指一个Activity,在iOS中指一个ViewController。所谓路由管理,就是管理页面之间如何跳转,通常也可被称为导航管理。Flutter中的路由管理和原生开发类似,无论是Android还是
Stella981 Stella981
3年前
Django之Django模板
1、问:html页面从数据库中读出DateTimeField字段时,显示的时间格式和数据库中存放的格式不一致,比如数据库字段内容为2012082616:00:00,但是页面显示的却是Aug.26,2012,4p.m.答:为了页面和数据库中显示一致,需要在页面格式化时间,需要添加<td{{dayrecord.p\_time|date:
Stella981 Stella981
3年前
Framework7 + Angular 开发问题解决汇总
本篇主要汇总一下使用Framework7Angular开发中遇到的一些难点及我的解决方法,以后再遇到会在这里继续更新。一、页面表格按需加载情况描述:默认加载10条,在用户上拉页面是再进行下一页的内容加载。解决方法:利用Framework7的无限滚动。1、页面:<tbodyid"orderContent"
Stella981 Stella981
3年前
Spring Security使用详解6(自定义登录页、接口、结果)
在之前的所有样例中,登录表单一直都是使用SpringSecurity提供的默认登录页,登录成功后也是默认的页面跳转。有时我们想要使用自定义的登录页,或者在前后端分离的开发方式中,前后端的数据交互通过JSON进行,这时登录成功后就不是页面跳转了,而是一段JSON提示。下面通过样例演示如何进行登录表单的个性化配置。六、自定义登录页面、
Stella981 Stella981
3年前
SpringBoot日记——错误页处理的配置篇
 在我们访问页面的时候经常会遇到各种问题,比如404,400,500,502等等,可返回的错误页对用户来讲,并不太亲民,所以要定制一下自己的错误页。 我们先访问一个错误页面,看下效果:(虽然给我们提供了错误时间、类型、状态码、错误信息,但是好丑,而且用户也不知道这是什么意思)!(https://oscimg.oschina.net/oscnet
Easter79 Easter79
3年前
SpringBoot日记——错误页处理的配置篇
 在我们访问页面的时候经常会遇到各种问题,比如404,400,500,502等等,可返回的错误页对用户来讲,并不太亲民,所以要定制一下自己的错误页。 我们先访问一个错误页面,看下效果:(虽然给我们提供了错误时间、类型、状态码、错误信息,但是好丑,而且用户也不知道这是什么意思)!(https://oscimg.oschina.net/oscnet
京东云开发者 京东云开发者
10个月前
史无前例,移植V8虚拟机到纯血鸿蒙系统
作者:京东科技于飞跃一、背景\\\\如图所示,Roma框架是我们自主研发的动态化跨平台解决方案,已支持iOS,android,web三端。目前在京东金融APP已经有200页面,200乐高楼层使用,为保证基于Roma框架开发的业务可以零成本、无缝运行到鸿
布局王 布局王
1个月前
鸿蒙仓颉开发语言实战教程:自定义组件
关于仓颉开发语言我们已经连续分享了很多天,相信大家对于仓颉开发语言已经有了一定的了解。今天我们继续进阶,分享一个仓颉开发语言中的自定义组件知识。本文案例就以上一篇文章中的自定义tabbar为例,因为我们自己开发的tabbar一直放在index.cj文件中总