[英]Two views, one below another in portrait and side by side in landscape using layout constraints
假設我有兩個文本視圖。 在縱向模式下,我希望這些在另一個之下&在橫向模式中,我希望這些是並排的
是否可以使用自動布局在故事板中使用布局約束來做到這一點? 如果是,那怎么樣? 如果沒有,那么實現這一目標的另一個更好的解決方案是什么。
ios6是我的目標版本
以下是您可以在代碼中使用它的方法。
基本上你需要:
a)在UIViewController
updateViewConstraints
中為給定的方向配置適當的NSLayoutConstraint
。
b)界面旋轉時調用[self.view setNeedsUpdateConstraints]
。
下面是一個ViewController實現和一個帶有輔助方法的UIView類別。
@interface ConstraintsViewController ()
@property (nonatomic, weak) IBOutlet UIView *upperOrLeftView, *lowerOrRightView;
@end
@implementation ConstraintsViewController
-(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
[super willAnimateRotationToInterfaceOrientation:toInterfaceOrientation duration:duration];
[self.view setNeedsUpdateConstraints];
}
-(void)updateViewConstraints {
[super updateViewConstraints];
[self.view removeConstraintsRelatingToItems:@[self.upperOrLeftView,self.lowerOrRightView]];
if(UIInterfaceOrientationIsPortrait(self.interfaceOrientation)) {
[self.view constrainSubview:self.upperOrLeftView usingEdgeInsets:UIEdgeInsetsMake(0, 0, -1, 0)];
[self.view constrainSubview:self.lowerOrRightView usingEdgeInsets:UIEdgeInsetsMake(-1, 0, 0, 0)];
[self.view constrainSubviewsTopToBottom:@[self.upperOrLeftView, self.lowerOrRightView]];
}
else {
[self.view constrainSubview:self.upperOrLeftView usingEdgeInsets:UIEdgeInsetsMake(0, 0, 0, -1)];
[self.view constrainSubview:self.lowerOrRightView usingEdgeInsets:UIEdgeInsetsMake(0, -1, 0, 0)];
[self.view constrainSubviewsLeftToRight:@[self.upperOrLeftView, self.lowerOrRightView]];
}
}
@end
把它放在UIView + Constraints.h中
@interface UIView (Constraints)
-(void)removeConstraintsRelatingToItems:(NSArray*)items;
-(void)constrainSubview:(UIView*)subview usingEdgeInsets:(UIEdgeInsets)insets;
-(void)constrainSubviewsLeftToRight:(NSArray*)subviews;
-(void)constrainSubviewsTopToBottom:(NSArray*)subviews;
@end
這是UIView + Constraints.m
@implementation UIView (Constraints)
-(void)removeConstraintsRelatingToItems:(NSArray *)items {
for(NSLayoutConstraint *constraint in self.constraints) {
if([items containsObject:constraint.firstItem] || [items containsObject:constraint.secondItem]) {
[self removeConstraint:constraint];
}
}
}
/** Set up constraints to flow the subviews from top to bottom and with equal heights */
-(void)constrainSubviewsTopToBottom:(NSArray*)subviews {
if(subviews.count > 1) {
UIView *anchorView = subviews[0];
for(int i = 1; i < subviews.count; i++) {
UIView *view = subviews[i];
NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:anchorView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
NSLayoutConstraint *edgesConstraint = [NSLayoutConstraint constraintWithItem:anchorView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0];
[self addConstraints:@[heightConstraint, edgesConstraint]];
anchorView = view;
}
}
}
/** Set up constraints to flow the subviews from left to right and with equal widths */
-(void)constrainSubviewsLeftToRight:(NSArray*)subviews {
if(subviews.count > 1) {
UIView *anchorView = subviews[0];
for(int i = 1; i < subviews.count; i++) {
UIView *view = subviews[i];
NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:anchorView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0];
NSLayoutConstraint *edgesConstraint = [NSLayoutConstraint constraintWithItem:anchorView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0.0];
[self addConstraints:@[widthConstraint, edgesConstraint]];
anchorView = view;
}
}
}
/**
Set up constraints to anchor the various edges of the subview to it's superview (this view) using the provided insets.
Any inset set to < 0.0 means that edge is ignored;
*/
-(void)constrainSubview:(UIView*)subview usingEdgeInsets:(UIEdgeInsets)insets {
if(insets.top >= 0.0) {
[self addConstraint:[NSLayoutConstraint constraintWithItem:subview attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTop multiplier:1.0 constant:insets.top]];
}
if(insets.right >= 0.0) {
[self addConstraint:[NSLayoutConstraint constraintWithItem:subview attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeRight multiplier:1.0 constant:-insets.right]];
}
if(insets.bottom >= 0.0) {
[self addConstraint:[NSLayoutConstraint constraintWithItem:subview attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-insets.bottom]];
}
if(insets.left >= 0.0) {
[self addConstraint:[NSLayoutConstraint constraintWithItem:subview attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeLeft multiplier:1.0 constant:insets.left]];
}
}
@end
在我看來,在多個方向上布局viewController視圖的最佳方法是為每個方向創建幾個視圖。 我在這里發現了這個:
“當您將視圖控制器添加到故事板時,它會帶有一個視圖。調用容器視圖。向容器視圖添加兩個視圖:縱向視圖和橫向視圖。適當地設置縱向視圖和橫向視圖的尺寸使用尺寸檢查器。根據應用的需要為縱向和橫向視圖添加按鈕,更多視圖,標簽或其他內容。然后當方向更改時隱藏一個視圖並顯示另一個視圖。
您只能使用Interface Builder來實現此類行為。 您需要設置一些具有不同優先級的約束。
請在此處查看有關該主題的更詳細答案。 還有一個截屏視頻和一個我創建的示例應用程序的鏈接。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.