40

我正在UITableViewCell使用情节提要中的原型单元配置自定义。但是,所有UILabels (和其他 UI 元素)似乎都没有添加到单元格中contentView,而是直接添加到UITableViewCell视图中。当单元格进入编辑模式时,这会产生问题,因为内容不会自动移动/缩进(如果它们在contentView.

有没有办法在contentView使用 Interface Builder/Storyboard/prototype 单元格布局单元格时添加 UI 元素?我发现的唯一方法是在代码中创建所有内容并使用[cell.contentView addSubView:labelOne]这不是很好,因为以图形方式布局单元格要容易得多。

4

6 回答 6

67

在进一步调查(查看单元格的子视图层次结构)中,Interface Builder 确实将子视图放置在单元格中contentView,但它看起来并不像它。

问题的根本原因是 iOS 6 自动布局。当单元格被置于编辑模式(并缩进)时,contentView它也被缩进,因此可以推断,contentView由于在contentView. 但是,Interface Builder 应用的所有自动布局约束似乎都与UITableViewCell自身相关,而不是contentView. 这意味着即使contentView缩进,其中包含的子视图也不 - 约束负责。

例如,当我将 aUILabel放入单元格中(并将其放置在距离单元格左侧 10 个点的位置)时,IB 自动应用了约束“水平空间 (10)”。然而,这个约束是相对于UITableViewCellNOT 的contentView。这意味着当单元格缩进并contentView移动时,标签会保持原样,因为它符合从 . 左侧保持 10 个点的约束UITableViewCell

不幸的是(据我所知)没有办法从 IB 本身中删除这些 IB 创建的约束,所以这就是我解决问题的方法。

在单元格的子类中,我为该约束UITableViewCell创建了一个名为. 您还需要一个标签本身,我称之为. 然后我按照以下方式实现了该方法:IBOutletcellLabelHSpaceConstraintIBOutletcellLabel-awakeFromNib

- (void)awakeFromNib {

    // -------------------------------------------------------------------
    // We need to create our own constraint which is effective against the
    // contentView, so the UI elements indent when the cell is put into
    // editing mode
    // -------------------------------------------------------------------

    // Remove the IB added horizontal constraint, as that's effective
    // against the cell not the contentView
    [self removeConstraint:self.cellLabelHSpaceConstraint];

    // Create a dictionary to represent the view being positioned
    NSDictionary *labelViewDictionary = NSDictionaryOfVariableBindings(_cellLabel);   

    // Create the new constraint
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"|-10-[_cellLabel]" options:0 metrics:nil views:labelViewDictionary];

    // Add the constraint against the contentView
    [self.contentView addConstraints:constraints];

}

总之,以上将删除 IB 自动添加的水平间距约束(对UITableViewCell而不是有效contentView),然后我们定义并将自己的约束添加到contentView.

在我的例子中,UILabels单元格中的所有其他元素都是根据的位置定位的,cellLabel所以当我修复这个元素的约束/定位时,所有其他元素都遵循并正确定位。但是,如果您有更复杂的布局,那么您可能还需要对其他子视图执行此操作。

于 2012-09-30T01:16:25.650 回答
33

如前所述,XCode 的 Interface Builder 隐藏了 UITableViewCell 的 contentView。实际上,所有添加到 UITableViewCell 的 UI 元素实际上都是 contentView 的子视图。

目前,IB 并没有为布局约束做同样的魔法,这意味着它们都在 UITableViewCell 级别表示。

一种解决方法是在子类的 awakeFromNib 中将所有 NSAutoLayoutConstrains 从 UITableViewCell 移动到它的 contentView 并用 contentView 表达它们:

-(void)awakeFromNib{
  [super awakeFromNib];
  for(NSLayoutConstraint *cellConstraint in self.constraints){
    [self removeConstraint:cellConstraint];
    id firstItem = cellConstraint.firstItem == self ? self.contentView : cellConstraint.firstItem;
    id seccondItem = cellConstraint.secondItem == self ? self.contentView : cellConstraint.secondItem;
    NSLayoutConstraint* contentViewConstraint =
    [NSLayoutConstraint constraintWithItem:firstItem
                                 attribute:cellConstraint.firstAttribute
                                 relatedBy:cellConstraint.relation
                                    toItem:seccondItem
                                 attribute:cellConstraint.secondAttribute
                                multiplier:cellConstraint.multiplier
                                  constant:cellConstraint.constant];
    [self.contentView addConstraint:contentViewConstraint];
  }
}
于 2012-12-15T14:41:27.967 回答
9

这是一个子类,基于其他答案的想法,我将基于我的自定义单元格:

@interface FixedTableViewCell ()

- (void)initFixedTableViewCell;

@end

@interface FixedTableViewCell : UITableViewCell

@end

@implementation FixedTableViewCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (nil != (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])) {
        [self initFixedTableViewCell];
    }
    return self;
}

- (void)awakeFromNib {
    [super awakeFromNib];

    [self initFixedTableViewCell];
}

- (void)initFixedTableViewCell {
    for (NSInteger i = self.constraints.count - 1; i >= 0; i--) {
        NSLayoutConstraint *constraint = [self.constraints objectAtIndex:i];

        id firstItem = constraint.firstItem;
        id secondItem = constraint.secondItem;

        BOOL shouldMoveToContentView = YES;

        if ([firstItem isDescendantOfView:self.contentView]) {
            if (NO == [secondItem isDescendantOfView:self.contentView]) {
                secondItem = self.contentView;
            }
        }
        else if ([secondItem isDescendantOfView:self.contentView]) {
            if (NO == [firstItem isDescendantOfView:self.contentView]) {
                firstItem = self.contentView;
            }
        }
        else {
            shouldMoveToContentView = NO;
        }

        if (shouldMoveToContentView) {
            [self removeConstraint:constraint];
            NSLayoutConstraint *contentViewConstraint = [NSLayoutConstraint constraintWithItem:firstItem
                                                                                     attribute:constraint.firstAttribute
                                                                                     relatedBy:constraint.relation
                                                                                        toItem:secondItem
                                                                                     attribute:constraint.secondAttribute
                                                                                    multiplier:constraint.multiplier
                                                                                      constant:constraint.constant];
            [self.contentView addConstraint:contentViewConstraint];
        }
    }
}

@end
于 2012-11-23T11:51:23.077 回答
6

子类化的替代方法是修改 cellForRowAtIndexPath 中的约束。

将单元格的所有内容嵌入到容器视图中。然后将前导和尾随约束指向 cell.contentView 而不是表格视图单元格。

  UIView *containerView = [cell viewWithTag:999];
  UIView *contentView = [cell contentView];

  //remove existing leading and trailing constraints
  for(NSLayoutConstraint *c in [cell constraints]){
    if(c.firstItem==containerView && (c.firstAttribute==NSLayoutAttributeLeading || c.firstAttribute==NSLayoutAttributeTrailing)){
      [cell removeConstraint:c];
    }
  }

  NSLayoutConstraint *trailing = [NSLayoutConstraint
                                 constraintWithItem:containerView
                                 attribute:NSLayoutAttributeTrailing
                                 relatedBy:NSLayoutRelationEqual
                                 toItem:contentView
                                 attribute:NSLayoutAttributeTrailing
                                 multiplier:1
                                 constant:0];

  NSLayoutConstraint *leading = [NSLayoutConstraint
                                 constraintWithItem:containerView
                                 attribute:NSLayoutAttributeLeading
                                 relatedBy:NSLayoutRelationEqual
                                 toItem:contentView
                                 attribute:NSLayoutAttributeLeading
                                 multiplier:1
                                 constant:0];

  [cell addConstraint:trailing];
  [cell addConstraint:leading];
于 2012-10-23T02:33:13.670 回答
2

我认为这在 iOS 7 beta 3 中已修复,因此从那时起就不需要变通方法(但可能是无害的,因为在大多数情况下它们将变成空操作)。

于 2013-07-08T22:13:11.037 回答
1

根据 Skoota 的代码(我是初学者,不太了解你做了什么,但工作非常出色),我的建议是将你所有的东西放在一个边缘到边缘的容器视图中并添加以下内容:

在单元格的头文件中,我有以下 IBOutlets:

@property (weak, nonatomic) IBOutlet UIView *container;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *leftConstrain;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *rightConstrain;

在实现文件中,我在 awakeFromNib 中有以下内容:

// Remove the IB added horizontal constraint, as that's effective gainst the cell not the contentView
[self removeConstraint:self.leftConstrain];
[self removeConstraint:self.rightConstrain];

// Create a dictionary to represent the view being positioned
NSDictionary *containerViewDictionary = NSDictionaryOfVariableBindings(_container);

// Create the new left constraint (0 spacing because of the edge-to-edge view 'container')
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"|-0-[_container]" options:0 metrics:nil views:containerViewDictionary];
// Add the left constraint against the contentView
[self.contentView addConstraints:constraints];

// Create the new constraint right (will fix the 'Delete' button as well)
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"[_container]-0-|" options:0 metrics:nil views:containerViewDictionary];
// Add the right constraint against the contentView
[self.contentView addConstraints:constraints];

再次,Skoota 使上述工作成为可能。谢谢!!!Al 学分归他所有。

于 2013-09-11T08:16:47.093 回答