相等宽度/高度按钮网格上的iOS约束导致定位和大小变化

Question

我正在更新我的计算器应用程序以使用新的动态大小按钮并且遇到约束问题。据我所知，包含应该可以正常工作，但Xcode抱怨错误的视图。它为错位的视图提供的值是不正确的，如果我尝试修复它们，那么它只会导致更多的视图“错位”。

在下面的屏幕截图中，第一个多色行（橙色，绿色，粉红色，黄色，红色）是一排UILabels。它们应该都具有相等的宽度，它们之间的间距和屏幕的边缘之间的距离为0。它们位于容器视图中（Xcode标签是“注册标签视图”，如下面的截图所示。）注册标签视图容器具有固定的高度约束。

然后在下面，是另一个容器视图（“键盘视图”），里面是5x8视图网格（我的计算器上的按钮）。按钮应该都具有相同的宽度，并且都具有相同的高度。在我的故事板中，它们是64x58，非常适合我的320x464键盘视图。 （320/5 = 64，和464/8 = 58）。

以下是故事板警告的屏幕截图。请注意，最后两项是动态按钮（在键盘视图中），它表示其中一项预计为63宽，另一项预计为65宽。那不对。它们都应该是64宽，它们都有一个等宽宽度约束。

其中一个标签似乎也有同样的问题，Xcode希望其中一个标签宽度为63宽，但它们应该都是64宽。

你可以在故事板中看到这些按钮都很好地排列而没有重叠（基于它们的框架），但是当我在模拟器中运行它时，你可以看到它们在每行的不同方向上相互重叠一个像素：

我设置约束的方式：我在故事板中使用框架（x，y，w，h）将它们全部排列，然后我全部选中它们，并添加这样的约束：

然后它立即抱怨说有些物品放错了地方。我究竟做错了什么？我怎样才能正常工作？

Answer 1

好的，我想出了如何让它只使用约束。有太多互连的依赖项，系统无法处理它。我选择了整个按钮网格，并为所有按钮添加了Equal Heights和Equal Widths约束，这意味着每个按钮都依赖于其他所有按钮。

相反，我一行一行地做了。我选择了一行：

我将Equal Heights和Equal Widths约束应用于该行中的每个项目。然后我对第2行，第3行等做了同样的事情。所以，每行只依赖于它自己。但是，这些约束不足以完全定义UI，因为高度仍未定义。

因此，我选择了第一列（即每行中的第一项），并对这些项应用了“等宽”和“等高”约束。然后所有约束都表现正常，我没有收到任何Misplaced Views警告。

我相信这是有效的，因为列上的约束可以解析每行的高度，然后行可以解析它自己的宽度，而不必与任何其他行交互。

Answer 2

下面的少量代码（以及设置故事板中的单元格大小和最小间距）将使用集合视图为您提供键盘。

@interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>
@end

@implementation ViewController

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 40;
}

-(UICollectionViewCell *) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    cell.contentView.backgroundColor = (indexPath.row % 2 == 0)? [UIColor colorWithRed:180/255.0 green:210/255.0 blue:254/255.0 alpha:1] : [UIColor colorWithRed:50/255.0 green:167/255.0 blue:85/255.0 alpha:1];
    return cell;
}

这给出了以下结果，