iOS CustomTableViewCell:元素未正确对齐

我在构建应用程序时第一次学习了iOS。在其中一个需求中，

UITableViewCell

需要看起来像
（注：这只是一个设计，没有为此编写代码）

然而，当我设计我的

UITableViewCell

时，它看起来像

- (void)setTransactionCell:(TransactionCell *)transactionCell transactionModel:(TransactionModel *)transactionModel {
    transactionCell.dateOfMonth.image = [self getDayImage:[UIImage imageNamed:@"1"]];
    transactionCell.dayOfWeek.image = [self getDayImage:[UIImage imageNamed:@"Sun"]];

    transactionCell.name.text = transactionModel.name;
    transactionCell.name.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:15];

    transactionCell.amount.text = transactionModel.amount;
    transactionCell.amount.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:15];

    transactionCell.categoryImage.image = [self getCategoryImage:[UIImage imageNamed:transactionModel.category]];
    transactionCell.imageView.contentMode = UIViewContentModeCenter;
}

- (UIImage *)getDayImage: (UIImage *) image {
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(30, 30), NO, 0);
    [image drawInRect:CGRectMake(0, 0, 15, 15)];
    UIImage *im2 = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return im2;
}

- (UIImage *)getCategoryImage:(UIImage *)image {
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(40, 40), NO, 0);
    [image drawInRect:CGRectMake(0, 0, 36, 36)];
    UIImage *im2 = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return im2;
}

生成这个的代码如下所示

- (void)setTransactionCell:(TransactionCell *)transactionCell transactionModel:(TransactionModel *)transactionModel {
    transactionCell.dateOfMonth.image = [self getDayImage:[UIImage imageNamed:@"1"]];
    transactionCell.dayOfWeek.image = [self getDayImage:[UIImage imageNamed:@"Sun"]];

    transactionCell.name.text = transactionModel.name;
    transactionCell.name.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:15];

    transactionCell.amount.text = transactionModel.amount;
    transactionCell.amount.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:15];

    transactionCell.categoryImage.image = [self getCategoryImage:[UIImage imageNamed:transactionModel.category]];
    transactionCell.imageView.contentMode = UIViewContentModeCenter;
}

- (UIImage *)getDayImage: (UIImage *) image {
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(30, 30), NO, 0);
    [image drawInRect:CGRectMake(0, 0, 15, 15)];
    UIImage *im2 = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return im2;
}

- (UIImage *)getCategoryImage:(UIImage *)image {
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(40, 40), NO, 0);
    [image drawInRect:CGRectMake(0, 0, 36, 36)];
    UIImage *im2 = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return im2;
}

最后，当我运行应用程序时，我看到

---

我是个新手，不知道出了什么问题。我拼命地试着把标签和图片拖到每一个可能的组合上，但都没用。我遗漏了一些非常基本的东西，您能告诉我哪里出了问题吗？

您的XIB上的对象要求每个对象至少有4个约束。当label/UIImageView对象周围有橙色线条时，这意味着缺少约束或约束冲突，通常意味着图像在运行时不会像预期的那样显示

对约束进行排序的最简单方法是使用interface builder，首先我建议选择每个对象，并通过从IB底部的图标行中选择选项来清除当前约束（参见下面的pic）

清除后，若要添加新约束，请再次选择对象，并选择用于清除约束的图标左侧的图标（交叉图标-请参见拾取）

在这张图片中，您将看到一个弹出窗口，它为您提供了添加约束的选项，在本例中，我选择了UILabel顶部和左侧的空间约束，使其与最近的顶部和左侧对象保持距离。您可以通过为该特定约束选择弹簧来执行此操作，该弹簧将变为橙色，以显示它已被选中。（这满足两个所需的min 4约束条件）。接下来的两个约束（因为我不希望UIlabel在那里调整大小）是约束高度和宽度。（在框中打勾以选择每个选项）

对于xib上的每个UI对象，都必须重复此操作。一旦有了适当的约束，所有的线都将是蓝色的，这意味着没有警告（参见下面的图片-UIImageView的约束以蓝色突出显示）

---

我希望这对您有所帮助，不过我建议您阅读更多有关自动布局约束的内容。当你掌握它们的窍门时，它们会非常有用，甚至可以制作动画等等。

非常感谢Jim，你的回答帮助我非常清楚地理解了这一点，我甚至没有为自动布局寻找任何其他东西，并且能够进行设计。再次非常感谢