Membuat TabelView Sederhana

Artikel 2 Tutorial Pemrograman iOS: Membuat Simple Table View App Apakah anda enjoy untuk membuat aplikasi Hello World? Di tutorial ini, kita akan lakukan sesuatu yang lebih kompleks dan bagaimana membangun aplikasi sederhana menggunakan Table View. Jika Anda belum membaca tutorial sebelumnya tentang pemrograman iOS dasar, periksa kembali ke tutorial awal yang lebih sederhana.

Apa itu Table View di aplikasi iPhone? Table View merupakan salah satu elemen UI yang umum di aplikasi iOS. Kebanyakan aplikasi, dalam beberapa hal, memanfaatkan Table View untuk menampilkan daftar data. Contoh terbaik adalah aplikasi Telepon built-in. Kontak Anda ditampilkan dalam Table View. Contoh lain adalah aplikasi Mail. Menggunakan Table View untuk menampilkan kotak surat Anda dan email. Tidak hanya dirancang untuk menampilkan data tekstual, Table View memungkinkan Anda untuk menyajikan data dalam bentuk gambar. Built-in video dan aplikasi YouTube adalah contoh dalam penggunaannya.

Contoh aplikasi yang menggunakan table view.

Membuat Project SimpleTable

Dengan ide dari TableView, kita akan membuat aplikasi sederhana. Tidak hanya sekilas anda pelajari tutorial ini disarankan anda serius untuk belajar pemrograman iOS. Buka Xcode dan Code!

Setelah ditampilkan Xcode, tahap selanjutnya adalah membuat New Project kemudian pilih "Single View Application.

Klik "next" untuk melanjutkan. Sekali lagi, ini semua opsi yang diperlukan.

Product Name: Simple Name - ini adalah nama aplikasi yang kita buat.
Company Identifier: com.raharja - ini sebenarnya nama domain yang ditulis terbalik. Jika kita telah memiliki nama domain, kita dapat menggunakan nama domain sendiri. Jika tidak, kita dapat menggunakan mine atau "edu.self"
Class Prefix: Simple Table - Xcode menggunakan awalan kelas untuk menyebutkan kelas otomatis. Dimasa yang akan daang, Anda dapat memilih awalan Anda sendiri atau bahkan dibiarkan kosong. Tapi untuk toturial ini, tetap menggunakan "SimpleTable"
Device Family: iPhone - hanya menggunakan "iPhone" untuk project ini.
Use Storyboards [unchecked] - Jangan pilih opsi ini. Kita tidak perlu menggunakan Storyboard untuk project sederhana ini.
Use Automatic Reference Counting [checked] - secara default, ini harus diaktifkan. Biarkan saja seperti itu.
Include Unit Test [unchecked] - Tidak perlu dichecklist untuk saat ini.

Klik "next" untuk melanjutkan. Xcode kemudian meminta Anda dimana menyimpan "SimpleTable" proyek. Pilih folder (misalnya Desktop) untuk menyimpan project Anda. Seperti sebelumnya, hapus opsi untuk Source Control. Klik "Create" untuk melanjutkan.

Ketika Anda mengkonfirmasi, Xcode otomatis menciptakan Project "SimpleTable" berdasarkan pilihan yang Anda berikan. Layar yang dihasilkan terlihat seperti ini:

Layar utama Project SimpleTable

Merancang View

Pertama, kita akan membuat user interface dan menambahkan tampilan tabel. Pilih "SimpleTableViewController.xib" untuk beralih ke Interface Builder.

Di dalam object Library, pilih object "Table View" kemudian drag (seret) ke dalam view.

Seharusnya tampilan layarnya seperti dibawah ini setelah insert "Table View"

Jalankan aplikasi untuk Pertama kali

Sebelum pindah, coba jalankan aplikasi Anda menggunakan Simulator. Klik tombol "Run" tombol untuk build aplikasi Anda dan mengujinya.

Bagaimana? Mudah bukan? Anda sudah berhasil merancang Table View di app. Untuk saat ini aplikasi yang kita sudah buat tidak belum ada data yang ditampilkan. Selanjutnya, kita akan menulis beberapa kode untuk menambahkan data tabel.

Menambahkan Data Tabel

Kembali ke Project Navigator dan pilih "SimpleTableViewController.h". tambahkan "<UITableViewDelegate, UITableViewDataSource>" setelah "UIViewController". Kode Anda akan terlihat seperti di bawah ini:

#import <UIKit/UIKit.h>

@interface SimpleTableViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>

@end

"UITableViewDelegate" dan "UITableViewDataSource" dikenal sebagai protokol di Objective-C. Pada dasarnya untuk menampilkan data di Table View, kita harus sesuai dengan persyaratan yang ditetapkan dalam protokol dan menerapkan semua metode wajib.

UITableViewDelegate dan UITableViewDataSource

Sebelumnya, telah ditambahkan protokol "UITableViewDelegate" dan "UITableViewDataSource" dalam file header. Ini mungkin membingungkan bagi Anda. Apakah UITableViewDelegate dan UITableViewDataSource itu?

UITableView, merupakan kelas yang sebenarnya yang ada dibalik Table View, dirancang untuk menjadi fleksibel untuk menangani berbagai jenis data. Misalnya anda dapat menampilkan data seperti daftar negara atau nama kontak. Atau seperti contoh ini, kita akan menggunakan tampilan tabel untuk menyajikan daftar resep. Jadi bagaimana Anda tahu bahwa UITableView dapat menampilkan daftar data? UITableViewDataSource adalah jawabannya. Ini ada hubungannya antara data dan tampilan tabel. Protokol UITableViewDataSource protokol dua metode yang diperlukan yaitu (tableView: cellForRowAtIndexPath dan tableView: numberOfRowsInSection). Melalui penerapan metode ini, Anda memberitahukan kepada "Table View" berapa banyak baris untuk menampilkan dan data dalam setiap baris.

Disisi lain ada UITableViewDelegate, ini berkaitan dengan munculnya UITableView. Metode opsional dari protokol memungkinkan Anda mengatur ketinggian baris tabel, mengkonfigurasi judul bagian dan footer, sel tabel re-order, dan lain-lain. Disini saya tidak mengubah salah satu metode ini dalam contoh ini. Mari kita lihat tutorial berikutnya.

Selanjutnya, pilih "SimpleTableViewController.m" dan mendefinisikan variabel misalnya untuk menangani data tabel.

1
2
3
4

@implementation SimpleTableViewController
{
NSArray *tableData;
}

Dalam Metode "viewDidLoad", tambahkan kode berikut untuk menginisialisasi array "tableData". Disini kita akan menginisialisasi sebuah array dengan daftar resep.

1
2
3
4
5
6

- (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];
}

Apa itu Array?

Array adalah struktur data dasar dalam pemrograman komputer. Anda dapat menganggap sebuah array sebagai kumpulan elemen data. Pertimbangkan array tableData dalam kode di atas, itu merupakan kumpulan elemen-elemen tekstual.

Setiap elemen array diidentifikasi atau diakses oleh index. Sebuah array dengan 10 elemen akan memiliki indexdari 0 sampai 9. Itu berarti, tableData [0] mengembalikan elemen pertama dari array "tableData".

Di Objective C, NSArray adalah kelas untuk menciptakan dan mengelola array. Anda dapat menggunakan NSArray untuk membuat array statis yang ukurannya tetap. Jika Anda membutuhkan sebuah array dinamis, gunakan NSMutableArray sebagai gantinya.

NSArray menawarkan serangkaian factory method untuk membuat objek array. Dalam kode ini, kita menggunakan "arrayWithObjects" untuk instantiate objek NSArray dan preload dengan unsur-unsur tertentu (misalnya Hamburger).

Anda juga dapat menggunakan metode built-in lain untuk query dan mengelola array. Kemudian, gunakan "count" metode untuk query jumlah elemen data dalam array. Untuk mempelajari lebih lanjut tentang penggunaan NSArray, Anda selalu dapat merujuk ke Apple’s official document.

Akhirnya, kita harus menambahkan dua method datasource : "tableView: numberOfRowsInSection" dan "tableView: cellForRowAtIndexPath". Kedua method ini merupakan bagian dari protokol UITableViewDataSource. Ini wajib untuk diterapkan metode ketika kita mengkonfigurasi UITableView. Method pertama digunakan untuk menginformasikan view tabel berapa banyak baris dalam bagian (section). Jadi mari kita tambahkan kode di bawah ini. Method "count" hanya mengembalikan jumlah item dalam array "tableData".

1
2
3
4

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [tableData count];
}

Selanjutnya kita terapkan pada metode lain yang diperlukan.

1
2
3
4
5
6
7
8
9
10
11
12
13

- (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];
  return cell;
}

"cellForRowAtIndexPath" disebut setiap kali ketika sebuah baris tabel akan ditampilkan. Ilustrasi di bawah ini akan memberikan Anda pemahaman yang lebih baik tentang bagaimana UITableView dan UITableDataSource bekerja.

Oke, mari kita tekan tombol "Run" tombol dan coba aplikasi Anda! Jika Anda telah menulis kode dengan benar, Simulator harusnya dapat menjalankan aplikasi Anda seperti ini dibawah ini:

Mengapa masih kosong? Kami sudah menulis kode untuk menghasilkan data tabel dan menerapkan metode yang diperlukan. Tapi mengapa Table View tidak muncul seperti yang diharapkan?

Masih ada satu langkah lagi.

Menghubungkan DataSource dan Delegate

Seperti tombol "Hello World" tombol di tutorial sebelumnya, kita harus membuat sambungan antara Table View dan dua method saja kita buat.

Kembali ke "SimpleTableViewController.xib". Tekan dan tahan tombol Control pada keyboard Anda, pilih TableView dan tarik ke "File's Owner". Layar Anda akan terlihat seperti ini:

Menghubungkan TableView dengan DataSource dan Delegate

Lepaskan kedua tombol dan dengan menunjukkan arah panah antara "DataSource" & "delegate". Pilih "DataSource" untuk membuat connection antara Table View dan DataSource. Ulangi langkah di atas dan membuat koneksi dengan delegate.

Koneksi antara koneksi dengan delegate

Itu saja. Untuk memastikan koneksi terhubung dengan benar, Anda dapat memilih Table View lagi. Di bagian atas area Utility, Anda dapat memastikan koneksi yang ada di "Connection Inspector" (yaitu tab paling kanan).

Tampilan Connections Inspector

Test Aplikasi Anda

Cukup tekan tombol "Run" tombol dan jalankan Simulator aplikasi Anda:

Menambahkan Thumbnail ke TableView

Tampilan tabel terlalu polos, kan? Bagaimana menambahkan gambar ke setiap baris? IOS SDK membuatnya sangat mudah untuk melakukan hal ini. Anda hanya perlu menambahkan baris kode untuk memasukkan thumbnail untuk setiap baris.

Pertama, download sampel gambar ini. Atau, Anda dapat menggunakan gambar Anda sendiri tetapi pastikan Anda nama itu "creme_brulee.jpg". Dalam Proyek Navigator, klik kanan "SimplyTable" folder dan pilih "Add File ke SimpleTable ...".

Pilih file gambar dan periksa kotak centang "Copy items to destination group’s folder". Klik "OK" untuk menambahkan file.

Sekarang edit "SimpleTableViewController.m" dan tambahkan baris kode berikut di "tableView: cellForRowAtIndexPath" metode:

1	cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];

Kode Anda akan terlihat seperti ini setelah mengedit:

Pilih file gambar dan tambahkan ke dalam project

Baris kode diatas akan meload gambar dan menyimpan di area gambar sel tabel. Sekarang, klik kembai tombol "Run" selanjutnya aplikasi SimpleTable Anda harus menampilkan gambar dalam setiap baris.

Apa selanjutnya?

Toturial diatas adalah cara yang paling sederhana untuk membuat tampilan tabel. TabelView adalah salah satu elemen yang paling umum digunakan dalam pemrograman iOS. Jika Anda telah mengikuti tutorial dan membangun aplikasi, Anda harus memiliki gagasan dasar tentang cara membuat tampilan tabel.

Belajar iOS