iOS Autolayout与2个视图保持距离

时间:2013-10-12 07:55:25

标签: ios interface-builder autolayout

我想在屏幕顶部修复一些视图, 底部的其他一些和顶部和底部视图之间相等距离的单个固定尺寸视图。

我无法弄清楚如何使用Autolayout约束来做到这一点。我是否需要在UI中添加一些间隔视图,或者以编程方式计算所需的位置?

enter image description here

3 个答案:

答案 0 :(得分:1)

只需一个额外的视图即可完成此操作。它看起来像这样:

stuff_on_top
middle_view (with fixed size view inside)
stuff_on_bottom

stuff_on_top和{}之间存在垂直间距限制。 middle_view以及middle_view和{}之间stuff_on_bottomfixed size view将水平和垂直居中middle_view

这样做的另一种方法是两个放置两个间隔视图:在stuff_on_top和&之间。 middle_view以及middle_view和{}之间stuff_on_bottom。然后你要添加一个约束,使间距视图的高度相等。

答案 1 :(得分:1)

查看此类别:https://github.com/jrturton/UIView-Autolayout

然后你可以做一些像这样简单的事情......

#import "UIView+AutoLayout.h"

...

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIView *topView = [UIView autoLayoutView];
    UIView *centralContainerView = [UIView autoLayoutView];
    UIView *centralView = [UIView autoLayoutView];
    UIView *bottomView = [UIView autoLayoutView];

    topView.backgroundColor = [UIColor redColor];
    bottomView.backgroundColor = [UIColor redColor];
    centralView.backgroundColor = [UIColor greenColor];

    [self.view addSubview:topView];
    [self.view addSubview:centralContainerView];
    [centralContainerView addSubview:centralView];
    [self.view addSubview:bottomView];


    //Pins the topView to the top, left and right edges of its superview (in iOS 7, it uses the topLayoutGuide)
    [topView pinToSuperviewEdges:JRTViewPinTopEdge|JRTViewPinLeftEdge|JRTViewPinRightEdge inset:0 usingLayoutGuidesFrom:self];
    //Constrains the height of topView to 75pts (if a value is passed as zero, no constrain is applied to that axis)
    [topView constrainToSize:CGSizeMake(0, 75)];

    //Pins the centralContainerView to the left and right edges of its superview
    [centralContainerView pinToSuperviewEdges:JRTViewPinLeftEdge|JRTViewPinRightEdge inset:0];
    //Pins the top of centralContainerView to the bottom of topView
    [centralContainerView pinEdge:NSLayoutAttributeTop toEdge:NSLayoutAttributeBottom ofItem:topView];
    //Pins the bottom of centralContainerView to the top of bottomView
    [centralContainerView pinEdge:NSLayoutAttributeBottom toEdge:NSLayoutAttributeTop ofItem:bottomView];

    //Centers centralView on the Y axis of its superview
    [centralView centerInContainerOnAxis:NSLayoutAttributeCenterY];
    //Pins the centralView to the left and right edges of its superview
    [centralView pinToSuperviewEdges:JRTViewPinLeftEdge|JRTViewPinRightEdge inset:0];
    //Constrains the height of topView to 100pts
    [centralView constrainToSize:CGSizeMake(0, 100)];

    //Pins the topView to the bottom, left and right edges of its superview (in iOS 7, it uses the bottomLayoutGuide)
    [bottomView pinToSuperviewEdges:JRTViewPinBottomEdge|JRTViewPinLeftEdge|JRTViewPinRightEdge inset:0 usingLayoutGuidesFrom:self];
    //Constrains the height of topView to 75pts
    [bottomView constrainToSize:CGSizeMake(0, 75)];

}

你得到这样的输出:

output on a 4" device

修改

我没有看到界面构建器标签,只是跳到了结论......界面构建器替代方案与上面类似。你需要有三个主视图,一个固定在顶部,其他固定在底部..然后一个具有灵活的宽度固定到另外两个视图。

然后,您可以在中间视图中居中固定高度的第四个视图。然后,这将为您提供您正在寻找的结果

答案 2 :(得分:0)

我编码了这个 https://github.com/damienromito/UIView-AutoYPositioning

但我认为AutoLayout的解决方案存在......