I have custom bottom navigation bar in IOS application, everythings work very well, and I want to change bottom navigation items tint color when I click the items, and I was use the
self.imgView.image!.withRenderingMode(.alwaysTemplate)
self.imgView.tintColor = .red
in isSelected, and it is change whole icons border tint color. I do not know where I miss, any idea?
RootStackTabViewController:
class RootStackTabViewController: UIViewController {
@IBOutlet weak var bottomStack: UIStackView!
var currentIndex = 0
lazy var tabs: [StackItemView] = {
var items = [StackItemView]()
for _ in 0..<5 {
items.append(StackItemView.newInstance)
}
return items
}()
lazy var tabModels: [BottomStackItem] = {
return [
BottomStackItem(title: "Home", image: "home"),
BottomStackItem(title: "Favorites", image: "heart"),
BottomStackItem(title: "Search", image: "search"),
BottomStackItem(title: "Profile", image: "user"),
BottomStackItem(title: "Settings", image: "settings")
]
}()
override func viewDidLoad() {
super.viewDidLoad()
self.setupTabs()
}
func setupTabs() {
for (index, model) in self.tabModels.enumerated() {
let tabView = self.tabs[index]
model.isSelected = index == 0
tabView.item = model
tabView.delegate = self
self.bottomStack.addArrangedSubview(tabView)
}
}
}
StackItemView:
protocol StackItemViewDelegate: AnyObject {
func handleTap(_ view: StackItemView)
}
class StackItemView: UIView {
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var imgView: UIImageView!
@IBOutlet weak var highlightView: UIView!
private let higlightBGColor = UIColor(hexString: "1160FB")
static var newInstance: StackItemView {
return Bundle.main.loadNibNamed(
StackItemView.className(),
owner: nil,
options: nil
)?.first as! StackItemView
}
weak var delegate: StackItemViewDelegate?
override func awakeFromNib() {
super.awakeFromNib()
self.addTapGesture()
}
var isSelected: Bool = false {
willSet {
self.updateUI(isSelected: newValue)
self.titleLabel.textColor = UIColor.white
self.imgView.image!.withRenderingMode(.alwaysTemplate)
self.imgView.tintColor = .red
}
}
var item: Any? {
didSet {
self.configure(self.item)
}
}
private func configure(_ item: Any?) {
guard let model = item as? BottomStackItem else { return }
self.titleLabel.text = model.title
self.imgView.image = UIImage(named: model.image)
self.isSelected = model.isSelected
}
private func updateUI(isSelected: Bool) {
guard let model = item as? BottomStackItem else { return }
model.isSelected = isSelected
let options: UIView.AnimationOptions = isSelected ? [.curveEaseIn] : [.curveEaseOut]
UIView.animate(withDuration: 0.4,
delay: 0.0,
usingSpringWithDamping: 1.0,
initialSpringVelocity: 0.5,
options: options,
animations: {
self.titleLabel.text = isSelected ? model.title : ""
let color = isSelected ? self.higlightBGColor : .white
self.highlightView.backgroundColor = color
(self.superview as? UIStackView)?.layoutIfNeeded()
}, completion: nil)
}
}
extension StackItemView {
func addTapGesture() {
let tapGesture = UITapGestureRecognizer(target: self,
action: #selector(handleGesture(_:)))
self.addGestureRecognizer(tapGesture)
}
@objc
func handleGesture(_ sender: UITapGestureRecognizer) {
self.delegate?.handleTap(self)
}
}