通过 contentInset 属性添加边距在 iPad 上居中 UITableView？

Posted 2023-03-04

【中文标题】通过 contentInset 属性添加边距在 iPad 上居中 UITableView？

【英文标题】：Center UITableView on iPad by adding a margin via contentInset property?

【发布时间】：2014-07-21 14:26:16

【问题描述】：

我想在 iPad 上重用 iPhone 的 UITableView，方法是添加左右边距，从而使其居中。我尝试使用 .contentInset 属性，但它似乎并没有影响右边距。我错过了什么吗？ （我尝试了一个否定的右插入右图，但也没有用。）

（您可以将Here is a gist with test code 放入 UITableViewController 子类中。）

// In a UITableViewController subclass
- (void)viewDidLoad 
    [super viewDidLoad];

    // the space I want on either side of the table
    CGFloat xMargin = 100.0f;

    // increase content inset and decrease content size an equal amount
    UIEdgeInsets contentInset = self.tableView.contentInset;
    contentInset.left = xMargin;
    contentInset.right = xMargin;
    CGSize contentSize = self.tableView.contentSize;
    contentSize.width = contentSize.width -= xMargin * 2;

    self.tableView.contentSize = contentSize;
    self.tableView.contentInset = contentInset;

    // Turning autolayout off doesn't appear to help
    //self.tableView.translatesAutoresizingMaskIntoConstraints = NO;

我不能只是缩短表格的宽度，否则右边距不会有正确的颜色或滚动表格以响应用户触摸。

【问题讨论】：

嗯，对于这样的事情，我首先要尝试的不是使用 UITableViewController，而是使用普通的 UIViewController 并将 UITableView 添加为子视图。您应该可以轻松地根据自己的喜好设置框架，而不会出现背景问题

@user2608440 我试过了。 （我使用 UITableViewController 来简化示例代码。）的确，我可以轻松设置 tableview 的框架，但这并不能解决我的问题 - 两侧的区域不会是 tableView 的一部分，因此不可滚动，正如我想要的屏幕截图所暗示的那样。

抱歉造成误会。创建一个自定义 UITableViewCell 来实现外观怎么样？它仍然可以跨越屏幕的整个宽度，但每个单元格都会有一个以它为中心的白色子视图，“边距”要么是透明的，要么是相同的灰色。

这可能行得通。不过，我真的希望避免使用自定义 UITableViewCell 子类。 （我想在整个应用程序中使用这种布局，并且我更喜欢使用现有的 UITableViewCell。）还有其他想法吗？

我唯一能想到的另一件事是在整个视图上使用手势识别器来映射到 tableView。但是走这条路似乎更复杂，以便在所有其他视图中重用。为了重用，我个人会使用普通的 UIViewControllers 并将使用自定义单元格的 UITableView 子类化。这样，您在每个 VC 上唯一需要做的就是将自定义 UITableView 添加为子视图并更改数据源。

【参考方案1】：

如果您担心它只是居中，您可以使用以下方法在其父视图中居中视图：

childView.center = [parent convertPoint:parent.center fromView:parent.superview];

contentInset 不会改变视图的大小，它只是添加到内容周围的滚动区域。

【讨论】：

我希望它有一个更小的宽度并且（仍然）居中——就像在 iPad 上拥有一个 iPhone 宽度的桌子。

在这种情况下，编辑 tableView 的 frame 属性以更改其大小并使用上面的代码行将其居中。

如果我只是缩短 tableView.frame.size.width 它将使边距区域不共享表格的背景颜色，并且用户将无法使用该区域进行滚动。

啊哈，那你有没有看过contentSize属性？

我想我应该能够减少 contentSize.width 并增加 contentInset.left/right 等量以获得我想要的效果......但它似乎没有。跨度>

【参考方案2】：

一种简单的方法是像这样子类化UITableViewCell：

.h 文件：

@interface AGBTableViewCell : UITableViewCell

@property (nonatomic, assign) CGFloat minimumWidth;

@end

.m 文件：

@implementation AGBTableViewCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) 
        self.minimumWidth = 320;
    
    return self;


- (void) setFrame:(CGRect)frame 
    CGRect newFrame = frame;

    if (CGRectGetWidth(newFrame) > self.minimumWidth) 
        CGFloat margin = (CGRectGetWidth(newFrame) - self.minimumWidth) / 2;
        newFrame.origin.x = margin;
        newFrame.size.width = self.minimumWidth;
    

    [super setFrame:newFrame];


@end

单元格将被插入，但您仍然可以在侧面滚动：

Sample project here.

这种方法需要一些额外的工作来处理删除行等表格动画。

【讨论】：

我使用了你的方法，但正如你所说的动画行效果不佳，有什么建议吗？