查看: 602|回复: 0

[IOS开发教程] iOS开发之topLayoutGuide和bottomLayoutGuide的使用小技巧分享

发表于 2017-12-27 08:00:00

前言

LayoutGuide这个概念在本人从事ios开发过程中一直是比较陌生的。直至最近想要了解这个细碎的知识点,就随手查了一下,发现这个概念从iOS7的top/bottom LayoutGuide,到iOS9 UILayoutGuide类的引入,直至最近的iOS11涉及适配iPhone X,引入了Safe Area概念,并且UIView增加了一个safeAreaLayoutGuide属性。发现自己真的是知道的太少了,所以决定深入的研究下。

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

比如:

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

代码如下:

  1. _bottomView = [UIView new];
  2. _bottomView.backgroundColor = [UIColor yellowColor];
  3. [self.view addSubview:_bottomView];
  4. [_bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
  5. make.height.equalTo(@40);
  6. make.left.and.right.equalTo(self.view);
  7. make.bottom.equalTo(self.mas_bottomLayoutGuide);
  8. }];
复制代码

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

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

  1. #import "ViewController.h"
  2. #import "Masonry.h"
  3. @interface ViewController ()
  4. @property (strong, nonatomic) UIView *topView;
  5. @property (strong, nonatomic) UIView *bottomView;
  6. @end
  7. @implementation ViewController
  8. - (void)viewDidLoad {
  9. [super viewDidLoad];
  10. // Do any additional setup after loading the view, typically from a nib.
  11. UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
  12. btn.frame = CGRectMake(0, 164, 80, 50);
  13. [btn setTitle:@"top" forState:UIControlStateNormal];
  14. btn.backgroundColor = [UIColor redColor];
  15. [btn addTarget:self action:@selector(topClick) forControlEvents:UIControlEventTouchUpInside];
  16. [self.view addSubview:btn];
  17. UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
  18. btn1.backgroundColor = [UIColor yellowColor];
  19. btn1.frame = CGRectMake(0, 264, 80, 50);
  20. [btn1 setTitle:@"bottom" forState:UIControlStateNormal];
  21. [btn1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
  22. [btn1 addTarget:self action:@selector(bottomClick) forControlEvents:UIControlEventTouchUpInside];
  23. [self.view addSubview:btn1];
  24. [self initView];
  25. }
  26. - (void)initView {
  27. _topView = [UIView new];
  28. _topView.backgroundColor = [UIColor greenColor];
  29. [self.view addSubview:_topView];
  30. [_topView mas_makeConstraints:^(MASConstraintMaker *make) {
  31. make.height.equalTo(@40);
  32. make.left.and.right.equalTo(self.view);
  33. make.top.equalTo(self.mas_topLayoutGuide);
  34. }];
  35. _bottomView = [UIView new];
  36. _bottomView.backgroundColor = [UIColor yellowColor];
  37. [self.view addSubview:_bottomView];
  38. [_bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
  39. make.height.equalTo(@40);
  40. make.left.and.right.equalTo(self.view);
  41. make.bottom.equalTo(self.mas_bottomLayoutGuide);
  42. }];
  43. }
  44. - (void)topClick{
  45. [self.navigationController setNavigationBarHidden:!self.navigationController.navigationBarHidden animated:NO];
  46. // [self updateViewConstraints];
  47. }
  48. - (void)bottomClick{
  49. [self.navigationController setToolbarHidden:!self.navigationController.toolbarHidden animated:NO];
  50. // 手动触发updateViewConstraints
  51. // [self updateViewConstraints];
  52. }
  53. - (void)didReceiveMemoryWarning {
  54. [super didReceiveMemoryWarning];
  55. // Dispose of any resources that can be recreated.
  56. }
  57. @end
复制代码

附:iOS 使用LayoutGuide 来限制控件的位置,配合Auto Layout constraints

  1. UIButton *button = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
  2. [self.view addSubview:button];
  3. [button setTranslatesAutoresizingMaskIntoConstraints: NO];
  4. // 得到当前视图的最低基准限制,这个是对于Auto Layout constraint来说的。
  5. id bottomGuide = self.bottomLayoutGuide;
  6. NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings (button, bottomGuide);
  7. [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: @"V:[button]-20-[bottomGuide]"
  8. options: 0
  9. metrics: nil
  10. views: viewsDictionary]];
  11. [self.view layoutSubviews];
复制代码

同理可以得到topLayoutGuide,这个是视图最高基准限制

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对程序员之家的支持。



回复

使用道具 举报