(Tutorial iOS) Tab Menu with Tab Bar Controller

Membuat menu Tab pada apps iOS kita dapat menggunakan Tab Bar Controller. Beberapa view controller dapat direlasikan ke Tab Bar Controller. Beberapa contoh apps yang menggunakan menu tab.

Berbeda dengan Android, posisi Tab di iOS berada di bagian bawah layar.

Pada postingan kali ini saya akan membahas bagaimana membuat Tab dengan Tab Bar Controller.

Buat project baru di Xcode, kemudian buka Main.storyboard. Desain storyboard nantinya akan seperti ini.

Pada storyboard terdiri dari Tab Bar Controller dan 4 buah View Controller yang memiliki relasi dengan Tab Bar Controller.

Drag & drop Tab Bar Controller, lalu letakkan di storyboard.

Lalu tambahkan 4 View Controller di storyboard. Control drag dari Tab Bar Controller lalu pilih Relationship Segue untuk merelasikan.

Pada View Controller pertama, kita jadikan sebagai Home.

Untuk menambahkan icon & mengedit title dapat diatur di Attributes Inspector.

Lakukan hal yang sama pada 3 buah View Controller lainnya.

Setelah selesai, coba build dan jalankan maka hasilnya seperti berikut :

Custom Tab Bar

Kita dapat meng-custom tab seperti warna background tab dan tint icon. Buka file AppDelegate dan tambahkan kode berikut di dalam method application:

AppDelegate.swift

….

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        // Override point for customization after application launch.
    
        UITabBar.appearance().tintColor = UIColor(red: 244/255, green: 67/255, blue:54/255, alpha: 1.0)
        UITabBar.appearance().barTintColor = UIColor.blackColor()
        return true
    }

….

Build dan jalankan lagi maka hasilnya seperti berikut :

Source code dapat dilihat di https://github.com/wimsonevel/TabBar-iOS

Sekian tutorial kali ini, semoga bermanfaat.
Terima Kasih !

Happy Coding :)

More Reference : https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/UITabBar.html

Share this :