iOS CustomTableViewCell：未正确对齐的元素 [英] iOS CustomTableViewCell: elements not aligining correctly

问题描述

我在构建应用时第一次学习 iOS 。在其中一个要求中， UITableViewCell 需要看起来像

（PS：这只是一个设计，没有为此编写代码）

然而，当我设计了我的 UITableViewCell ，它看起来像

并且生成此代码的代码类似于

   - （无效）setTransactionCell：（transactionCell *）transactionCell tr​​ansactionModel：（transactionModel *）transactionModel {
 transactionCell.dateOfMonth.image = [自getDayImage ：[UIImage imageNamed：@1]]; 
 transactionCell.dayOfWeek.image = [self getDayImage：[UIImage imageNamed：@Sun]]; 
 
 transactionCell.name.text = transactionModel.name; 
 transactionCell.name.font = [UIFont fontWithName：@HelveticaNeue-Lightsize：15]; 
 
 transactionCell.amount.text = transactionModel.amount; 
 transactionCell.amount.font = [UIFont fontWithName：@HelveticaNeue-Lightsize：15]; 
 
 transactionCell.categoryImage.image = [self getCategoryImage：[UIImage imageNamed：transactionModel.category]]; 
 transactionCell.imageView.contentMode = UIViewContentModeCenter; 
} 
 
  - （的UIImage *）getDayImage：（的UIImage *）图像{
 UIGraphicsBeginImageContextWithOptions（CGSizeMake（30，30），NO，0）; 
 [image drawInRect：CGRectMake（0,0,15,15）]; 
 UIImage * im2 = UIGraphicsGetImageFromCurrentImageContext（）; 
 UIGraphicsEndImageContext（）; 
返回im2; 
} 
 
  - （的UIImage *）getCategoryImage：（的UIImage *）图像{
 UIGraphicsBeginImageContextWithOptions（CGSizeMake（40，40），NO，0）; 
 [image drawInRect：CGRectMake（0,0,36,36）]; 
 UIImage * im2 = UIGraphicsGetImageFromCurrentImageContext（）; 
 UIGraphicsEndImageContext（）; 
返回im2; 
} 
  

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

我相当新并不确定出了什么问题。我拼命尝试将标签和图像拖动到每个可能的组合，但没有任何效果。我遗漏了一些非常基本的东西，你能指导出错吗？

解决方案

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

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

清除此项后，要添加新约束，请再次选择对象，然后选择左侧用于清除约束的图标（十字架 - 请参阅选择）

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

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

我希望这可以帮到你，不过我建议你这样做您阅读了有关自动布局约束的更多信息。当你掌握它们并甚至可以制作动画等等时，它们非常有用。

I am learning iOS for the first time while building an app. In one of the requirements, the UITableViewCell needs to look like
(PS: This is just a design, no code was written for this)

However, when I design my UITableViewCell, it looks like

and the code to generate this looks like

- (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;
}

and finally when I run the application, I see

I am fairly new and not sure what is going wrong. I desperately tried dragging labels and images to every possible combination but nothing worked. I am missing something really basic, can you one please guide what is wrong?

解决方案

The objects on your xibs require at least 4 constraints per object. When there's orange lines around the label/UIImageView object, this means a constraint is missing, or conflicting and can often mean the image does not display at runtime like you'd expect.

The easiest way to sort your constraints is to use the interface builder, Firstly I'd recommend selecting each object and clearing the current constraints by selecting the option from the row of icons at the bottom of the IB (see pic below)

Once this has been cleared, to add new constraints select the object again and select the icon left to the one you used to clear the constraints (the cross one - see pick)

In this picture, you'll see a popup gives you the option to add constraints, which in this case I've selected space constraint of UILabel's top and left hand side to their closest top and left hand side objects. You can do this by selecting the spring for that particular constraint and this turns orange colour to show that it's selected. (This fulfils two of the required min 4 constraints). The next two constraints (as I don't want the UIlabel to resize there), is to constrain the height and width. (put a tick in the box to select each)

This will have to be repeated for every UI object you have on your xib. Once it has proper constraints, the lines will all be blue, which means there's no warnings (see pic below - UIImageView's constraints highlighted blue)

I Hope this helps you, though I'd recommend that you read up more on Auto-layout constraints. They can be extremely useful when you get the hang of them and can even be animated etc etc.

这篇关于iOS CustomTableViewCell：未正确对齐的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！