Mempercantik Halaman Detail View dan Meng-custom Navigation Bar – FoodPin App

Di tutorial sebelumnya kita telah membuat aplikasi  yang ketika user memilih salah satu restaurant, maka aplikasi akan mengarahkan user ke halaman detai view untuk menampilkan gambar dari restaurant. Nah di tutorial kali ini kita akan melakukan improvisasi pada halaman detail ini, jadi kita tidak hanya menampilkan gambar, tapi juga keterangan lainnya terkait restaurant yang dipilih. So check this out ..

Mempercantik Halaman Detail View Cover

Berikut area yang akan kita fokuskan pada tutorial kali ini:

  • Improvisasi pada halaman detail view dari aplikasi FoodPin, seperti menampilkan informasi yang bermanfaat lainnya terkait restaurant.
  • Memperbaiki tampilan dari navigation bar.

Ok mari kita bahas tentang halaman view pertama kali.

Yang kita lakukan nantinnya adalah menampilkan beberapa informasi seperti nama, tipe, dan lokasi dari restaurant di halaman detail view. Gambar restaurant akan dipindahkan dan di tempatkan di atas dari view table.

Buka Main.storyboard, pilih Table View dari Object Library dan pindahkan ke Detail View Controller. Di Size Inspector, di bawah View section, isi ukurannya dengna lebar 320 dan tinggi 568. Harusnya layarnya nanti terlihat seperti gambar dibawah ini.

Menambahkan table view ke detail view controller
Menambahkan table view ke detail view controller

Pilih table view dan isi prototype cell menjadi 1 dai Attributes Inspector. Selanjutnya kita akan tambahkan image view sebagai tampilan atas dari tabel. Di Document Outline dari Interface Builder, pindahkan image view ke table view dan tempatkan di sebalah kanan diatas table view cell. Setelah selesai, harusnya storyboard kita terlihat seperti gambar dibawah ini.

Menyimpan Image View di table view
Menyimpan Image View di table view

Pilih table view cell dan isi identifiernya dengan “Cell” di Attribuate Inspector. Juga isi ukurang barisnya dengan ketinggian 36 point.


 

Image View Scaling

Sebelum memulai pengembangan halaman detail view, mari kita membahas sedikit tentang scalling mode di UIImageView. Jika kita memilih image view, kita akan menemukan pilihan mode di Attributes Inspector. Secara default, image image berjalan dalam mode Scale to Fill. UIImageView merupakan subclass dari object UIView, yang bertanggung jawab bagaimana konten ditampilkan dalam view. Nah disini ada 3 mode scalling yang harus diketahui, yaitu:

  • Scale to Fill (default)
  • Aspect Fit
  • Aspect Fill

Secara default, object UIImageView di set pada model Scale to Fill, dimana mode ini mengatur gambar agar pas dengan ukuran halaman. Contohnya saja ketika kita menjalankan aplikasi dan memilih salah satu restaurant dan diarahkan ke halaman detail yang menampilkan gambar dari restaurant, nah gambar yang ada di detail view tersebut sebenarnya ukuran gambar itu tidak sama dengan ukuran gambar sebenarnya.

Jika kita menggantinya kedalam mode Aspect Fit, perbandingan ukuran dari gambar akan disesuaikan dengan halaman sehingga terlihat lebih besar pada halaman detail.

Aspect Fill adalah mode terbaik yang digunakan untuk aplikasi FoodPin, karena dengan mode ini gambar akan di atur sesuai dengan ukuran halaman. Seperti yang terlihat pada gambar dibawah ini.

Image View dalam Mode Scaling
Image View dalam Mode Scaling

 

Memodifikasi Prototype Cell

Jika kita telah mengikuti tutorial ini dari awal, seharusnya kita masih ingat bagaimana memodifikasi prototype cell. Karena kita akan menambahkan dua label pada cell. Label pertama digunakan untuk menampilkan kolom nama dan label kedua berisikan kolom value/nilainya.

Jadi, pindahkan Label dari Object Library dan letakkan di prototype cell. Beri nama label dengan “Field” dan ganti dengna font yang Anda sukai. Nah disini saya menggunakan font “Avenir Next Medium” dengan ukuran 14. Pindah Label lainnya ke cell dan beri nama dengan “Value”, seperti gambar dibawah ini.

Mengcustom prototype cell
Mengcustom prototype cell

Untuk menggunakan prototype cell, kita membutuhkan sebuah class baru. Klik kanan folder project FoodPin di navigation project dan klik “New File..”. Pilih template “Cocoa Touch Class” dan next. Beri nama class tersebut dengan DetaiTableViewCell dan isi subclassnya dengan UITableViewCell. Klik next lalu simpan file.

Membuat class baru untuk prototype cell
Membuat class baru untuk prototype cell

Pilih file DetailTableViewCell.swift yang telah kita buat tadi. Tambahkan dua variabel outlet untuk label field dan value tadi:

@IBOutlet weak var fieldLabel:UILabel!
@IBOutlet weak var valueLabel:UILabel!

Lalu kembali lagi ke Interface Builder dan pilih prototype cell, di Identity Inspector jadikan custom class nya jadi DetailTableViewCell.

Sekarang kita telah membuat koneksi antara variabel outlet dengan object label di storyboard. Klik kanan Cell di Document Outline untuk menampilkan menu context. Hubungkan fieldLabel dengan object label Field dan valueLabel dengan object label Value, seperti gambar dibawah.

Menghubungkan outlets
Menghubungkan outlets

 

Memperbarui Class DetailViewController

DetailViewController adalah subclass dari UIViewController, seperti yang telah kita lakukan di tutorial sebelumnya, dimana kita telah berhasil menghubung protocol UITableViewDataSource dengan UITableViewDelegate untuk menampilkan konten di table view.

Pada file DetailViewController.swift, perbarui deklarasi class untuk menghubungkannya dengan protocols:

class DetailViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

Sebelumnya, kita telah mendeklarasikan variabel restaurantImage untuk mengirimkan gambar dari restaurant yang telah dipilih. Nah seperti fitur yang ingin kita tambahkan yaitu menampilkan informasi lainnya seperti tipe dan lokasi. Cara terbaik mengimplementasikannya yaitu dengan cara menimpanya dengan object Restaurant.

var restaurant:Restaurant!

Selanjutnya, perbarui code yang ada di method viewDidLoad dengan code berikut:

self.restaurantImageView.image = UIImage(named: restaurant.image)

Terakhir, kita perbarui informasi restaurat dengan menambahkan method untuk protocol UITableViewDataSource:

Code diatas menjelaskan bahwa aplikasi nantinya akan menampilkan 4 baris informasi dari restaurant seperti nama, tipe, lokasi, dan “telah mengunjungi/been here”.

Selain penggunaan if¸ kita bisa menggunakan switch untuk mengontrol alur programm untun mengeksekusi kondisi code yang berbeda. Nah code untuk DetailViewController telah siap, tapi kita belum menghubungkannya dengan table view di storyboard.

Kembali ke Interface Builder, di Document Outline, klik kanan object Table View dan hubungkan outlet dataSource dengan Detail View Controller. Ulangi prosedur yang sama untuk menghubungkan outlet delegate.

Menghubungkan Data Source dengan Delegate outlets
Menghubungkan Data Source dengan Delegate outlets

 

Mengupdate Class RestaurantTableViewController

Nah kalau udah sampai tahap ini aplikasi kita hampir selesai nih, yang perlu kita lakukan adalah meng-update code yang di tandai dengan warna orange dibawah yang ada di method preparaForSegue dari class RestaurantTableViewController:

Update class RestaurantTableViewController

Setelah sebelumnya kita berhasil mengirimkan nama gambar, sekarang kita juga telah berhasil mengirimkan object dari restaurant yang dipilih ke detail view controller.


 

Testing

Halaman Detail View setelah di percantikCoba compile dan jalankan aplikasi, nah terlihat lebih bagus kan? Nah selanjutnya yang akan kita lakukan yaitu Memodifikasi tampilan dari Table View menjadi lebih ciamik lagi.

Table view sebenarnya sudah terlihat bagus, tapi ada beberapa point yang akan membuatnya menjadi lebih bagus lagi, yaitu:

  • Mengganti warna background dari table view
  • Menghapus garis pemisah yang berlebih
  • Mengganti warna garis pemisah

Sebelum kita memodifikasinya, tambahkan variabel outlet pada class DetaiViewController, sehingga kita bisa menstabilkan koneksinya dengan object table view di storyboard, melalui code dibawah ini.

@IBOutlet var tableView:UITableView!

Kembali ke Interface Builder, klik kanan Table View dan pindahkan icon + dari New Reference Outlet ke Detail View Controller, lalu pilih tableView ketika sudah selesai.

Untuk mengganti warna background dari table view, pasang object UIColor yang baru menggunakan property backgroundColor, tambahkan code dibawah ini pada method viewDidLoad .

self.tableView.backgroundColor = UIColor(red: 240.0/255.0, green: 240.0/255.0, blue: 240.0/255.0, alpha: 0.2)

Hal ini akan mengganti warna latar background menjadi abu-abu terang, kita juga bisa menggantinya dengan warna yang disukai. Jika kita coba menjalankan aplikasi, warna background dari table view harusnya ikut berubah. Dan tambahkan code dibawah ini pada method tableView(_:cellForRowAtIndexPath:):

cell.backgroundColor = UIColor.clearColor()

Ini akan membuat cell menjadi transparant jadi warna background dari table view bisa kelihatan.

Langkah kedua yang akan kita lakukan adalah menghapus garis pemisah tambahan. Dengan cara menyetting bagian bawah dari table view menjadi kosong. Tambahkan code dibawah ini ke method viewDidLoad:

self.tableView.tableFooterView = UIView(frame:CGRectZero)

Terkahir, kita ingin mengganti warna dari garis dengan cara menambahkan code dibawah ini pada method viewDidLoad:

self.tableView.separatorColor = UIColor(red: 240.0/255.0, green: 240.0/255.0, blue: 240.0/255.0, alpha: 0.8)

Nah sekarnag aplikasi telah siap untuk dilakukan testing. Kita nantinya akan bisa melihat perubah yang terjadi pada warna background dan garis pemisah cellnya seperti gambar disamping.


 

Memodifikasi tampilan dari Navigation Bar

Nah sebelumnya kita telah berhasil memodfikasi tampilan dari table view, selanjutnya yang akan kita lakukan adalah memodifikasi tampilan navigation bar. Berikut list kegiatan yang akan kita lakukan pada pembahasan ini:

  • Mengganti warna background dari navigation bar
  • Mengganto font dari judul navigation bar
  • Memodifikasi warna dari tombol back
  • Mengganti judul dari tombol back

Semenjak iOS 5 direlease, Apple memperkenalkan API Appearance. UIAppearance ini memperbolehkan developer untuk memodifikasi tampilan menjadi lebih mudah seperti yang ad di UIKit control termasuk navigation bar. Untuk memodifikasi tampilan dair navigationn bar, kita harus menggunakan method appearance() untuk mendapatkan appearance proxy dari class UINavigationBar.appearance().

Untuk memodifikasi warna background dari navigation bar, pasang property barTintColor menjadi warna yang diinginkan:

self.tableView.separatorColor = UIColor(red:240.0/255.0, green: 240.0/255.0, blue: 240.0/255.0, alpha: 0.8)

Judulnya juga bisa ganti dengan merubah property titleTextAttributes :

if let barFont = UIFont(name: "AvenirNextCondensed-DemiBold", size: 22.0) {
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName:UIColor.whiteColor(), NSFontAttributeName:barFont]
}

Kita juga bisa memodifikasi font, warna teks, warna bayangan teks, dan warna bayangan untuk judul menggunakan text attributes dictionary. Pada code diatas, kita akan menggunakan AvenirNextCondensed-DemiBold sebagai fontnya dan mamasang warna putih sebagai warnanya.

Dimana bisa menemukan kumpulan font iOS?

Nah berikut saya bagikan website yang menyediakan kumpulan font iOS yang bisa digunakan untuk memodifikasi font pada aplikasi, yaitu http://iosfonts.com.

Property tintColor mengontrol warna dari item navigation dan tombol bar. Kita menggunakannya untuk mengganti warna dari tombol back.

UINavigationBar.appearance().tintColor = UIColor.whiteColor()

AppDelegate salah satu jenis dari entry point dari aplikasi. Class ini dibuat oleh Xcode ketika kiga membuat project menggunakan project template. Biasanya kita meletakkan code modifikasi ini pada AppDelegate.

Tambahkan code dibawah ini pada method application(_didFinishLaunchingWithOption:):

Nah sekarang kita bisa menjalankan aplikasi dan akan terlihat seperti yang kita inginkan, dengan API Appearance membuat modifikasi navigation bar menjadi lebih mudah.

Sejauh ini kita belum mengganti judul dari tombol back, karena judul yang ditampilkan masih dalam teks “FoodPin”. Bagaimana jika kita ingin menghapus judul dari tombol back dan hanya meninggalkan tombol panah?

Defaultnya, judul dari tombol back telah ada pada judul dari source controller yang ada di segue.

Tombol back dengan judul

Untuk menghapus judul, kita hanya perlu menambahkan code dibawah in pada method viewDidLoad yang ada di source view controller. Dalam project kita ada di RestaurantTableViewController.

Mari kita tambahkan modifikasi lainnya, sebelumnya kita telah berhasil menghapus judul dari tombol back. Bagaimana jikga kita ingin menampilkan nama restaurant yang ada di navigation bar nya?

Itu sangat mudah dilakukan, kita hanya perlu memasang judul dari detail view kedalam nama dari restaurant. Tambahkan code di bawah ini pada method viewDidLoad dari DetailViewController:

title = self.restaurant.name

Jika kita coba menge-test aplikasi kembali, navigation bar akan terlihat seperti gambar dibawah ini.

Tombol back tanpa judul


 

Menyembunyikan Navigation Bar ketika melakukan Swipe

Di iOS 8, Apple memperkenalkan fitur keren yang memperbolehkan kita untuk menyembunyikan navigation bar ketika swipe atau tap. Fitur ini sebearnya tidak baru bagi kita, contohnya saat kita scroll sebuah web menggunakan Safari, alaman yang ada di bar akan otomatis tersembunyi, nah itulah gambar dari pekerjaan yang akan kita lakukan selanjutnya pada aplikasi kita.

facebook-navbar-autohideSebelumnya fitur ini tidak di perkenankan oleh iOS 8, jadi kita harus mencari solusi sendiri jika kita ingin menyembunyikan navigation bar ketika men-swipe. Tapi sekarang Apple telah membuka fitur ini untuk semua developer. Kita hanya perlu mengklik atau menambahkan beberapa code untuk menggunakan fitur ini.

Di Storyboard, pilih navigation controller di Navigation Controller Scene. Pada Attribute Inspector, terdapat piliha yang bernama “On Swipe” dibawah navigation controller. Ketika di gunakan, aplikasi kita akan menyembunyikan navigatio bar, seperti toolbar ketikan user men-scroll kebawah. Navitaion bar akan muncul kembali ketika user men-scrollnya ke atas.

Perubahan ini di aplikasikan untuk semua navigaiton bar yang ada di aplikasi. Untuk aplikasi FoodPin, kedua table view restaurant dan detail view controller secara otomatis juga mengimplementasikan fitur ini. Bagaimana jika kita ingin menggunakan fitur ini pada restaurant table view controller?

Nah karena restaurant table view controller adalah object buatan sendiri maka kita harus menggunakan beberapa code untuk mengimplementasikannya.

Jika kita sebelumnya menggunakan pilih On Swipe di storyboard, coba disable fitur tersebut sebelum memulai penambahan code.

Ketika kita ingin menyembunyikan bar ketika di swipe, kita harus memasang kondisi property hideBarOnSwipe menjadi true:

navigationController?.hidesBarsOnSwipe = true

Masalahnya dimana kita menempatkan settingan ini di code kita. Mungkin dengan meletakkannya di method viewDidLoad dari kedua class RestaurantTableViewController dan DetailViewController . Di method viewDidLoad dari RestaurantTableViewController, kita tidak akan memasang property hidesBarsOnSwipe menjadi true, atau kita memasang property menjadi false di DetailViewController. Tapi solusi ini tidak bekerja, berikut gambaran dari masalah tersebut.

Dua masalah ketika memasang property hidesBarsOnSwipe

Masalah Pertama, kita harus tau method viewDidLoad hanya akan di panggul ketika view pertama kali di digunakan. Setelah itu, itu tidak akan dipanggil lagi. Dengan kata lain, jika kita berpindah ke detail view, property hidesBarsOnSwipe di pasang dalam kondisi false. Dan valuenya akan tetap utuh walaupun kita berpindah kembali ke table view controller. Ini alahasan kenapa navigation bar tidak mau sembunyi.

Masakah Kedua, navigation bar yang tersembunyi bisa mengganggu detail view. Ketika kita mengatur untuk memasangkan property hidesBarsOnSwipe menjadi false di method viewDidLoad, itu tidak akan menampilkan navigation bar. Jadi kita harus memberlitah aplikasi untuk menampilkan navigation bar kembali.

UIViewController bertanggun jawab untuk beberapa method alam merespon view event. Tidak seperti method viewDidLoad, method ini dipanggil tiap waktu ketika view telah di tampilkan atau dihapus. Ketika view di tampilkan, kedua method viewWillAppear dan viewDidAppear dilibatkan. Method viewWillAppeard dipanggilkan ketika view akan ditampilkan, dan method viewDidAppear dipanggil ketika view telah ditampilkan dilayar. Sehingga method yang cocok untuk masalah kita adalah viewWillAppear, jadi tambahkan code berikut pada file RestauranTableViewController.swift:

override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)
self.navigationController?.hidesBarsOnSwipe = true
}

Tambahkan juga code berikut untuk DetailViewController.swift:

override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)
self.navigationController?.hidesBarsOnSwipe = false
self.navigationController?.setNavigationBarHidden(false, animated: true)
}

Ketika method viewWillAppear dipanggil setiap view di tampilkan, kita bisa menempatkan hidesBarsOnSwipe secara tepat. Code tambahan yang kita tambahkan pada DetailViewController memberitahu aplikasi untuk menampilkan kemabli navigation bar. Hal ini membuat masalah kedua terpecahkan. Nah sekarang kita sudah bisa meng-compile dan menjalankan aplikasi untuk melakukan testing, dan aplikasi sudah berjalan seperti yang kita inginkan.


 

Mengganti Style daru Status Bar

Warna Status bar tidak serasi dengan warna teks dari navigation bar. Bagaimana jika kita ingin menggantinya menjadi warna putih agar terlihat serasi? Nah itulah yang akan kita bahas selanjutnya.

Gaya status bar bawaan

Di versilan dari iOS, status bar selalui bewarna hitam dan kita tidak bisa menggantinya. Semenjak iOS 7 direlease, kita sudah bisa mengganti tampilan dari status bar per view controller. Kita bisa menggunakan UIStatusBarStyle secara spesifik tergantung dari tampilan view controller kita. Secara default warnya tetap hitam, seperti jam, baterai, signal Wi-fi di tampilkan dalam warna hitam seperti halnya gambar diatas.

Nah tentu untuk membuatnya lebih ciamik kita menggantinya menjadi warna putih. Ada dua cara untuk melakukannya, pertama iOS memperbolehkan developer untuk mengontrol style dari status bar di view controller manapun dengan menimpa method preferredStatusBarStyle menggunakan code dibawah ini:

override func preferredStatusBarStyle() -> UIStatusBarStyle {
return .LightContent
}

Alternative lain, kita bisa memasang status bar menggunakan method statusBarStyle dari UIApplication. Ini memperbolehkan kita untuk mengganti style dari status bar untuk aplikasi. Pertama yang harus kita lakukan adalah memilih tampilan status bar enjadi “View controller-based status bar appearance”. Pilih project FooPin, di Project Navitaor, dibawah Info tab ke project target, tambahkan kata kunci dengna nama “View controller-based status bar appearance” dan pasang nilainya menjadi NO seperti yang terlihat pada gambar dibawah ini.

Menambahkan kunci untuk menutup tampilan statur bar
Menambahkan kunci untuk menutup tampilan statur bar

Dengan men-disable “View controller-based status bar appearance”, kita bisa memasang style status bar menggunakan code berikut:

UIApplication.sharedApplication().statusBarStyle = .LightContent

Normanya code diatas kita taruh di method application(_:didFinishLaunchingWithOptions:) dari AppDelegate.

Jika kita mengaplikasikan salah satu cara diatas, status bar akan terupdate menjadi light style seperti gambar dibawah ini.

Status bar dengan light style

Well cukup sekian pembahasan kali ini, kita lanjutkan di postingan lainnya untuk pembahasan selanjutnya. Oya untuk contoh source code bisa di download disini: https://www.dropbox.com/s/xiyo4t0zhk8au9o/FoodPinDetailView.zip

Semoga bermanfaat ya Guys, See ya .. 😉

Iklan

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