iOS 自定义 TableView 单元格：元素未正确对齐

Question

我在构建应用程序时第一次学习iOS。在其中一项要求中，UITableViewCell 需要看起来像
（PS：这只是一个设计，没有为此编写代码）

但是，当我设计我的 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;
}

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

我还很新，不知道出了什么问题。我拼命尝试将标签和图像拖到每个可能的组合中，但没有任何效果。我错过了一些非常基本的东西，请您指导一下出了什么问题？

Answer 1

xib 上的对象每个对象至少需要 4 个约束。当标签/UIImageView 对象周围有橙色线时，这意味着缺少约束或冲突，并且通常意味着图像在运行时不会像您期望的那样显示。

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

一旦这被清除，添加新的约束再次选择对象并选择左侧的图标，用于清除约束（十字一号 - 见pick）

在这张图片中，您会看到一个弹出窗口，您可以选择添加约束，在这种情况下，我选择了 UILabel 顶部和左侧的空间约束到它们最近的顶部和左侧对象。您可以通过为该特定约束选择弹簧来执行此操作，这会变成橙色以表明它已被选中。 （这满足了两个必需的 min 4 约束）。接下来的两个约束（因为我不希望 UIlabel 在那里调整大小）是约束高度和宽度。 （在方框中打勾以选择每个）

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

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