2

I have 3 UI elements in the contentView of the UITableViewCell that need to be aligned properly when the device rotates. Currently, I enforce the frames of these UI Elements like this: 

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

I would like to know how I can use the autoresizingMask property of these elements to make them resize and not-overlap on one another when the device is rotated from Landscape to portrait (default is portrait, iPad only). I do not want to have custom frame positions for each orientation.

I tried something like this:

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

But this doesn't seem to work. The elements are all overlapped and unhappily laid out.

Any suggestions?

UPDATE 1

Here's what the table view cell currently looks like in landscape mode:

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

And here's what I want when the device is rotated to a portrait mode:

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

UPDATE 2 Here's my code in cellForRowAtIndexPath incorporating suggestions from @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;
}
4

2 回答 2

3

这应该可以解决问题：

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

请注意，他们的超级视图应该具有以下属性：

view.autoresizingMask = UIViewAutoresizingFlexibleWidth;
于 2011-12-19T10:42:54.547 回答
1

你说你有一个工作的景观配置，我有点困惑。我会说将您的硬编码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   |
|    ============         |    ============             ============ 
+-------------------------+

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

于 2012-01-24T23:44:21.813 回答