Background Color Untuk UITabBar

swift

Ceritanya ingin memberikan warna background pas tabnya di select. Namun sayangnya tidak ada property yang bernama selection background tint yang bisa diset di storyboard ataupun di code. Yang ada malah property selection indicator image.

Lalu…

Apa yang bisa dilakukan ?

Memasang gambar polos sebagai background.

![](/images/tab selected bg color.png)

Karena yang ada property selection indicator image, jadi apa boleh buat.
Berikut hasil dari Tab Bar yang diberikan selection indicator image:

![](/images/bg color image too big.png)

Gawat! Gambarnya terlalu besar!

Memasang gambar polos dengan ukuran fix

Seperti yang sudah dilihat dengan memberikan selection indicator image. gambar nya ternyata tidak di _resize_secara internal agar sesuai dengan ukuran tab bar nya. :(

Dengan kata lain, gambarnya harus sudah fix size nya.

Oke. Kalau begitu kita tinggal resize gambarnya saja. Mudah. Tapi berapa size nya??

Good Question

Subclass UITabBarControllernya dan pada viewDidLoad() kita masukkan kode berikut:

1
2
3
4
5
6
7
8
9
10
11
12
class BgColoredTabBarController: UITabBarController {
		override func viewDidLoad() {
				super.viewDidLoad()


				let width  = tabBar.frame.width / 4
				let height = tabBar.frame.height

				print("\(width)x\(height)")

		}
}

Set custom class di storyboard dengan class yang baru dibuat. Lalu CMD+R.

Dapet! dan berikut outputnya:
103.5x49.0 (Menggunakan Simulator iPhone 7s)

Dari informasi tersebut, kita resize gambar yang tadi digunakan sebagai selection indicator image. Kemudian mengganti property selection indicator image yang lama dengan yang sudah diresize ini.
CMD+R dan hasilnya:

![](/images/work with fixed size img.png)

Yeah! berhasil juga.

Tapi,

  • Bagaimana kalo jumlah tab nya berubah ?
  • Bagaimana kalo harus mengganti warna ?
  • Bagaimana ukurannya kalo di iPhone yang lain?

Pada akhirnya akan ada ketergantungan yang besar dengan image editor eksternal dan itu dapat memperlambat proses development.

Kita kan coder kenapa gak buat saja code nya.

Yaitu beberapa baris code yang dengan parameter warna saja dapat membuat sebuah objek gambar polos dengan warna yang ditentukan sesuai dengan ukuran tab yang sedang digunakan.

Biarkan semuanya dibuat dengan code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
extension UITabBarController {
		func setBarSelectedTintColor(_ color: UIColor) {
				// determine the size
				let w = self.tabBar.frame.width / CGFloat(self.tabBar.items!.count)
				let h = self.tabBar.frame.height
				let size = CGSize(width: w, height: h)

				// make image
				UIGraphicsBeginImageContextWithOptions(size, false, 0)
				color.setFill()
				UIRectFill(CGRect(x:0, y:0, width:size.width, height:size.height))
				let image = UIGraphicsGetImageFromCurrentImageContext()
				UIGraphicsEndImageContext()

				self.tabBar.selectionIndicatorImage = image
		}
}

Contoh cara pakenya:

    setBarSelectedTintColor( UIColor.black )

```

Khasiatnya:

![](/images/bg tinted tabbar.png)
# Demikian

Mudah-mudahan berguna. Thanks!

> ***Bye!***

![bye](/images/bye.gif)