如何自动布局与现有的自定义视图与iOS 6中的多个子视图 [英] How to Auto Layout with existing Custom View with multiple subviews in iOS 6

问题描述

我想使用约束布局，但我有很多自定义控件与内部嵌套的子视图。我添加了约束到顶视图（CustomView），但它没有正确布局子视图。

我有TextFieldWithLabel类，显示上面和下面的标签UITextField我创建的TextFieldWithLabel的实例，并添加到超级视图的约束。

但它不显示结果如预期。
虽然它的可见但不放在我想要的地方。对于这个我不想改变整个TextFieldWithLabel类foe Auto Layout。

请帮助！ >

  usernameTextField = [[TextFieldWithLabel alloc] initWithFrame：CGRectMake（0，0，100，50）name：@UserName]; 
 [usernameTextField setTranslatesAutoresizingMaskIntoConstraints：NO]; 
 [superview addSubview：usernameTextField]; 
 NSLayoutConstraint * myConstraint = [NSLayoutConstraint constraintWithItem：usernameTextField 
 attribute：NSLayoutAttributeCenterY 
 relatedBy：NSLayoutRelationEqual 
 toItem：superview 
 attribute：NSLayoutAttributeCenterY 
 multiplier：1 
 constant：0]; 
 
 [superview addConstraint：myConstraint]; 
 
 myConstraint = [NSLayoutConstraint constraintWithItem：usernameTextField 
 attribute：NSLayoutAttributeCenterX 
 relatedBy：NSLayoutRelationEqual 
 toItem：superview 
 attribute：NSLayoutAttributeCenterX 
 multiplier：1 
 constant：0]; 
 [superview addConstraint：myConstraint]; 
 

屏幕截图：
此处不居中，文本字段不可点击。标签和文本字段放置在TextFieldWithLabel内。
请注意：TextFieldWithLabel是ComponentView的子类，ComponentView是UIView的子类。我怀疑这可能是问题？我需要自动布局ComponentsView以及。


解决方案

在自动布局下，您的框架大小将被忽略（在 initWithFrame：中使用的框架大小）。您已经指定了定位约束，但与大小无关，因此您的 TextFieldWithLabel 位于屏幕中心，大小为零。

文本字段和标签仍然可见，因为你说你没有在这个控件内部使用自动布局 - 可能你在里面设置了一些框架和自动调整掩模。文本字段和标签因此在 TextFieldWithLabel 的边界之外，因此它们是可见的，但可能不响应触摸。

要解决这个问题，您有两个选项：

<例如，如果你有这个约束（在VFL中），它将自动给你的控件一个高度：V：| - [label] - [textField] - |


• 向上面的代码添加大小约束 - 使用与initWithFrame中相同的尺寸。以下是设置高度的方法：

    [NSLayoutConstraint constraintWithItem：usernameTextField 
   attribute：NSLayoutAttributeHeight 
   relatedBy： NSLayoutRelationEqual 
   toItem：nil 
   attribute：NSLayoutAttributeNotAnAttribute 
   multiplier：0.0 
   constant：50.0]; 
    

我在UIView上有一个类别，创建常见约束此处。使用类别代码 centerInView：和 constrainToSize：

I am trying to make the Layout using constraints, but I have many custom controls with internal nested Subviews. And I am adding the constraints to the top view (CustomView) but its not lay-outing the subviews properly.

Ex. I have TextFieldWithLabel class which shows the Label on top and below that a UITextField I am creating the instance of TextFieldWithLabel and adding to super view with constraints.

But its not showing the results as expected. though its visible but not placed where I wanted.For this I dont want to change the whole TextFieldWithLabel class foe Auto Layout.

Please Help!

usernameTextField = [[TextFieldWithLabel alloc] initWithFrame:CGRectMake(0, 0, 100, 50) name:@"UserName"];
    [usernameTextField setTranslatesAutoresizingMaskIntoConstraints:NO];
    [superview addSubview:usernameTextField];
    NSLayoutConstraint* myConstraint = [NSLayoutConstraint constraintWithItem:usernameTextField
                                                                    attribute:NSLayoutAttributeCenterY
                                                                    relatedBy:NSLayoutRelationEqual
                                                                       toItem:superview
                                                                    attribute:NSLayoutAttributeCenterY
                                                                   multiplier:1
                                                                     constant:0];

    [superview addConstraint:myConstraint];

    myConstraint = [NSLayoutConstraint constraintWithItem:usernameTextField
                                                attribute:NSLayoutAttributeCenterX
                                                relatedBy:NSLayoutRelationEqual
                                                   toItem:superview
                                                attribute:NSLayoutAttributeCenterX
                                               multiplier:1
                                                 constant:0];
    [superview addConstraint:myConstraint];

Screen shot : Here its not centered and also the text field (RedColor) is also not clickable.the label and the text field are placed inside TextFieldWithLabel. Please Note : the TextFieldWithLabel is subclass of ComponentView and ComponentView is subclass of UIView.So I suspect this may be the issue ? do I need to auto layout the ComponentsView as well.

解决方案

Under autolayout your frame sizes will be ignored (the one you use during initWithFrame:). You've specified positioning constraints, but nothing to do with size, therefore your TextFieldWithLabel is positioned at the centre of the screen, with size zero.

The text field and label are still visible because you say you are not using autolayout internally in this control - presumably you do set some frames and autoresizing masks inside there. The text field and label are therefore outside the bounds of the TextFieldWithLabel, so they are visible, but probably don't respond to touches.

To solve this problem you have two options:

• Use autolayout internally - for example, if you have this constraint (in VFL) then it will automatically give a height to your control: "V:|-[label]-[textField]-|"

• Add sizing constraints to your code above - use the same dimensions you did in your initWithFrame. Here is one for setting the height:

  [NSLayoutConstraint constraintWithItem:usernameTextField 
                               attribute:NSLayoutAttributeHeight 
                               relatedBy:NSLayoutRelationEqual 
                                  toItem:nil 
                               attribute:NSLayoutAttributeNotAnAttribute 
                              multiplier:0.0 
                                constant:50.0];
  

I have a category on UIView to simplify the creation of common constraints here. Using the category code you'd do centerInView: and constrainToSize:

这篇关于如何自动布局与现有的自定义视图与iOS 6中的多个子视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！