ごくまれに、TabBarのバッチの位置をカスタムしたいとお願いされることがあります。
無理やりバッチをつけるのはちょっとめんどくさいですが、上手くできたので、メモっておきます。
class CustomTabViewController: UITabBarController {
private var badges: [UIView] = []
override func viewDidLoad() {
super.viewDidLoad()
addBage(position: 3, text: "11", frame: CGRect(x: 30, y: 5, width: 18, height: 18))
}
extension MainTabViewController {
// バッチをつける
private func addBage(position: Int, text:String, frame:CGRect) {
guard tabBar.subviews.count > position else {
return
}
let tabBarButton = tabBar.subviews[position]
for subView in tabBarButton.subviews {
guard let icon = subView as? UIImageView else { continue }
let badge = createBage(text: text, frame: frame)
icon.addSubview(badge)
badges.append(badge)
}
}
// バッチを全て剥がす
private func removeAllBage() {
badges.forEach { bage in
bage.removeFromSuperview()
}
}
// バッジを生成
private func createBage(text: String, frame: CGRect) -> UIView {
let bageView = UILabel(frame: frame)
bageView.text = text
bageView.textAlignment = .center
bageView.font = .systemFont(ofSize: 13)
bageView.adjustsFontSizeToFitWidth = true
bageView.minimumScaleFactor = 0.5
bageView.textColor = .white
bageView.layer.cornerRadius = 9
bageView.layer.masksToBounds = true
bageView.backgroundColor = .red
return bageView
}
}
}