0Pricing
Objective-C iOS Development for Legacy & Enterprise Apps · บทเรียน

มุมมองตารางและมุมมองคอลเลกชัน

นำ UITableView และ UICollectionView มาใช้และปรับแต่งเพื่อแสดงรายการและตารางเนื้อหาแบบไดนามิก

มุมมองตารางและมุมมองคอลเลกชัน เป็นบทเรียน Objective-C iOS Development for Legacy & Enterprise Apps ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Objective-C iOS Development for Legacy & Enterprise Apps และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Objective-C iOS Development for Legacy & Enterprise Apps มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Meet UITableView

Welcome to lists! UITableView is a fundamental UIKit component used to display scrollable lists of data, commonly seen in apps for settings, contacts, or news feeds.

It's optimized for efficiency, only rendering the cells visible on screen, which makes it perfect for long lists without performance issues.

Data & Behavior for Tables

To work with a UITableView, you primarily interact with two protocols:

  • UITableViewDataSource: This tells the table view what data to display (e.g., number of rows, content for each cell).
  • UITableViewDelegate: This handles how the table view behaves (e.g., row selection, height of rows, custom actions).

Your view controller typically conforms to both.

Your First Table View

Let's create a basic UITableView programmatically. This code snippet assumes it's within a UIViewController subclass that is set as the app's root view controller.

We add the table view to our controller's main view, making it fill the screen.

#import <UIKit/UIKit.h>

@interface MyTableViewController : UIViewController
@end

@implementation MyTableViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    
    // Create a UITableView filling the view
    UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    
    // We'll set the data source and delegate in next steps
    // tableView.dataSource = self; 
    
    [self.view addSubview:tableView];
}
@end

Populating Your Table

To display data, our MyTableViewController needs to conform to the UITableViewDataSource protocol. This means implementing two key methods:

  • numberOfRowsInSection: Tells the table how many rows to expect.
  • cellForRowAtIndexPath: Provides the UITableViewCell for each row.

We also register a basic UITableViewCell for reuse.

#import <UIKit/UIKit.h>

@interface MyTableViewController : UIViewController <UITableViewDataSource>
@property (nonatomic, strong) NSArray *dataItems;
@property (nonatomic, strong) UITableView *tableView;
@end

@implementation MyTableViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    self.dataItems = @[@"Apple", @"Banana", @"Cherry", @"Date"];
    
    self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    self.tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    self.tableView.dataSource = self; // Set self as data source
    
    // Register a basic UITableViewCell class for reuse
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"Cell"];
    
    [self.view addSubview:self.tableView];
}

#pragma mark - UITableViewDataSource methods

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.dataItems.count; // Number of items in our data array
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    // Dequeue (reuse) or create a cell
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
    cell.textLabel.text = self.dataItems[indexPath.row]; // Set cell's text
    return cell;
}
@end

Making Cells Unique

UITableViewCell is the view that displays content for each row. You can customize its appearance by:

  • Using built-in styles (e.g., UITableViewCellStyleSubtitle).
  • Adding subviews directly to cell.contentView.
  • Creating a custom subclass of UITableViewCell for complex layouts.

Always reuse cells with dequeueReusableCellWithIdentifier: for performance.

#import <UIKit/UIKit.h>

@interface MyTableViewController : UIViewController <UITableViewDataSource>
@property (nonatomic, strong) NSArray *dataItems;
@property (nonatomic, strong) UITableView *tableView;
@end

@implementation MyTableViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    self.dataItems = @[@"Apple", @"Banana", @"Cherry", @"Date"];
    
    self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    self.tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    self.tableView.dataSource = self;
    // Registering a cell class (we'll use the default for demo)
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"CustomCell"];
    
    [self.view addSubview:self.tableView];
}

#pragma mark - UITableViewDataSource methods

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.dataItems.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    // Dequeue a cell, using UITableViewCellStyleSubtitle for more options
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CustomCell" forIndexPath:indexPath];
    
    cell.textLabel.text = self.dataItems[indexPath.row];
    cell.detailTextLabel.text = [NSString stringWithFormat:@"Item #%ld", (long)indexPath.row + 1];
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; // Add an arrow
    
    return cell;
}
@end

Flexible Grids: UICollectionView

While UITableView excels at vertical lists, UICollectionView offers much more flexibility for displaying content in customizable layouts, like grids, carousels, or complex dashboards.

It's ideal when you need to arrange items in non-linear or highly visual ways, such as photo galleries, product catalogs, or tag clouds.

Collection View's Data & Flow

Similar to table views, collection views rely on a UICollectionViewDataSource to provide data and a UICollectionViewDelegate for interaction.

A key difference is the UICollectionViewLayout. This object defines how items are arranged (e.g., grid, flow, custom). The most common is UICollectionViewFlowLayout for grid-like structures.

Building Your First Collection

Let's set up a basic UICollectionView. We'll also need to provide a UICollectionViewLayout to tell it how to arrange its items.

UICollectionViewFlowLayout is a good starting point for simple grids, allowing you to define item sizes and spacing.

#import <UIKit/UIKit.h>

@interface MyCollectionViewController : UIViewController
@property (nonatomic, strong) UICollectionView *collectionView;
@end

@implementation MyCollectionViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    
    // Create a flow layout for grid arrangement
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    layout.itemSize = CGSizeMake(100, 100); // Size for each item
    layout.minimumInteritemSpacing = 10;    // Min spacing between items in a row
    layout.minimumLineSpacing = 10;         // Min spacing between rows
    
    self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    self.collectionView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    self.collectionView.backgroundColor = [UIColor systemGroupedBackgroundColor]; // For contrast
    
    // We'll set the data source in the next step
    // self.collectionView.dataSource = self;
    
    [self.view addSubview:self.collectionView];
}
@end

Populating Your Collection

To display items, our MyCollectionViewController needs to conform to UICollectionViewDataSource. It's similar to UITableViewDataSource:

  • numberOfItemsInSection: Specifies the number of items.
  • cellForItemAtIndexPath: Provides the UICollectionViewCell for each item.

Remember to register a cell class or nib before dequeuing!

#import <UIKit/UIKit.h>

@interface MyCollectionViewController : UIViewController <UICollectionViewDataSource>
@property (nonatomic, strong) NSArray *dataItems;
@property (nonatomic, strong) UICollectionView *collectionView;
@end

@implementation MyCollectionViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    self.dataItems = @[@"Red", @"Green", @"Blue", @"Yellow", @"Orange", @"Purple"];
    
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    layout.itemSize = CGSizeMake(80, 80);
    layout.minimumInteritemSpacing = 5;
    layout.minimumLineSpacing = 5;
    layout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5); // Padding around sections
    
    self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    self.collectionView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    self.collectionView.backgroundColor = [UIColor systemGroupedBackgroundColor];
    self.collectionView.dataSource = self; // Set self as data source
    
    // Register a basic UICollectionViewCell class
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"CollectionCell"];
    
    [self.view addSubview:self.collectionView];
}

#pragma mark - UICollectionViewDataSource methods

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.dataItems.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CollectionCell" forIndexPath:indexPath];
    
    // Simple customization: set background color based on item
    NSArray *colors = @[[UIColor redColor], [UIColor greenColor], [UIColor blueColor], [UIColor yellowColor],
                            [UIColor orangeColor], [UIColor purpleColor]];
    cell.backgroundColor = colors[indexPath.item % colors.count];
    
    // Add a label to the cell for text (optional)
    UILabel *label = (UILabel *)[cell.contentView viewWithTag:100];
    if (!label) {
        label = [[UILabel alloc] initWithFrame:cell.contentView.bounds];
        label.tag = 100;
        label.textAlignment = NSTextAlignmentCenter;
        label.textColor = [UIColor whiteColor];
        label.font = [UIFont systemFontOfSize:14];
        [cell.contentView addSubview:label];
    }
    label.text = self.dataItems[indexPath.item];
    
    return cell;
}
@end

Table vs. Collection

Both UITableView and UICollectionView display lists of data, but they have different strengths.

Which of the following is a primary advantage of using UICollectionView over UITableView?

Recap: Lists & Grids

We explored UITableView for displaying efficient vertical lists and UICollectionView for highly customizable grid and non-linear layouts.

  • Both use Data Source and Delegate protocols to manage content and behavior.
  • UITableView is simpler for standard, single-column lists.
  • UICollectionView uses a UICollectionViewLayout for powerful and custom visual arrangements.

Mastering these components is crucial for building dynamic and engaging iOS user interfaces.

คำถามที่พบบ่อย

บทเรียน “มุมมองตารางและมุมมองคอลเลกชัน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “มุมมองตารางและมุมมองคอลเลกชัน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Objective-C iOS Development for Legacy & Enterprise Apps ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Objective-C iOS Development for Legacy & Enterprise Apps มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “มุมมองตารางและมุมมองคอลเลกชัน”

นำ UITableView และ UICollectionView มาใช้และปรับแต่งเพื่อแสดงรายการและตารางเนื้อหาแบบไดนามิก คุณปฏิบัติ Objective-C iOS Development for Legacy & Enterprise Apps ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Objective-C iOS Development for Legacy & Enterprise Apps หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Objective-C iOS Development for Legacy & Enterprise Apps บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “มุมมองตารางและมุมมองคอลเลกชัน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Objective-C iOS Development for Legacy & Enterprise Apps นี้ได้ไหม

ได้ บทเรียน Objective-C iOS Development for Legacy & Enterprise Apps ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. UIView และ UIViewController
  2. ตัวควบคุมและเหตุการณ์ UI ทั่วไป
  3. มุมมองตารางและมุมมองคอลเลกชัน
  4. Auto Layout ด้วย NSLayoutConstraint
← กลับไปที่ Objective-C iOS Development for Legacy & Enterprise Apps