如何制作一个有 2 个视图覆盖屏幕且不重叠的屏幕

How can I make a screen which has 2 views covering the screen and not overlapping

我正在尝试创建一个带有 2 个视图的视图控制器,它看起来就像在 IB 中一样

但他们只在 iPhone 5s 时才会这样 在其他情况下,它看起来像横向图像上显示的方式。我使用 size 类 来设置不同屏幕方向的约束。

这是 iPhone 6 秒加上

后的样子

Any/Compact 表示任何具有紧凑宽度的 phone,小于 6 的 iPhone 就是这样。您需要为 Regular/Compact 设置约束才能为非 6+ 的 iPhone 设置纵向约束。

你应该给出约束,比如,

top, bottom, leading and trailing 两个视图。

然后 select 两个视图并给予 equal height 约束,您将得到想要的结果。

你可以在any any中给它。它适用于任何方向。

希望这会有所帮助:)

使用 UIStackView 容易得多。

  1. Select你的两个观点。
  2. 点击右下角的图标在它们周围创建一个 UIStackView。
  3. 根据方向将新的 UIStackView 设置为水平或垂直。
  4. 将其固定到封闭视图。大功告成!

有一个good tutorial here;我强烈建议您先练习使用堆栈视图进行设置,然后再以困难的方式进行操作。

将此添加到您的 viewController

viewDidLoad 方法中
UIView *firstView = [[UIView alloc] init];     
self.navigationController.navigationBar.translucent = false;
firstView.backgroundColor = [UIColor redColor];

firstView.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:firstView];
    NSLayoutConstraint *topFirstViewYConstraint = [

NSLayoutConstraint constraintWithItem:firstView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0f constant:0.0f

];

NSLayoutConstraint *centerFirstViewHeightConstraint = [ NSLayoutConstraint constraintWithItem:firstView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0.5f constant:0.0 ];

NSLayoutConstraint *centerFirstViewWidthConstraint = [ NSLayoutConstraint constraintWithItem:firstView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:1.0f constant:0.0f ]; [super.view addConstraints:@[ topFirstViewYConstraint, centerFirstViewHeightConstraint,centerFirstViewWidthConstraint]];

UIView *secondView = [[UIView alloc] init];
secondView.backgroundColor = [UIColor greenColor];
secondView.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:secondView];
NSLayoutConstraint *topSecondViewYConstraint = [

NSLayoutConstraint constraintWithItem:secondView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:firstView attribute:NSLayoutAttributeBottom multiplier:1.0f constant:0.0f ]; NSLayoutConstraint *centerSecondViewHeightConstraint = [ NSLayoutConstraint constraintWithItem:secondView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0.5f constant:0.0 ]; NSLayoutConstraint *centerSecondViewWidthConstraint = [ NSLayoutConstraint constraintWithItem:secondView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:1.0f constant:0.0f ]; [super.view addConstraints:@[ topSecondViewYConstraint, centerSecondViewHeightConstraint, centerSecondViewWidthConstraint]];

所以问题似乎是 iPhones 早于 iPhone 6+ 具有 wCompact hCompact 尺寸 class 横向。你应该记住不要使用像 wCompact hAny 这样的大小 classes,因为它们会覆盖紧凑的大小 class.

所以,实际上,在这种情况下您需要创建 3 个尺寸 classes: wCompact hRegular - 所有肖像 wCompact hCompact - iPhones 早于 6+ wRegular hCompact - 所有其他