Objective-C：如何在VC中创建双列UITableView及样式设置？

Hey there, let's break down your questions one by one and give you practical Objective-C solutions tailored to your needs:

一、实现双列UITableView的两种方案（含Storyboard支持） #

First off, you're right that UITableView is single-column by default. There are two solid ways to get that two-column look, and yes, you can absolutely do most of this in Storyboard:

方案1：自定义UITableViewCell（在单个Cell内做双列布局，推荐） #

This is the easiest approach if you want to stick with UITableView. The idea is to keep the table as single-row, but design each cell to hold two side-by-side UILabels (or any custom views) to simulate columns. Here's how to set this up in Storyboard + code:

Storyboard操作步骤：

• Drag a UITableView onto your VC's view, set up auto-layout constraints to pin it to the edges, and connect it to an IBOutlet in your VC (e.g., myTableView).
• Drag a UITableViewCell onto the table, set its Reuse Identifier to something like DoubleColumnCell (this is crucial for reusing cells later).
• Inside this prototype cell, add two UILabels. Position them side by side: set leading constraint for the left label to the cell's leading, trailing constraint for the right label to the cell's trailing, add a horizontal spacing constraint between the two labels, and set their height to match the cell's height.
• Create a custom UITableViewCell subclass (e.g., DoubleColumnCell), then connect the two labels to IBOutlets in this subclass.

Objective-C代码实现：

First, the custom cell class:

// DoubleColumnCell.h
#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface DoubleColumnCell : UITableViewCell
@property (weak, nonatomic) IBOutlet UILabel *leftLabel;
@property (weak, nonatomic) IBOutlet UILabel *rightLabel;
@end

NS_ASSUME_NONNULL_END

// DoubleColumnCell.m
#import "DoubleColumnCell.h"

@implementation DoubleColumnCell

- (void)awakeFromNib {
    [super awakeFromNib];
    // Optional: Pre-set label styles here (font, color, etc.)
}

@end

Then, your view controller code:

// ViewController.h
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>
@property (weak, nonatomic) IBOutlet UITableView *myTableView;
@end

// ViewController.m
#import "ViewController.h"
#import "DoubleColumnCell.h"

@interface ViewController ()
@property (nonatomic, strong) NSArray *columnData;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // Initialize your data (example: array of dictionaries holding left/right column text)
    self.columnData = @[
        @{@"leftText": @"Row 1 Left", @"rightText": @"Row 1 Right"},
        @{@"leftText": @"Row 2 Left", @"rightText": @"Row 2 Right"},
        @{@"leftText": @"Row 3 Left", @"rightText": @"Row 3 Right"}
    ];
    
    // Register the custom cell (optional if using Storyboard prototype, but good practice)
    [self.myTableView registerNib:[UINib nibWithNibName:@"DoubleColumnCell" bundle:nil] forCellReuseIdentifier:@"DoubleColumnCell"];
    self.myTableView.dataSource = self;
    self.myTableView.delegate = self;
}

#pragma mark - UITableView DataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.columnData.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    DoubleColumnCell *cell = [tableView dequeueReusableCellWithIdentifier:@"DoubleColumnCell" forIndexPath:indexPath];
    NSDictionary *rowData = self.columnData[indexPath.row];
    cell.leftLabel.text = rowData[@"leftText"];
    cell.rightLabel.text = rowData[@"rightText"];
    return cell;
}

#pragma mark - UITableView Delegate
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 60; // Custom row height
}

@end

方案2：用UICollectionView替代（真正的网格双列） #

If you want independent cells per column (like a grid where each column is its own cell), UITableView isn't the best tool—UICollectionView is built for this. You can set it up in Storyboard too: just drag a UICollectionView, configure its Flow Layout to have two columns (set item size to half the screen width minus spacing), and use prototype cells like you would with UITableView.

二、给单元格添加阴影、圆角及模糊边框 #

You can add these styles in your custom DoubleColumnCell's layoutSubviews method (this ensures styles apply correctly after layout updates):

- (void)layoutSubviews {
    [super layoutSubviews];
    
    // 1. Set rounded corners
    self.contentView.layer.cornerRadius = 8.0;
    self.contentView.clipsToBounds = YES; // Make sure content stays inside rounded corners
    
    // 2. Add shadow
    self.layer.shadowColor = [UIColor darkGrayColor].CGColor;
    self.layer.shadowOpacity = 0.4;
    self.layer.shadowOffset = CGSizeMake(0, 2);
    self.layer.shadowRadius = 4.0;
    self.layer.masksToBounds = NO; // Don't clip the shadow
    // Add inset to contentView to make space for the shadow
    self.contentView.frame = CGRectInset(self.bounds, 8, 8);
    
    // 3. Add blurred border/background
    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView *blurView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    blurView.frame = self.contentView.bounds;
    blurView.layer.cornerRadius = 8.0;
    blurView.clipsToBounds = YES;
    [self.contentView insertSubview:blurView atIndex:0]; // Place behind your labels
}

三、关于原型单元格数量的疑问 #

You don't need 3 prototype cells! Just one prototype cell is enough—since every row in your table will have the same two-column structure, you just reuse this single cell and populate it with different data for each row.

内容的提问来源于stack exchange，提问作者Hanz Cheah