Mengubah warna icon dan title UITabBarItem

swift

Tidak semua hal dapat disetting dari storyboard. Salah satunya adalah warna icon dan title nya UITabBarItem. Secara default warna icon dan title mengikuti template. Namun sering kali apa yang diberikan oleh template bukan lah yang kita inginkan.

Sebelumnya yang harus diketahui adalah UITabBarItem punya dua state (keadaan):

  • Selected

Yaitu ketika user memilih tab

  • Unselected

Yaitu ketika tab tidak dipilih

Subclass UITabBarController

Marilah kita mulai dengan membuat TabBarController baru yang diturunkan dari UITabBarController bawaan Cocoa.

1
class MyCustomTabBarController: UITabBarController

Override fungsi viewWillAppear

1
override func viewWillAppear()

viewWillAppear adalah fungsi yang dipanggil ketika sebuah view controller sudah dimuat ke dalam memory ( setelah viewDidLoad )

Kenapa bukan di viewDidLoad ?

Karena di Swift 3 dan Xcode 8 ( yang sedang dipakai saat post ini ditulis ) setelah saya coba di viewDidLoad tabBarItem nya tidak berubah. Tapi di Swift 2 dan Xcode 7, kode ini berjalan di viewDidLoad

Icon

Menyetel warna icon ketika selected

Membuat icon menjadi apa adanya tidak menggunakan template saat dipilih.

1
item.selectedImage  = item.selectedImage?.withRenderingMode(.alwaysOriginal)

Menyetel warna icon ketika unselected

Membuat icon menjadi apa adanya tidak menggunakan template saat tidak dipilih.

1
item.image  = item.image?.withRenderingMode(.alwaysOriginal)

Title

Menyetel warna title ketika selected

Membuat agar warna title menjadi putih saat dipilih

1
item.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.white ], for: .selected)

Menyetel warna title ketika unselected

Membuat agar warna title menjadi merah saat tidak dipilih.

1
item.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.red ], for: .normal)

Seluruhnya

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    // Loop untuk semua item di tab
    for item in self.tabBar.items!  {

        // Tab Icon
        item.selectedImage  = item.selectedImage?.withRenderingMode(.alwaysOriginal)
        item.image          = item.image?.withRenderingMode(.alwaysOriginal)

        // Tab Title
        item.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.white ], for: .selected)
        item.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.red], for: .normal)

    }
}

Terakhir

Buka storyboard tempat UITabBarController yang lama berada dan ganti class dari UITabBarController menjadi MyCustomTabBarController pada tab identity.

Demikian

Terima kasih! Semoga berguna! Sampai Jumpa!