设置位置，高度，宽度自动布局？

时间：2014-06-05 21:42:34

标签： ios7 uibutton autolayout

我只是在我使用之前切换到自动布局：

[Btn setFrame:CGRectMake(165,164,135,35)];

但我知道对于自动布局你不使用set frame。我知道它应该是这样的：

self.constraintToAnimate = [NSLayoutConstraint constraintWithItem:label
     attribute:NSLayoutAttributeTop
     relatedBy:NSLayoutRelationEqual
        toItem:self.view
     attribute:NSLayoutAttributeBottom
    multiplier:0.25
      constant:0.0];

和此：

[self.scrollView addConstraints:[NSLayoutConstraint
                                       constraintsWithVisualFormat:@"V:|-[Btn(==300)]-|"
                                       options:NSLayoutFormatDirectionLeadingToTrailing
                                       metrics:nil
                                       views:NSDictionaryOfVariableBindings(Btn)]];

但我不确定这些中的每一个是什么，或者constraintsWithVisualFormat字符串是什么意思/它是如何工作的。

如果你能告诉我如何设置Btn的位置，高度和宽度，我会非常感激。

提前致谢。

1 个答案:

答案 0 :(得分：1)

好的，我必须对你想要实现的布局进行一些推断，因为你没有完全指定它。我假设您有一个带按钮的UIScrollView作为子视图，使事情变得复杂。

由于您不熟悉约束，让我们从一个更简单的案例开始，这是一个UIButton，它是UIView的子视图。 UIButton已根据其内容知道其宽度和高度应该是什么，因此您只需指定其x和y位置（2个约束）。我个人更喜欢写约束的方程式而不是视觉格式，所以我会用它。你想要的是：

button.x = button.superview.x*1 + 0;
button.y = button.superview.x*1 + 0;

.x是leading约束（从左边开始），。y是top约束（从顶部开始）。

接下来，由于约束是在孩子和它的超级视图之间，你将约束添加到超级视图

[button.superview addConstraint:[NSLayoutConstraint constraintWithItem:button  attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:button.superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:164.0]];

[button.superview addConstraint:[NSLayoutConstraint constraintWithItem:button  attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:button.superview attribute:NSLayoutAttributeLeading multiplier:1.0 constant:165.0]];

这会将您的按钮定位在（164,165），按钮的宽度和高度将来自按钮的固有大小（基于它的图像/文本）。

所以这是一个简单的案例。现在让我们转到button.superview是UIScrollView的场景。这更复杂，因为你需要考虑具有不同思维模式的UIScrollview的约束，即它是一个固定的窗口大小（框架）到无限大小的景观（contentSize）。

所以，假设你有一个UIView - ＆gt; UIScrollView - ＆gt; UIButton，UIView有一个子滚动视图，后者又有一个UIButton作为子视图。一步一步。

1。）UIView - ＆gt;的UIScrollView

您在此对上编写的约束位于UIView的框架和UIScrollView的框架之间。由于框架是固定尺寸，因此非常容易。因此，假设您希望UIScrollView是其嵌入的UIView的完整大小。您将编写4个约束来指定它的X，Y，宽度和高度。有很多方法可以做到这一点，我会列出一个。

scrollview.x (scrollview.frame.x) = scrollview.superview.x*1 + 0;
scrollview.y (scrollview.frame.y) = scrollview.superview.y*1 + 0;
scrollview.width (scrollview.frame.width) = scrollview.superview.width*1 + 0;
scrollview.height (scrollview.frame.height) = scrollview.superview.height*1 + 0;

在约束中，那将是：

 // Let's constrain the scrollview to stick to the top and left of it's superview
[scrollView.superview addConstraint:[NSLayoutConstraint constraintWithItem:scrollView  attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:scrollView.superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:0]];

[scrollView.superview addConstraint:[NSLayoutConstraint constraintWithItem:scrollView  attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:scrollView.superview attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0]];

// Let's constrain the scrollview to make its width and height equal to its superview
[scrollView.superview addConstraint:[NSLayoutConstraint constraintWithItem:scrollView  attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:scrollView.superview attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0]];

[scrollView.superview addConstraint:[NSLayoutConstraint constraintWithItem:scrollView  attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:scrollView.superview attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0]];

好的，现在scrollview知道如何定位它的框架。这很容易。

2。）在滚动视图中放置按钮。

好的，现在你必须改变你的想法。由于scrollView是按钮的父级，因此您不能约束scrollView的框架，而是必须约束到scrollView的 contentView 。这在理论上是一个无限的平面。

那么如何在无限平面上约束视图呢？ UIScrollView中没有设置做这样的事情，所以我们卡住了吗？

不，我们需要做的是为UIScrollView定义内容视图。让我们将另一个视图拖到UIScrollView中，然后将按钮放在该视图中。我们的视图层次结构现在应该如下所示。

UIView（topView） - ＆gt; UIScrollView - ＆gt; UIView（contentView） - ＆gt; UIButton（全部嵌套）。

现在我们需要设置约束来定义contentView的大小。假设contentView与topView的大小相同。让我们添加约束来实现它。以下4个约束表示内容视图是滚动视图的平面。

[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:contentView  attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0]];

[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:contentView  attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0]];

[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:contentView  attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0]];

[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:contentView  attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0]];

但这还不够，因为我们说滚动视图基本上是一个进入无限平面的窗口。所以我们需要在contentView上增加2个约束来指定它的宽度和高度。让我们让它们与顶级视图相同。请注意，我们正在设置contentView和topView之间的约束，完全绕过ScrollView。

// You could make the constant parameter non-zero if you wanted it to be bigger/smaller (+/-) than the view
[topView addConstraint:[NSLayoutConstraint constraintWithItem:contentView  attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:topView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0]];

[topView addConstraint:[NSLayoutConstraint constraintWithItem:contentView  attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:topView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0]];

现在我们最终可以在按钮上定义约束，可以按照下面的方式编写，这样你就可以跟随，或者可以按照最顶层的定义编写，因为contentView == button.superview。 

[contentView addConstraint:[NSLayoutConstraint constraintWithItem:button  attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:contentView attribute:NSLayoutAttributeTop multiplier:1.0 constant:164.0]];

[contentView addConstraint:[NSLayoutConstraint constraintWithItem:button  attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:contentView attribute:NSLayoutAttributeLeading multiplier:1.0 constant:165.0]];

现在我们应该正确设置所有约束。要强制布局，只需致电[topView layoutIfNeeded]希望这很清楚，如果您遇到任何问题，请告诉我。我可能错过了一些东西，因为我不得不把它写在我的头顶上。）

相关问题
最新问题