Membuat Tab Bar di iOS – FoodPin Apps

Hai All, di postingan kali ini kita akan membahas tentang apa itu Tab Bar, lalu bagaimana mengimplementasikan Tab Bar pada aplikasi iOS. Selain itu, juga akan tentang Web View di iOS dan sedikit mendesign tab bar menjadi lebih keren pastinya, so check this out ..

Tab Bar Cover

Pengenalan Tab Bar Controller dan WebView

Tab View iOSTab bar merupakan fitur popular yang digunakan untuk banyak aplikasi, jika Anda tidak begitu familiar dengan yang namanya tabar, coba lihat contoh pada gambar dibawah ini yang menampilkan tab pada 3 aplikasi populer. Ketika navigation controller memperbolehkan user untuk berpindah dari satu halaman ke halaman lain yang terhubung dengan hirarki menggunakan view controller, nah sedangkan tab bar controller mengatur banyak halaman view controller yang tidak memiliki relasi satu dengan yang lainnya. Pada postingan kali ini kita akan membahas tentang tab bar yang ada di iOS secara mendetail.

Contoh Tab Bar
Contoh Tab Bar

 

Membuat Tab Bar Controller

Tab bar controller yang akan dibuat
Tab bar controller yang akan dibuat

Oke, mari kita buka project FoodPin sebelumnya, sekarang kita akan membuat tampilan dari tab bar. Tab bar yang akan kita buat memiliki tiga tab, antara lain:

  • Favorites – Yang berisikan daftar restaurant favorit
  • Feed – Halaman yang menampilkan restaurant favorit yang disimpan oleh user yang di posting oleh orang lain. Tapi kita belum membahasnya di postingan kali ini.
  • About – Halaman detail keterangan dari aplikasi. Halaman ini berisikan dua tombol “Contact Us” dan “Visit out Website”. Tetapi kita biarkan halaman ini kosong terlebih dahulu, di postingan selanjutnya akan kita lanjutkan.

Kurang lebih nantinya tampilan tiga tab bar ini pada aplikasi akan terlihat seperti gambar diatas.

Buka Main.storyboard dan pilih Navigation Controller. Pada menu Xcode, pilih Editor>Embed>Tab Bar Controller.

Menanamkan Navigation Controller di Tab Bar Controller
Menanamkan Navigation Controller di Tab Bar Controller

Xcode akan otomatis menambahkan navigation controller didalam tab bar controller. Mudah kan?, kita kemudian bisa meng-klik tab item di navigation dan mengganti propertiesnya di Attributes Inspector. Lalu ganti System Item nya menjadi Favorites. Item tab bar seharusnya terlihat seperti gambar dibawah ini.

Mengatur tab bar
Mengatur tab bar

Menanamkan Navigation Controller di Tab Bar Controller

Menambahkan sebuah tambar di aplikasi FoodPin
Menambahkan sebuah tambar di aplikasi FoodPin

 

Menghilangkan Tab Bar ketika pindah halaman

Jika kita memilih salah satu restaurant, aplikasi akan berpindah ke halaman detail view. Nah setelah sebelumnya kita menambahkan tab bar, maka tab bar tersebut juga akan ikut tampilan pada halaman detail view. Untuk itu kita perlu menghilangkan tab bar di detail view atau halaman view lainnya. iOS bertanggung jawab untuk menghilangkan tab bar ini ketika view controller berpindah ke navigation controller.

Contohnya, untuk menghilangkah tab bar di halama detail view, kita bisa memilih detail view controller di storyboard dan mengaktifkan pilihan “Hide Bottom Bar on Push” di Attribute Inspector. Tab bar akan menghilang ketika fitur tersebut di aktifkan seperti gambar dibawah ini.

Mengaktifkan fitur Hide Bottom Bar di menu pilihan
Mengaktifkan fitur Hide Bottom Bar di menu pilihan

Alternatif lain jika kita ingin memprgoramkannya, kita bisa menambahkan code dibawah ini pada method prepareForSegue dari class RestaurantTableViewController:

destinationController.hideBottomBarWhenPushed = true

Coba jalankan aplikasi sekali lagi untuk melakukan testing apakah aplikasi sudah berjalan seperti yang diinginkan.


 

Menambahkan Tab Baru

Nah sekarang kita telah berhasil membuat sebuah tab, selanjutnya yang akan kita lakukan adalah menambahkan dua tab lainnya untuk membuat aplikasi terlihat lebih ciamik.

Pindahkan object “Navigation Controller” kedalam storyboard. Biasanya navigation controoler telah terhubung dengan table view controller. Ganti judul dari bar navigation controller menjadi Feed. Tab bar ini berfungsi untuk mengambil restaurant favorit yang di share oleh teman pada aplikasi.

Navigation Controller dan table view controller untuk Feed
Navigation Controller dan table view controller untuk Feed

Selanjutnya kita buat koneksi antara navigation controller yang baru dengan tab bar controller yang sudah ada. Tekan dan tahan tombol control, klik tab bar controller dan pindahkan pointer ke navigation controller yang baru.

Lepaskan kedua tombol maka akan muncul pop-up, lalu pilih pilihan “Relationship Segue – ViewControllers”. Ini memberitahu Xcode bawah Navigation Controller yang baru merupakan bagian dari Tab Bar Controller.

Menghubungkan tab bar controller dengan navigation controller yang baru
Menghubungkan tab bar controller dengan navigation controller yang baru

Setelah koneksi dibuat, Tab Bar Controller akan secara otomatis menambahkan tab baru dan menghubungkannya dengan Navigation Controller yang baru. Ganti item tab bar dari new navigation controller menjadi “Recent”. Simpan Storyboard dan jalan aplikasi, seharusnya tab “Recent” sudah kelihatan.

Selanjutnya , pindahkan View Controller dari Object Library ke dalam storyboard. Pada menu Xcode pilih Editor > Embed In > Navigation Controller untuk menanamkan view controller dengan navigation controller. Sekali lagi tekan dan tahan tombol control, lalu klik tab bar controller dan pindah kan pointer ke navigation controle yang baru. Lepaskan keduanya maka akan muncul sebuah pop-up. Pilih “Relationship Segue – View Controller”. Seharusnya ini telah menambahkan tab bar controller yang baru lainnya. Ganti item tab bar dari new navigation controller menjadi “More”. Buat koneksi hampir sama dengan sebelumnya untuk dua view controller ini seperti yang terlihat pada gambar dibawah ini.

Menambahkan tab sebelumnya
Menambahkan tab sebelumnya

Sekarang kita sudah siap untuk menjalankan aplikasi dan melakukan testing. Aplikasi FoodPin seharunsya sudah menampilkan tiga tab bar yaitu Favorites, Recent dan More seperti yang terlihat pada gambar dibawah ini. Kita juga sudah bisa menekan tab ini tapi hanya akan menampilkan halaman kosong karena kita belum menambahkan apa-apa pada halamannya.

Tab bar dengan tiga tab
Tab bar dengan tiga tab

 

Memodifikasi Tampilan Tab Bar

Sampai disini, kita telah menggunakan UI standar dari tab bar. Sama seperti navigation bar, kita juga bisa melakukan modifikasi tampilan tab bar menggunakan Appearance API. Berikut pilihannya :

  • tintColor – Property yang memperbolehkan kita untuk mengganti warna dari tab bar.
    UITabBar.appearance().tintColor = UIColor(red: 235.0/255.0, green: 75.0/255.0, blue:27.0/255.0, alpha: 1.0)
  • barTintColor – Property yang memperbolehkan kita untuk mengganti warna dari background tab bar. Disini kita akan mengganti warna backgroundnya menjadi hitam.
    UITabBar.appearance().barTintColor = UIColor.blackColor()

Sama seperti sebelumnya, kita bisa memasukkan code diatas pada AppDelegate, maka akan terlihat seperti gambar dibawah ini.

Contoh tab bar setelah di modifikasi
Contoh tab bar setelah di modifikasi

 

Mengganti Gambar Tab Bar

Karena kita menggunakan gambar bawaan dari sistem, kita juga bisa menggantinya menggunakan gambar sendiri untuk tab bar ini. Kita bisa mendownload kumpulan icon tab bar di website ini www.pixellove.com dan memasukkannya kedalam images.xcassets.

Untuk mengganti gambar tab bar, pilih item di storyboard. Di Attribute Inspector ganti pilihan item system menjadi Custom dan ganti Title/Image menjadi yang kita inginkan. Seperti gambar dibawah ini.

Mengganti gambar dan judul dari tab bar
Mengganti gambar dan judul dari tab bar

 

Mengganti Indikator pada Gambar yang dipilih

Ketika kita memlih salah satu tab bar, kita bisa memodifikasi indicator gambar dari icon gambar tersebet. Kita hanya perlu memasang property selectionIndicatorImage pada gambar tersebut.

UITabBar.appearance().selectionIndicatorImage = UIImage(named: "tabitem_selected")

Kita bisa membuat gambar background sederhana dan menggunakan code diatas, sehingga akan terlihat seperti gambar dibawah ini.

Contoh indikator pada gambar yang dipilih
Contoh indikator pada gambar yang dipilih

Well mungkin cukup sekian pembahasan kali ini, oya untuk contoh code di pembahasan kali ini bisa didownload disini: https://www.dropbox.com/s/gzhgzzqu7qk0z86/FoodPinTabbar.zip?dl=0.

Semoga bermanfaat ya Guys, See Yaa .. 😉

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