如何为 CustomTableView Cell 应用 layoutConstraints

Posted

技术标签:

【中文标题】如何为 CustomTableView Cell 应用 layoutConstraints【英文标题】:How to apply layoutConstraints for CustomTableView Cell 【发布时间】:2015-02-13 10:57:13 【问题描述】:

我需要使用 nslayoutconstraints 以编程方式使用可视格式语言以及带项的约束来设计如下所示的自定义单元格。任何帮助将不胜感激。

` /* 初始化并分配产品名称 */ productName=[[UILabel alloc]init]; productName.font=[UIFont fontWithName:@"HelveticaNeue" size:17.0f]; self.productName.lineBreakMode = NSLineBreakByWordWrapping; self.productName.numberOfLines = 0; productName.translatesAutoresizingMaskIntoConstraints=NO; [self.contentView addSubview:productName];

    /* Intialize and assign Product Option */
    productOption=[[UILabel alloc]init];
    productOption.translatesAutoresizingMaskIntoConstraints=NO;
    productOption.font=[UIFont fontWithName:@"HelveticaNeue" size:13.0f];
    productOption.textColor=[UIColor colorWithRed:128/255.0f green:128/255.0f blue:128/255.0f alpha:1.0f]; /* 808080 */
    [self.contentView addSubview:productOption];

    /* Intialize and assign Product Image */
    productImageView=[[UIImageView alloc]init];
    productImageView.translatesAutoresizingMaskIntoConstraints=NO;
    productImageView.clipsToBounds=YES;
    productImageView.contentMode=UIViewContentModeScaleAspectFill;
    productImageView.layer.cornerRadius = 22.5;
    productImageView.layer.masksToBounds = YES;
    productImageView.layer.borderColor =[UIColor whiteColor].CGColor;
    productImageView.layer.borderWidth = 1;
    [self.contentView addSubview:productImageView];

    /* Intialize and assign List icon Image */
    listIconImage=[[UIImageView alloc]init];
    listIconImage.translatesAutoresizingMaskIntoConstraints=NO;
    listIconImage.image=[UIImage imageNamed:@"right-arrow.png"];
    [self.contentView addSubview:listIconImage];


   [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productImageView
                                                                 attribute:NSLayoutAttributeTop
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self.contentView
                                                                 attribute:NSLayoutAttributeTop
                                                                multiplier:1.0
                                                                  constant:7]];

    [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:productImageView
                                                                 attribute:NSLayoutAttributeLeft
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self.contentView
                                                                 attribute:NSLayoutAttributeLeft
                                                                multiplier:1
                                                                  constant:11.5]];

    [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productImageView
                                                                 attribute:NSLayoutAttributeWidth
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:nil
                                                                 attribute:NSLayoutAttributeWidth
                                                                multiplier:1.0
                                                                  constant:45]];

    [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productImageView
                                                                 attribute:NSLayoutAttributeHeight
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:nil
                                                                 attribute:NSLayoutAttributeHeight
                                                                multiplier:1.0
                                                                  constant:45]];

    [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productName
                                                                 attribute:NSLayoutAttributeLeading
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self.productImageView
                                                                 attribute:NSLayoutAttributeTrailing
                                                                multiplier:1.0
                                                                  constant:10]];

    [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productName
                                                                 attribute:NSLayoutAttributeTop
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self.contentView
                                                                 attribute:NSLayoutAttributeTop
                                                                multiplier:1.0
                                                                  constant:5]];

    [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productOption
                                                                 attribute:NSLayoutAttributeLeading
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self.productImageView
                                                                 attribute:NSLayoutAttributeTrailing
                                                                multiplier:1.0
                                                                  constant:10]];

    [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productOption
                                                                 attribute:NSLayoutAttributeTop
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self.productName
                                                                 attribute:NSLayoutAttributeBottom
                                                                multiplier:1.0
                                                                  constant:5]];

    [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.listIconImage
                                                                 attribute:NSLayoutAttributeRight
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self.contentView
                                                                 attribute:NSLayoutAttributeRight
                                                                multiplier:1.0
                                                                  constant:-15.0f]];

    [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.listIconImage
                                                                 attribute:NSLayoutAttributeHeight
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:nil
                                                                 attribute:NSLayoutAttributeHeight
                                                                multiplier:1.0
                                                                  constant:20.0f]];

    [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.listIconImage
                                                                 attribute:NSLayoutAttributeWidth
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:nil
                                                                 attribute:NSLayoutAttributeWidth
                                                                multiplier:1.0
                                                                  constant:11.0f]];

    [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.listIconImage
                                                                 attribute:NSLayoutAttributeCenterY
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self.contentView
                                                                 attribute:NSLayoutAttributeCenterY
                                                                multiplier:1.0
                                                                  constant:0]];  `

以上是我用于创建此设计的代码。现在我正在努力解决如何在 tableviewcontroller 中获取动态高度。当我进入 heightForRowAtIndexPath 时它总是返回 0。

感谢和问候 山姆.P

【问题讨论】:

【参考方案1】:

您应该设置 tableView.rowHeight = UITableViewAutomaticDimension 并提供 tableView.estimatedRowHeight = 68.0f(估计高度,不必精确); 以下链接中的更多信息: SO Link

【讨论】:

以上是关于如何为 CustomTableView Cell 应用 layoutConstraints的主要内容,如果未能解决你的问题,请参考以下文章

如何为自定义 TableViewCell 和 CollectionView Cell 使用一个 UIView。?

如何为 UITableViewCell 实现抖动动画

如何为 VoiceOver 排队多个辅助功能通知?

如何为 TWTR 时间轴 ViewController 设置单元格背景颜色?

如何为 Freewall jQuery 插件创建 Angular 指令

如何为选择多行时使用的 UITableViewCell 图像蒙皮?