Tampilan Tabel dan Tampilan Koleksi
Terapkan dan sesuaikan UITableView serta UICollectionView untuk menampilkan daftar dan kisi konten yang dinamis.
Tampilan Tabel dan Tampilan Koleksi adalah pelajaran Objective-C iOS Development for Legacy & Enterprise Apps gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Objective-C iOS Development for Legacy & Enterprise Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Objective-C iOS Development for Legacy & Enterprise Apps mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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];
}
@endPopulating 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 theUITableViewCellfor 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;
}
@endMaking 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
UITableViewCellfor 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;
}
@endFlexible 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];
}
@endPopulating 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 theUICollectionViewCellfor 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;
}
@endTable 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.
UITableViewis simpler for standard, single-column lists.UICollectionViewuses aUICollectionViewLayoutfor powerful and custom visual arrangements.
Mastering these components is crucial for building dynamic and engaging iOS user interfaces.
Belajar Objective-C dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 12
- Pelajaran
- 48
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Tampilan Tabel dan Tampilan Koleksi” gratis?
Ya — teks lengkap “Tampilan Tabel dan Tampilan Koleksi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Objective-C iOS Development for Legacy & Enterprise Apps, upgrade ke CoddyKit PRO. Kursus Objective-C iOS Development for Legacy & Enterprise Apps mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Tampilan Tabel dan Tampilan Koleksi”?
Terapkan dan sesuaikan UITableView serta UICollectionView untuk menampilkan daftar dan kisi konten yang dinamis. Kamu berlatih Objective-C iOS Development for Legacy & Enterprise Apps dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Objective-C iOS Development for Legacy & Enterprise Apps?
Tidak diperlukan pengalaman sebelumnya. Objective-C iOS Development for Legacy & Enterprise Apps di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Tampilan Tabel dan Tampilan Koleksi” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Objective-C iOS Development for Legacy & Enterprise Apps ini?
Ya. Setiap pelajaran Objective-C iOS Development for Legacy & Enterprise Apps menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- UIView dan UIViewController
- Kontrol dan Peristiwa UI Umum
- Tampilan Tabel dan Tampilan Koleksi
- Auto Layout dengan NSLayoutConstraint