UITableViewCell 自动调整掩码问题

Question

我在 UITableViewCell 的 contentView 中有 3 个 UI 元素，需要在设备旋转时正确对齐。目前，我像这样强制执行这些 UI 元素的框架：

segmentedControl1.frame = CGRectMake(165, 15, 130, 40);
segmentedControl2.frame = CGRectMake(435, 15, 130, 40);
segmentedControl3.frame = CGRectMake(710, 15, 130, 40);

我想知道如何使用这些元素的 autoresizingMask 属性来调整它们的大小并且在设备从横向旋转到纵向时不相互重叠（默认为纵向，仅限 iPad）。我不想为每个方向都有自定义框架位置。

我尝试过这样的事情：

segmentedControl1.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleRightMargin;
segmentedControl2.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
segmentedControl3.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin;

但这似乎不起作用。元素都是重叠的，布局不协调。

有什么建议吗？

更新 1

这是当前横屏模式下表格视图单元格的外观：

--------------------------------------------------------------------------
|    ============              ============             ============     |
|   | A   |  B   |            | A   |  B   |           | A   |  B   |    |
|    ============              ============             ============     |
--------------------------------------------------------------------------

当设备旋转到纵向模式时，这就是我想要的：

-------------------------------------------------------
|    ============    ============    ============     |
|   | A   |  B   |  | A   |  B   |  | A   |  B   |    |
|    ============    ============    ============     |
-------------------------------------------------------

更新 2 这是我在 cellForRowAtIndexPath 中的代码，其中包含来自@Wolfert 的建议

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) 
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    cell.contentView.autoresizingMask = UIViewAutoresizingFlexibleWidth;

    // Configure the cell...
    segmentedControl1.frame = CGRectMake(165, 15, 180, 40);
    segmentedControl1.tag = indexPath.row;
    segmentedControl1.autoresizingMask = UIViewAutoresizingFlexibleRightMargin;
    [cell.contentView addSubview:segmentedControl1];

    segmentedControl2.frame = CGRectMake(435, 15, 180, 40);
    segmentedControl2.tag = indexPath.row;
    segmentedControl2.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
    [cell.contentView addSubview:segmentedControl2];

    segmentedControl3.frame = CGRectMake(710, 15, 180, 40);
    segmentedControl3.tag = indexPath.row;
    segmentedControl3.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin;
    [cell.contentView addSubview:segmentedControl3];

    return cell;
}

Answer 1

这应该可以解决问题：

segmentedControl1.autoresizingMask =   UIViewAutoresizingFlexibleRightMargin;
segmentedControl2.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
segmentedControl3.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin;

注意他们的超级视图应该有这个属性：

view.autoresizingMask = UIViewAutoresizingFlexibleWidth;

Answer 2

你说你有一个工作景观配置，我有点困惑。我会说，将您硬编码的 CGRectMake 数字与您引用的 autoresizingMask 值结合起来已经导致布局倾斜。

尽管如此，我的建议是：您不应该在初始帧的 宽度 中使用硬编码数字。相反，您应该基于cell.contentView.bounds.size.width 进行计算。在你的情况下，是这样的：

- (UITableViewCell*) tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath
{
  static NSString* cellIdentifier = @"Cell";
  UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
  if (cell == nil) 
    cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier] autorelease];

  NSArray* items = [NSArray arrayWithObjects:@"A", @"B", nil];
  UISegmentedControl* segmentedControl1 = [[[UISegmentedControl alloc] initWithItems:items] autorelease];
  UISegmentedControl* segmentedControl2 = [[[UISegmentedControl alloc] initWithItems:items] autorelease];
  UISegmentedControl* segmentedControl3 = [[[UISegmentedControl alloc] initWithItems:items] autorelease];
  [cell.contentView addSubview:segmentedControl1];
  [cell.contentView addSubview:segmentedControl2];
  [cell.contentView addSubview:segmentedControl3];

  // Some values I like
  CGFloat marginHorizontal = 10;
  CGFloat spacingHorizontal = 8;
  // This is the crucial line!
  CGFloat totalWidth = cell.contentView.bounds.size.width;
  // That's how much is available to the three controls 
  CGFloat availableWidth = totalWidth - 2 * marginHorizontal - 2 * spacingHorizontal;
  // That's how much each control gets - initially!
  CGFloat segmentedControlWidth = availableWidth / 3.0;

  // These are the numbers from your example. With these numbers your table view
  // delegate probably implements tableView:heightForRowAtIndexPath:()
  CGFloat marginVertical = 15;
  CGFloat segmentedControlHeight = 40;

  CGRect segmentedControlFrame = CGRectMake(marginHorizontal,
                                            marginVertical,
                                            segmentedControlWidth,
                                            segmentedControlHeight);
  segmentedControl1.frame = segmentedControlFrame;
  segmentedControlFrame.origin.x += spacingHorizontal + segmentedControlWidth;
  segmentedControl2.frame = segmentedControlFrame;
  segmentedControlFrame.origin.x += spacingHorizontal + segmentedControlWidth;
  segmentedControl3.frame = segmentedControlFrame;

  // These are the values you cited initially, they are fine
  segmentedControl1.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleRightMargin;
  segmentedControl2.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
  segmentedControl3.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin;

  return cell;
}

我在 iPad 模拟器上试过了，效果很好。请注意，您不必更改单元格或内容视图的autoresizingMask。我知道这与UIView 通常的工作方式不同，但除了表格视图单元格是奇怪的野兽之外，我没有其他解释 :-)

回到您的原始代码：根本问题是硬编码数字假定内容视图具有屏幕的整个宽度，而实际上它的初始宽度要小得多（在我的环境中 cell.contentView.bounds.size.width 最初是 320 ）。因此，初始布局如下所示：

+-content view------------+
|    ============         |    ============             ============ 
|   | A   |  B   |        |   | A   |  B   |           | A   |  B   |
|    ============         |    ============             ============ 
+-------------------------+

如您所见，布局与内容视图的初始宽度不成比例。当内容视图稍后调整为正确的宽度时，控件的大小也会与其初始宽度和水平分布成比例地调整。这会导致更多的不成比例:-)