如何制作一个有 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 容易得多。
- Select你的两个观点。
- 点击右下角的图标在它们周围创建一个 UIStackView。
- 根据方向将新的 UIStackView 设置为水平或垂直。
- 将其固定到封闭视图。大功告成!
有一个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 - 所有其他
我正在尝试创建一个带有 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 容易得多。
- Select你的两个观点。
- 点击右下角的图标在它们周围创建一个 UIStackView。
- 根据方向将新的 UIStackView 设置为水平或垂直。
- 将其固定到封闭视图。大功告成!
有一个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 - 所有其他