Menyesuaikan TableViewCell untuk UITableView

Sebelumnya, kami telah membuat TableView aplikasi sederhana untuk menampilkan daftar resep dengan gambar yang telah ditentukan.

Tampilan gambar yang berbeda untuk baris yang berbeda pula. Pada tutorial sebelumnya saya telah membuat tutorial dengan menampilkan thumbnail yang sama untuk semua baris. Bukankah lebih baik untuk menampilkan gambar yang berbeda untuk setiap resep?

Tampilan Thumbnail yang Berbeda

Sebelum kita mengubah kode, mari kita kembali kode untuk menampilkan thumbnail dalam baris tabel.

Pada tutorial sebelumnya kita telah menambahkan baris kode untuk menginstruksikan UITableView untuk menampilkan "creme_brelee.jpg" dalam setiap baris. Jelas, untuk menunjukkan gambar yang berbeda, kita perlu mengubah baris kode. Seperti dijelaskan sebelumnya, "cellForRowAtIndexPath" metode ini disebut oleh iOS secara otomatis setiap kali sebelum baris tabel akan ditampilkan.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

Jika Anda melihat ke dalam parameter method, itu melewati "indexPath" ketika dipanggil. Parameter indexPath berisi nomor baris (serta nomor section) dari baris tabel. Anda hanya dapat menggunakan properti "indexPath.row" untuk mengetahui baris yang menunjuk kepada posisi saat ini. Seperti array, hitungan baris tabel dimulai dari nol. Dengan kata lain, "indexPath.row" properti kembali 0 untuk baris pertama dari tabel.

Jadi untuk menampilkan thumbnail yang berbeda, kita akan menambahkan array baru (yaitu thumbnail) yang menyimpan nama file thumbnail:

@implementation SimpleTableViewController

{

    NSArray *tableData;

    NSArray *thumbnails;

}

- (void)viewDidLoad

{

    [super viewDidLoad];

    // Initialize table data

    tableData = [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil];

    // Initialize thumbnails

    thumbnails = [NSArray arrayWithObjects:@"egg_benedict.jpg", @"mushroom_risotto.jpg", @"full_breakfast.jpg", @"hamburger.jpg", @"ham_and_egg_sandwich.jpg", @"creme_brelee.jpg", @"white_chocolate_donut.jpg", @"starbucks_coffee.jpg", @"vegetable_curry.jpg", @"instant_noodle_with_egg.jpg", @"noodle_with_bbq_pork.jpg", @"japanese_noodle_with_pork.jpg", @"green_tea.jpg", @"thai_shrimp_cake.jpg", @"angry_birds_cake.jpg", @"ham_and_cheese_panini.jpg", nil];

}

Seperti yang dapat Anda lihat dari kode di atas, kita menentukan thumbnail array dengan daftar nama file gambar. Urutan gambar yang selaras dengan bahwa dari "tableData".

Untuk mudahkan mendapatkan thumbmail, Anda dapat men-download gambar yang sudah saya siapkan dan menambahkannya ke dalam proyek Anda. Pastikan "Copy items into destination group’s folder" diaktifkan.

Setelah menambahkan file gambar, Anda akan melihat hasilnya di Navigator Project seperti layar seperti di bawah:

Langkah terakhir, ubah baris kode dalam "cellForRowAtIndexPath" method untuk:

cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];

Apa itu [thumbnail objectAtIndex: indexPath.row]?

Baris kode mengambil nama gambar untuk baris tertentu. Katakanlah, untuk baris pertama, indexPath.row properti kembali 0 dan kita ambil gambar pertama (yaitu egg_benedict.jpg) dari array thumbnail menggunakan "objectAtIndex" method.

Setelah menyimpan semua perubahan, selanjutnya kita dapat menjalankan aplikasi Anda lagi. Ini sekarang harus menampilkan thumbnail yang berbeda untuk baris tabel:

Sesuaikan TableView Cell

Apakah aplikasi aplikasi anda terlihat lebih baik? Disini kita akan membuatnya lebih baik dengan menyesuaikan table Cell. Sejauh ini saya menggunakan style default tampilan table cell. Lokasi dan ukuran thumbnail yang akan kita sempurnakan. Bagaimana jika Anda ingin membuat thumbnail lebih besar dan menunjukkan informasi waktu yang diperlukan untuk menyiapkan resep makanan.

Merancang Sel

Dalam kasus ini, Anda harus membuat dan merancang sel meja Anda sendiri. Kembali ke Xcode. Dalam Proyek Navigator, klik kanan "SimpleTable" folder dan pilih "New file ...".

Seperti kita akan merancang sel tabel kita sendiri, kita harus membuat file Builder Antarmuka baru untuk sel. Untuk kasus ini, kita hanya perlu untuk memulai dengan user interface kemudian pilih "Empty" dan Klik "Next" untuk melanjutkan.

Ketika meminta untuk memilih device family pilih "iPhone" dan klik "Next" untuk melanjutkan. Simpan file sebagai "SimpleTableCell".

Setelah file dibuat, Anda harus menemukannya dalam Project Navigator. Pilih "SimpleTableCell.xib" untuk beralih ke Interface Builder. Kita akan merancang tampilan dari sel tabel customer.

Di Library Object, pilih "Table View Cell" dan drag ke area desain Interface Builder.

Dalam rangka mengakomodasi thumbnail yang lebih besar, kita harus mengubah ketinggian sel. Hanya menahan pada bagian bawah / atas sisi sel dan skala ketinggian sampai dengan 78.

Atau, Anda juga dapat menggunakan "Size Inspector" untuk mengubah ketinggian.

Size Inspector untuk Table View Cell

Selanjutnya, pilih "Attributes Inspector" di bagian atas area Utilitas dan mengatur "Identifier" dari sel costom untuk "SimpleTableCell". Identifier ini akan digunakan kemudian dalam kode Anda.

Setelah mengkonfigurasi tampilan tabel sel, kami akan menempatkan unsur-unsur lain di dalamnya. Pilih "ImageView" dan drag ke TableView Cell.

ImageView disini digunakan untuk menampilkan Thumbnail. Anda bisa mengubah ukurannya untuk membuatnya sesuai cell.

Selanjutnya kita akan tambahkan tiga label: Nama, Prep Time, dan Time. "Name" Label digunakan untuk menampilkan nama label resep. Prep Time adalah label statis yang hanya menampilkan "Prep Time". Yang terakhir adalah label "time" adalah label dinamis yang digunakan untuk menunjukkan waktu persiapan sebenarnya untuk resep tertentu.

Untuk menambahkan label, pilih "Label" di Object Library dan tarik ke cell. Anda dapat mengklik dua kali label untuk mengganti namanya.

Anda mungkin melihat ukuran font dan style yang berbeda dari yang ditunjukkan di atas. Untuk mengubah font style, cukup pilih Label dan pilih "Attributes Inspector". Dari sini, Anda dapat mengubah setting "Font" dan ukuran font minimum. Anda juga dapat mengubah warna teks dan keselarasan melalui inspector.

Desain akhir dari aplikasi yang dibuat adalah seperti ini:

Membuat sebuah Class untuk Table Custom

Sejauh ini, kita telah mendesain table cell. Tapi bagaimana kita bisa mengubah nilai-nilai label dari sel custom? Kita akan membuat kelas baru untuk tampilan tabel sel custom. Kelas ini merupakan model data yang mendasari dari sel custom.

Sama seperti sebelumnya, klik kanan "SimpleTable" folder dalam Project Navigator dan pilih "New File...".

Setelah memilih opsi, Xcode meminta Anda untuk memilih template. Seperti kita akan membuat kelas baru untuk tampilan tabel sel custom, pilih "Objective-C class" di bawah "cocoa Touch" dan klik "Next".

Isi "SimpleTableCell" untuk nama kelas dan pilih "UITableViewCell" untuk pilihan "Subclass of" .

Klik "Next", menyimpan file dalam folder proyek SimpleTable dan klik "Create" untuk melanjutkan. Xcode harus membuat dua file bernama "

SimpleTableCell.h" dan "SimpleTableCell.m" di Project Navigator .

Seperti disebutkan sebelumnya, class SimpleTableCell berfungsi sebagai model data dari cell custom. Dalam cell, kita memiliki tiga nilai-nilai yang berubah: tampilan gambar kecil, label nama dan label waktu. Di class ini, kita akan menambah tiga properti untuk mewakili nilai-nilai dinamis.

Buka "SimpleTableCell.h" dan menambahkan properti berikut sebelum baris "@end":

@property (nonatomic, weak) IBOutlet UILabel *nameLabel;

@property (nonatomic, weak) IBOutlet UILabel *prepTimeLabel;

@property (nonatomic, weak) IBOutlet UIImageView *thumbnailImageView;

@Property dan Outlet

Baris kode diatas mendefinisikan 3 instance variabel yang kemudian akan dikaitkan dengan table cell view di dalam instance builder. Kata kunci @property digunakan untuk menyatakan sebuah property dalam class berupa:

@property (attribute) type name;

Mengacu pada baris kode di atas, weak dan nonatomic adalah atribut dari property. UILabel dan UIImageView adalah type, sedangkan "nameLabel", "prepTimeLabel" dan "thumbnailImageView" adalah name.

Jadi apa IBOutlet? Anda dapat menganggap IBOutlet sebagai indikator. Untuk mengaitkan kasus variabel dengan unsur-unsur di Cell Table View (yaitu SimpleTableCell.xib), kita menggunakan kata kunci "IBOutlet" untuk memberitahukan Interface Builder bahwa mereka diizinkan untuk melakukan koneksi. Kemudian, kita akan melihat bagaimana untuk membuat koneksi antara outlet dan objects di Interface Builder.

Sekarang, buka "SimpleTableCell.m" dan tambahkan kode berikut tepat di bawah "@implementation SimpleTableCell":

@synthesize nameLabel = _nameLabel;

@synthesize prepTimeLabel = _prepTimeLabel;

@synthesize thumbnailImageView = _thumbnailImageView;

@synthesize Directive

Kata kunci "@synthesize" memberitahu compiler secara otomatis menghasilkan kode untuk mengakses properti yang telah kita menyatakan sebelumnya. Jika kita lupa untuk menyertakan Directive ini, Xcode akan menampilkan kode peringatan seperti di bawah ini:

Membuat Koneksi

Simpan perubahan, kemudian pilih "SimpleTableCell.xib" untuk kembali ke Interface Builder. Sekarang kita akan membuat koneksi antara properties dari class dengan Label / ImageView yang dibuat dalam Interface.

Pertama, pilih sel untuk mengubah class pada "SimpleTableCell" dalam "Identity Inspector". Hubungkan View Cell dengan Class Custom yang telah kita buat sebelumnya.

Sekarang, kita akan membangun koneksi dengan properties. Klik kanan pada "SimpleTableCell" di bawah "Objects" untuk menampilkan "Outlet" Inspector. Klik dan tahan (hold) lingkaran di samping "nameLabel", dan tarik (drag) ke "Label - Nama" object. Xcode otomatis membentuk koneksi.

Ulangi prosedur di atas untuk "prepTimeLabel" dan "thumbnailImageView":

Connect "prepTimeLabel" dengan object "Label - Time"

Connect "thumbnailImageView" dengan object "ImageView"

Setelah Anda membuat semua koneksi, seharusnya terlihat seperti ini:

Memperbaharui SimpleTableViewController

Kami telah menyelesaikan desain dan coding untuk custome table cell. Akhir dari bagian perubahan - untuk memanfaatkan custome cell di SimpleTableViewController tersebut.

Mari kita kembali membuka koding "SimpleTableView.m" yang saat ini digunakan untuk membuat baris tabel:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static NSString *simpleTableIdentifier = @"SimpleTableItem";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

    if (cell == nil) {

        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];

    }

    cell.textLabel.text = [tableData objectAtIndex:indexPath.row];

    cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];

    return cell;

}

Kita gunakan default tampilan tabel sel (yaitu UITableViewCell) untuk menunjukkan item pada tabel. Untuk menggunakan Custome Table Cell, kita harus mengubah sebagian dari kode dalam "SimpleTableView.m" sebagai berikut:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static NSString *simpleTableIdentifier = @"SimpleTableCell";

    SimpleTableCell *cell = (SimpleTableCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

    if (cell == nil)

    {

        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"SimpleTableCell" owner:self options:nil];

        cell = [nib objectAtIndex:0];

    }

    cell.nameLabel.text = [tableData objectAtIndex:indexPath.row];

    cell.thumbnailImageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];

    cell.prepTimeLabel.text = [prepTime objectAtIndex:indexPath.row];

    return cell;

}

Namun, setelah kita memperbarui kode, Xcode mendeteksi ada beberapa kesalahan seperti yang ditunjukkan dalam editor kode sumber.

Kesalahan pada Source Code yang dinyatakan oleh Xcode

Apa masalahnya? Kode yang baru saja kita ubah memberitahu "SimpleTableViewController" untuk menggunakan class "SimpleTableCell" sebagai cell table. Namun, "SimpleTableViewController" tidak memiliki gambaran tentang hal itu. Itu sebabnya Xcode menampilkan kesalahan.

Sebagaimana dijelaskan dalam tutorial pertama, file header menyatakan interface class. Untuk "SimpleTableViewController" agar mengenal "SimpleTableCell", kita harus mengimpor "SimpleTableCell.h" dalam "SimpleTableViewController.m".

Impor SimpleTableCell.h

Dengan mengimpor "SimpleTableCell.h" ke dalam "SimpleTableViewController" kita bisa memanfaatkannya.

Terakhir, kita sesuaikan table cell diubah menjadi 78, tambahkan kode di bawah ini di atas "@end".

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

    return 78;

}

Sekarang, klik "Run" tombol aplikasi SimpleTable untuk melihat hasilnya.

Belajar iOS