Why swift view does not update with UIKit? - swift

Question

I have swiftUI tabbar with animation also I have UITabbarViewController which contains this swiftUI view.
SwiftUI
struct MainTabBarView: View {
#ObservedObject var viewModel: MainTabBarViewModel
var body: some View {
VStack {
HStack(spacing: 0) {
TabItem(currentIndex: $viewModel.index, tabIndex: 0, tab: .home)
Spacer()
TabItem(currentIndex: $viewModel.index, tabIndex: 1, tab: .search)
Spacer()
TabItem(currentIndex: $viewModel.index, tabIndex: 2, tab: .library)
}.padding(.top, 8).padding(.leading, 28).padding(.trailing, 28)
.padding(.bottom, 8)
.frame(width: UIScreen.main.bounds.width)
.animation(.easeIn(duration: 0.2))
}
UITabbarViewController:
final class MainTabBarViewController: UITabBarController, Navigatable {
private var viewModel = MainTabBarViewModel()
// MARK: - Lifecycle
override func viewDidLoad() {
super.viewDidLoad()
bindViewModel()
}
override func viewDidLoad() {
super.viewDidLoad()
configTabBarView()
}
private func configTabBarView() {
let view = UIHostingController(rootView: MainTabBarView(viewModel: viewModel))
addChild(child)
tabBar.addSubview(view.view)
view.didMove(toParent: self)
tabBar.setValue(true, forKey: "hidesShadow")
view.view.snp.makeConstraints { make in
make.leading.trailing.top.equalToSuperview()
make.height.equalTo(100)
}
}
ViewModel:
final class MainTabBarViewModel: NSObject, ObservableObject {
#Published var index: Int = 0
}
This is the code of my custom view with tabs.
When I press on tab -> index from viewModel is changing in this view and then
struct TabItem: View {
#Binding var currentIndex: Int
var tabIndex: Int
var isCurrentTab: Bool {
return currentIndex == tabIndex
}
var tab: Tabs
var body: some View {
HStack {
Image(uiImage: tab.icon).resizable().frame(width: 25, height: 25, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
.foregroundColor(isCurrentTab ? R.color.primaryColor()!.swiftUI : R.color.grayScaleDark()!.swiftUI)
Text(isCurrentTab ? tab.title : "").font(Font(R.font.poppinsRegular(size: 16)! as CTFont))
.foregroundColor(isCurrentTab ? R.color.primaryColor()!.swiftUI : R.color.grayScaleDark()!.swiftUI)
}.padding(15)
.onTapGesture {
self.currentIndex = tabIndex
logWarn(String(tabIndex))
}
.background(self.tabIndex == currentIndex ? Color(R.color.pink()!) : Color.white)
.frame(height: 44.0)
.cornerRadius(22.0)
.clipped()
}
}
The problems that index is changing, but tab does not update view. It is look, like view does not update.

Answer 1

Although it would be helpful for the given code to compile, I think I've pieced together a solution that allows the current index to remain in MainTabBarViewModel, under the assumption that the it is intended to hold other things in the future. I also make the assumption that TabItem is supposed to be sufficiently generic that it doesn't have to depend on MainTabVarViewModel specifically.
My idea is based on providing a key path to the current index when creating the TabItem. Were it not for the fact that TabItem updates the current index that would be simple enough. However, because it does update it, in a onTapGesture closure, the compiler complains that it can't write through the KeyPath, because self is immutable. So... summoning the ghost a David Wheeler, I tried doing it through a closure saved in TabItem.init... which doesn't exist, so adding that is part of the solution.
First TabItem becomes a generic:
struct TabItem<TabBarViewModel: ObservableObject>: View {
#ObservedObject var viewModel: TabBarViewModel
let indexKeyPath: WritableKeyPath<TabBarViewModel, Int>
let tapClosure: (Int) -> Void
// #Binding var currentIndex: Int
var currentIndex: Int { viewModel[keyPath: indexKeyPath] }
...
init(currentIndexIn viewModel: TabBarViewModel, at indexKeyPath: WritableKeyPath<TabBarViewModel, Int>, tabIndex: Int, tab: Tabs)
{
self.viewModel = viewModel
self.indexKeyPath = indexKeyPath
self.tabIndex = tabIndex
self.tab = tab
self.tapClosure = { self.viewModel[keyPath: indexKeyPath] = $0 }
}
With that everything in TabItem compiles (after removing references to unprovided code) except for this bit in body
.onTapGesture {
currentIndex = tabIndex
print(String(tabIndex))
}
I change that to use the closure that was saved off in the init:
.onTapGesture {
tapClosure(tabIndex)
print(String(tabIndex))
}
Then in MainTabBarView's body creating a TabItem changes from this:
TabItem(currentIndex: $viewModel.index, tabIndex: 0, tab: .home)
to this
TabItem(currentIndexIn: viewModel, at: \.index, tabIndex: 0, tab: .home)
Since there is too much code missing for me to compile and test it, this is a bit of a guess. I stubbed out missing code just to silence the errors for it, so I can say that at least this solution compiles. It would need to be applied and tested in the actual app to verify whether it works.
Anyway, assuming it does work, this solution still allows keeping the index in an observable object without relying on the particular type of that object.