Memodifikasi Table View menggunakan Prototype Cell di iOS – FoodPin App

Di postingan sebelumnya kita telah membuat aplikasi table-based sederhana yang menampilkan daftar restaurant menggunakan stock cell style. Nah, di postingan kali ini kita akan mengubah table cell tersebut menjadi lebih bagus dan stylis.

Memodifikasi Table View menggunakan Prototype Cell di iOS

Berikut point-point yang akan kita kerjakan selanjutnya:

  • Membuat aplikasi yang sama menggunakan UITableViewController dari UITableView
  • Menampilkan gambar yang berbeda tiap restaurant dan menampilkannya berupa icon gambar untuk setiap daftar restaurant.
  • Mendesign custom table view cell menjadi lebih barik dari pada menggunkan bassic style yang di kerjakan sebelumnya.

Anda mungkin bertanya kenapa kita harus membuat aplikasi yang sama lagi. Nah sebenarnya ada banyak cara untuk melakukan sesuatu, jika sebelumnya kita menggunakan UITableView dari Object Library untuk membuat table view, sekarang kita akan menggunakan UITableViewController untuk membuat aplikasi table view di Xcode. Apakah jadi lebih mudah, atau malah tambah susah? Tentunya akan menjadi lebih mudah.

 

Membuat aplikasi Table View menggunakan UITableViewController

Pertama mari kita lihat bagaimana menggunakan UITableViewController untuk membuat aplikasi tabel sederhana. Untuk memulainya buka Xcode, buat project baru menggunakan template “Single View application”. Beri nama project FoodPin, dan isi semua form yang dibutuhkan untuk project seperti pembahasan kita di postingan sebelumnya.

New Project

Setelah kita membuat project Xcode, pilih “Main.storyboard” dan pindah ke Interface Builder. Dan seperti biasa kita akan mendisable Size Classes. Di bawah File Inspector, jangan centang “Use Size Classes” dan pilih devicenya iPhone. Dengan kita memilih template project Single View Application maka kita jukga akan menemukan view controller bawaan yang telah dibuat otomatis ketika kita membuat project tersebut di Xcode.

Nah untuk project ini, kita tidak akan menggunakan view controller bawaan, jadi pilih view controller tersebut dan tekan tombol delete lalu delete. View Controller terhubung dengan file View Contoller.swift, nah kita tidak membutuhkannya jadi di Project Navigator, pilih file tersebut dan delete, pilih “Move to Trash” ketika ada pemberitahuan, hal ini akan otomatis menghapusnya jadi project.

Kembali ke storyboard, pindahkahn Table View Controller (UITableViewController) dari Object Library ke storyboard. Kita harus memberi tanda view controller dengan initial view controller, yang nantinya di load oleh view controller untuk pertama kali. Semua yang kita butuhkan adalah memilih Attributes Inspector dan meng-enable pilihan “Is Initial View Controller”, seperti gambar dibawah ini.

Memindahkan Table View Controller dari Object Library dan menjadikannya Initial View Controller
Memindahkan Table View Controller dari Object Library dan menjadikannya Initial View Controller

Membuat FileJika kita telah mengcompile aplikasi dan menjalankan aplikasi kita akan melihat aplikasi menampilkan halaman kosong. Itu dikarenakan kita belum menampilkan data apapun.

Table view controller yang telah kita buat sebelumnya sebenarnya terhubung dengan class UITableViewController bawaan, nah agar kita bisa menambahkan data baru, kita harus menghubungkannya dengan class kita sendiri.

Kembali lagi ke Project Navigator dan klik kanan folder Foopin. Pilih “New Files..” untuk membuat file baru. Pilih “Cocoa Touch Class” sebagai template dan klik “Next”.  Beri nama class tersebut dengan “RestaurantTableViewController”.

Dimana itu merupakan ektensi dari UITableViewController, maka kita harus merubah nilai “Subclass of” menjadi “UITableViewController”. Klik “Next” dan save itu ke folder project, ini nantinya akan membuat file RestaurantTableViewController.swift di project kita.

Membuat subclass dari UITableViewController
Membuat subclass dari UITableViewController

 

Superclass dan Subclass

Swift merupakan Object Oriented Programming (OOP), di OOP sebuah class bisa diwarisi oleh class lainnya. Nah untuk contoh ini, class RestaurantTableViewController adalah turunan dari class UITableViewController. Itu mewarisi semua kondisi dan fungsi yang ada di class UITableViewController. Class RestaurantTableViewController disebut sebagai sublcass (anak class) dari UITableViewController. Dengan kata lain, UITableViewController merupakan superclass dari RestaurantTableViewController.

Table view controller yang ada di storyboard belum mengetahui tentang adanya class RestaurantTableViewController. Jadi selanjutnya yang akan kita lakukan adalah mengenalkan table view controller ini dengan custom class kita. Pergi ke storyboard dan pilih table view controller. Dibawah Identity Inspector, pasangkan custom class ke RestaurantTableViewController. Nah sekarang kita telah membuat koneksi antara table view controller yang ada di storyboard dengan custom class kita.

Memasang custom class dari Table View Controller

Ada satu hal lagi yang perlu kita kongfigurasi untuk table view ini, pilih table view cell lalu di Attributes Inspector ganti style “Basic” menjadi “Cell”.

Ok, user interface kita telah selesai, mari kita coding. Pilih file RestauranTableViewController yang ada di Project Navigator dan deklarasikan instasi variabel untuk menampung model data seperti dibawah ini:

Seperti yang telah disebutkan sebelumnya, UITableViewController seberanya telah mengadopsi semua sifat dari UITableViewDataSource. Jika Anda masih ingat, kita harus mengimplementasikan method dibawah ini sebagai protocol:

  • tableView(_:numverOfRowInSection:)
  • tableView(:cellForRowAtIndexPath:)

Class UITableViewController telah menyediakan implementasi bawaan untuk kedua method ini. Tapi sebenarnya kita kedua method ini belum begitu cocok untuk kasus seperti aplikasi. Oleh karena itu kita harus membuat satu default lagi untuk implementasikan sendiri. Berikut code untuk RestaurantTableViewController.swift:

Di Swift, untuk menolah sebuah method dari superclass, kita hanya perlu menambahkan kata override di awal method. Method diatas sama persis dengan code yang telah kita bahas di postingan sebelumnya.

Selanjutnya, ganti potongan code yang ada di RestaurantTableViewController. Code ini dibuat oleh Xcode secara otomatis ketika membuat file baru. Dari code bawaan, biasanya nilai kembalianya adalah 0, untuk kita harus menggantinya menjadi satu seperti code dibawah ini:

Langkah terakhir adalah mendownload sumber gambar di  https://www.dropbox.com/s/d1rwisj6pt89db3/restaurantimages.zip dan pindahkan semua gambar ke images.xcassets. Nah sekarang kita bisa menekan tombol Run untuk menjadi aplikasi, dan seharunya aplikasi menampilan tabel sederhana seperti yang ada di postingan sebelumnya.


 

Menampilkan Thumbnails Berbeda

Nah saya asumsikan Anda telah mengikuti postingan ini sebelum memulai langkah selanjutnya. Ada banyak cara untuk menampilkan thumbnail berbeda untuk setiap restaurant. Saya akan memperlihatkan kepada Anda thumbnail yang paling sering digunakan di aplikasi-aplikasi keren yang ada saat ini. Pertama download gambar lainnya di  https://www.dropbox.com/s/zzlsbz2c4p3pow1/restaurantimages.zip dan pindahkan semua gambar ke images.xcassets. Didalamnya sudah ada beberapa gambar makanan dan restaurant.

Menambahkan gambar restaurant ke image
Menambahkan gambar restaurant ke image

Sebelum kita mengganti code, coba kunjungi code untuk menampilkan thumbnail table row.

Pada code diatas method tableView(_:cellForRowAtIndexPath:) menginstruksikan UITableView untuk menampilkan gambar restaurant.jpg untuk setiap baris. Tentunya kita ingin menampilkan gambar yang berbeda tiap barisnya, oleh karena itu kita harus mengubahnya. Seperti yang telah di jelaskan sebelumnya, method ini dipanggil oleh iOS setiap kali baris tabel di tampilkan.

Demo AppJika Anda mengerti bagaimana nama restaurant di tampilkan, maka anda tahu paramater indexPath untuk masing-masing nomor baris dari tabel. Untuk mengetahuinya kita hanya perlu memanggil indexPath.row untuk tahu baris ke berapa yang ditampilkan terakhir kalinya.

Ok kita kembali lagi, untuk menampilkan thumbnail berbeda kita harus menambahkan array baru yang berisikan nama dari gambar thumbnail, seperti berikut:

Seperti yang terlihat pada code diatas, kita inisialiasi array restaurantImages dengan daftar dari dari gambar. Terakhir, ganti code dari method tableView(_:cellForRowAtIndexPath:) menjadi:

Setelah menyimpan semua perubahan, coba jalankan aplikasi kembali. Harusnya aplikasi akan menampilan gambar berbeda tiap restaurantnya seperti gambar disamping.


 

Memodifikasi Table View Cell

Apakah aplikasi sudah terlihat lebih bagus? Mari kita buat jadi lebih bagus lagi menggunakan table cell. Sejauh ini kita hanya memanfaatkan style bawaan dari table view cell. Nah bagaimana jika kita ganti jadi:

  • Jarak antar cell
  • Membuat thumbnail menjadi sedikit lebih besar
  • Menampilkan informasi lainnya tentang restaurant seperti lokasi dan tipe restaurant
  • Mengganti font dan ukurannya
  • Menampilkan gambar menjadi berbentuk lingkaran

Ya kurang lebih seperti gambar dibawah ini, keren bukan?

Redesign table view cell


 

Mendesign Prototype Cell di Storyboard

Mengganti cell ke custom style
Mengganti cell ke custom style

Keindahan itu adalah ketika prototype cell memperbolehkan developer untuk memodifikasi cell yang adai didalam table view controller. Untuk membuat custo cell, kita hanya perlu menambahkan UI control (seperti UILabel, UIImageView) ke prototype cell.

Pertama mari kita ganti style dari cell, kita tidak akan bisa memodifikasi cell ketika dalam kondisi Basic style. Pilih cell dan ganti style tersebut dari Basic menjadi Custom yang ada di bawah Attributes Inspector.

Nah untuk memperbesar thumbail, kita harus mengganti ketinggian dari cell. Untuk ituk kita harus mengganti kedua ukuran ketinggian dari table view dan protoype cell. Pilih table view dan ganti ketinggian baris menjadi 80.

Mengganti ketinggian garis dari table view
Mengganti ketinggian garis dari table view

Kemudian pilih prototype cell dan klik “Size” inspector. Cek custom checkbox dan ganti ketinggian baris menjadi 80.

Mengganti ketinggian baris dari prototype cell
Mengganti ketinggian baris dari prototype cell

Setelah mengatur ketinggian baris, pindahkan Image View dari Object library ke prototype cell. Kita bisa dengan bebas mengatur ukuran gambar sesuai yang kita inginkan. Saya rekomendasikan mengikuti ukuran seperti gambar dibawah, dengan memilik image view, lalu klik “Size” inspector dan ganti attribut “X”,”Y”,”Widht” dan “Height”.

Menambahkan Image view ke prototype cell
Menambahkan Image view ke prototype cell

Selanjutnya kita akan menambahkan tiga labels:

  • Name – untuk nama restaurant.
  • Location – untuk lokasi restaurant.
  • Type – untuk tipe restaurant.

Untuk menambahkan label, pindahkan object Label dari Object library ke cell. Beri nama cell pertama dengan “Name”. Di Size Inspector, isi “X” dengan 86, “Y” dengan 9, “Width” dengan 205 dan “Height” dengan 21.

Ok, selanjutnya kita mengganti tipe font dan juga ukurannya. Di Attributes inspectore, ganti font menjadi “Custom”, dan gunakan font “Avenir Next” (atau apupun yang Anda sukai) lalu ganti ukuran font menjadi 16.

Mengganti font
Mengganti font

Pindahkan label lainnya ke cel dan namakan dengan “Location”. Di Size inspector, isi “X” dengan 86, “Y” dengan 35, “Width” dengan 205 dan “Height” dengan 18. Ganti font dengan “Avenir Next” dan ganti ukuran font menjadi 13.

Terakhir adalah membuat label lain dan beri nama dengan “Type”. Di Size inspector, isi “X” dengan 86, “Y” dengan 54, “Width” dengan 205 dan “Height” dengan 21. . Ganti font dengan “Avenir Next” dan ganti ukuran font menjadi 11.


 

Membuat sebuah Class untuk Custom Cell

Sejauh ini kita telah mendesign table cell. Tetapi bagaimana kita bisa mengganti nilai label dari sebuah prototype cell? Dan nilainya harus dinamis.

Pertama kita harus membuat class baru untuk menghubungkannya dengan cell. Class ini merepresentasikan data model dari costum model. Seperti sebelumnya, klik kanan folder “FooPin” di Project Navigator dan pilih “New File…”.

Setelah memilihnya, Xcode akan memproses template yang telah kita pilih. Setelah kita membuat class baru untuk custom table view cell, pilih “Cocoa Touch Class” dan klik “Next”. Beri nama classnya dengan “CustomTableViewCell” dan pilihan “Subclass of” nya dengan UITableViewCell seperti gambar dibawah ini:

Membuat class baru untuk custom table view cell
Membuat class baru untuk custom table view cell

Klik “Next” dan save file tersebut di folder FoodPin project. Xcode harunya membuat sebuah file yang bernama CustomTableViewCell.swift di Project Navigator.

Selanjutnya deklarasikan outlet variabel di CustomTableViewCell seperti berikut:

Class CustomTableViewCell nantinya menyediakan data model dari custom cell. Di cell, kita telah punya 4 properties yang bisa berubah-ubah seperti : thumbnail image view, name label, location label dan type label. Data model lah yang nantinya menyediakan nilai tersebut untuk di tampilkan.

Setiap variabel telah terhubung dengan object tampilan yang cocok di Interface Builder. Dengan menghubungkan source code ngan object UI, kita bisa mengganti nilai dari object UI menjadi dinamis.

Kita akan menggunakan kembali @IBAction untuk mengidikasikan action method, @IBOutlet mengindikasikan outlet property.

Sebelum kita bisa membuat koneksi antara class CustomTableViewCell dengan prototype cell di Interface Builder, pertama kali kita harus memasang custom classnya.

Memasang custom class di prototype cell
Memasang custom class di prototype cell

Biasanya, prototype cell ini telah terhubung dengan default class UITableViewCell. Untuk menjadikan prototype cell sebagai custom class, pilih cell di storyboard. Dibawah Identity Inspector pasang custom class dengan CustomTableViewCell.


 

Menstabilkan Koneksi

Pembahasan selanjutnya adalah menstabilkan koneksi antara source code dengan object UI di prototype cell. Buka storyboard, Klik kanal cell di Document Outline dari Interface Builder. Klik dan tahan bulatan dari thumbnailImageView lalu pindahkan ke object UIImageView do prototype cell seperti gambar dibawha. Xcode akan otomatis menstabilkan koneksi yang dimaksud ketika kita melepas tombol.

Menghubungkan outlet dengan UIImageView
Menghubungkan outlet dengan UIImageView

Outlet dari cellUlangi prosedir diatas untuk outlet berikut:

  • locationLabel – menghubungkan Lokasi cell dengan cell
  • nameLabel – menghubungkan Nama label dengan cell
  • typeLabel – menghubungkan Tipe label dengan cell

Setelah kita membuat semua koneksi, seharusnya akan tampak seperti gambar di samping.


 

Ngoding Table View Controller

Kita telah menyelesaikan design dan coding untuk custom tabel cell nya. Akhirnya kita sampai ke tahap akhir.Nah di RestaurantTableViewController, kita masih menggunakan UITableViewCell untuk menampilkan konten, oleh karena itu kita harus memodfikasi code tersebut agar bisa digunakan oleh custom cell. Jika Anda melihat ke implementasi yang sudah ada dari method tableView(_:cellForRowAtIndexPath:). Pada code baris kedua akan terlihat seperti ini:

Kita telah membahas method dequeReusableCellWithIdentifier di postingan sebelumnya, tapi bagaimana dengan UITableViewCell? Apa maksudnya?

Nah method dequeReusableCellWithIdentifier cukup fleksibel untuk mengembalikan tipe apapun dari cell, berupa generic cell. Nah agar rencana kita tadi untuk dapat menggunakan custom cell, ganti code diatas menjadi berikut:

Mungkin Anda sudah tidak sabar untuk melakukan testing aplikasi, tapi sabar dulu karena kita harus merubah beberapa code agar tidak terjadi error. Code yang akan kita ganti adalah value dari nama dan gambar dari restaurant dari yang awalnya seperti ini:

Menjadi seperti ini:

Sekarang kita sudah bisa melakukan testing aplikasi, tekan tombol Run dan aplikasi harusnya terlihat seperti gambar dibawah ini:

FoodPin dengan custom table view cell

Nah, masih kurang keren? Mari kita coba memperbagusnya dengan mengganti thumnailnya berbentuk bulat.


 

Circular Image

Semenjak iOS 7 di release, trend design gambar kotak telah berakhir dan digantikan menjadi gambar lingkaran. Kita bisa menemukan icon lingkaran dari aplikasi bawaan seperti Contact dan Phone. Nah selanjutnya kita akan mempraktekkannya di aplikasi kita, dan ini tidak memerlukan photoshop untuk mengedit gambarnya, kita hanya perlu menambahkan beberapa code.

Mungkin Anda jarang mendengar class CALayer, dimana class ini merupakan class yang telah di bundle di framework UIKit (contohnya object layer). Dengan object layer ini kita bisa menggunakan class ini untuk memodifikasi gambar dan juga animasi.

Circular ImageBerikut daftar kemampuan dari object layer ini :

  • Background color
  • Border dan border width
  • Shadow color, width.
  • Opacity
  • Corner radius.

Nah corner radius adalah attribut yang akan kita gunakan untuk membuat gambar menjadi berbentuk lingkaran. Tambahkan code dibawah ini di method tableView(_:cellForRowAtIndexPath:) sebelum “return cell”.

Seperti yang telah disebutkan sebelumnya, itu adalah layer property untuk setiap object view dari gambar atau UIImageView.

Nah sekarang kita sudah bisa meng-compile dan menjalankan aplikasi . Harusnya semuga gambar restaurant akan menjadi berbentuk lingkaran.

Well mungkin cukup sekian pembahasan kali ini, contoh code dari pembahasan kali ini bisa di download disini: https://www.dropbox.com/s/wo0ys8d3fl1b89w/FoodPinCustomCell.zip

Semoga Informasinya bermanfaat Guys..!! See yaa 😉

 

Iklan

3 pemikiran pada “Memodifikasi Table View menggunakan Prototype Cell di iOS – FoodPin App

  1. mau tanya dong gan ..
    saya nyoba tapi error gan, mohon solusinya .

    “Thread 1: signal SIGABRT”

    “2016-09-14 17:44:33.374 FoodPin[2624:107855] *** Terminating app due to uncaught exception ‘NSInternalInconsistencyException’, reason: ‘-[UITableViewController loadView] instantiated view controller with identifier “UIViewController-BYZ-38-t0r” from storyboard “Main”, but didn’t get a UITableView.’
    *** First throw call stack:
    (
    0 CoreFoundation 0x0000000101bf8d85 __exceptionPreprocess + 165
    1 libobjc.A.dylib 0x000000010399cdeb objc_exception_throw + 48
    2 CoreFoundation 0x0000000101bf8cbd +[NSException raise:format:] + 205
    3 UIKit 0x000000010280e4e2 -[UITableViewController loadView] + 638
    4 UIKit 0x00000001025bb560 -[UIViewController loadViewIfRequired] + 138
    5 UIKit 0x00000001025bbcd3 -[UIViewController view] + 27
    6 UIKit 0x0000000102491fb4 -[UIWindow addRootViewControllerViewIfPossible] + 61
    7 UIKit 0x000000010249269d -[UIWindow _setHidden:forced:] + 282
    8 UIKit 0x00000001024a4180 -[UIWindow makeKeyAndVisible] + 42
    9 UIKit 0x0000000102418ed9 -[UIApplication _callInitializationDelegatesForMainScene:transitionContext:] + 4131
    10 UIKit 0x000000010241f568 -[UIApplication _runWithMainScene:transitionContext:completion:] + 1769
    11 UIKit 0x000000010241c714 -[UIApplication workspaceDidEndTransaction:] + 188
    12 FrontBoardServices 0x000000010582d8c8 __FBSSERIALQUEUE_IS_CALLING_OUT_TO_A_BLOCK__ + 24
    13 FrontBoardServices 0x000000010582d741 -[FBSSerialQueue _performNext] + 178
    14 FrontBoardServices 0x000000010582daca -[FBSSerialQueue _performNextFromRunLoopSource] + 45
    15 CoreFoundation 0x0000000101b1e301 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 17
    16 CoreFoundation 0x0000000101b1422c __CFRunLoopDoSources0 + 556
    17 CoreFoundation 0x0000000101b136e3 __CFRunLoopRun + 867
    18 CoreFoundation 0x0000000101b130f8 CFRunLoopRunSpecific + 488
    19 UIKit 0x000000010241bf21 -[UIApplication _run] + 402
    20 UIKit 0x0000000102420f09 UIApplicationMain + 171
    21 FoodPin 0x0000000101a132d2 main + 114
    22 libdyld.dylib 0x000000010446092d start + 1
    23 ??? 0x0000000000000001 0x0 + 1
    )
    libc++abi.dylib: terminating with uncaught exception of type NSException
    (lldb) ”

    Terima kasih gan …

    Suka

    1. Saya juga dapat error yang sama.
      Coba pergi ke storyboard, pilih TableViewController dan buka Attributes Inspector. Isi identifier menjadi Cell, lalu run ulang, Goodluck guys!

      Suka

  2. kemarin saya juga failed dan hanya menampilkan Thread 1 : signal SIGBRT tapi saya cari cari akhirnya muncul juga
    btw ini hanya untuk list nya saja ya gan, tanpa gambar

    //
    // ViewController.swift
    // Table
    //
    // Created by Admin on 2/5/17.
    // Copyright © 2017 verochnn. All rights reserved.
    //

    import UIKit

    class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {

    override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
    }
    var restaurantName = [“Cafe Deadend”, “Homei”, “Teakha”, “Cafe Loisl”, “Petite Oyster”, “For Kee Restaurant”, “Po’s Atelier”,
    “Bourke Street Bakery”, “Haigh’s Chocolate”, “Palomino Espresso”,
    “Upstate”, “Traif”, “Graham Avenue Meats And Deli”, “Waffle & Wolf”, “Five Leaves”, “Cafe Lore”, “Confessional”, “Barrafina”,
    “Donostia”, “Royal Oak”, “CASK Pub and Kitchen”]
    //Menghitung Index Array
    public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
    {
    return restaurantName.count
    }

    //Menampilkan Index Baris
    public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
    {
    let cell = UITableViewCell(style:UITableViewCellStyle.default , reuseIdentifier: “cell”)

    //Configure Cell
    cell.textLabel?.text = restaurantName[indexPath.row]
    return(cell)
    }

    }

    Suka

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s