TEAM LICENSES: Save money and learn new skills through a Hacking with Swift+ team license >>

SOLVED: Problem with Animation working when used in "sub sub view" (don't have a better way to describe it, sorry)

Forums > SwiftUI

Greetings,

I've made a View (HistoricalView) that displays other views based on the selection of a Picker with an Animation. That Animation works fine on that View.

Here is how it looks like: Working

However, when I use the main View (ContentView), which contains a custom TabView of sorts, the Animation does not work anymore.

Here is how it looks like: Not Working

Here is the code for it, with all the views if you need it.

ContentView

import SwiftUI

struct ContentView: View {
    @ObservedObject var router = ViewRouterTabBarView()
    let tabItemsPadding: CGFloat = 2

    var body: some View {
        ZStack(alignment: .bottom) {
            VStack {
                Spacer()

                router.view

                Spacer()
                HStack {
                    TabItem(viewModel: .home, router: router)
                        .padding(tabItemsPadding)
                    TabItem(viewModel: .history, router: router)
                        .padding(tabItemsPadding)
                }
                //                .frame(height: UIScreen.main.bounds.height / 10)
                .frame(height: 75)
                .frame(maxWidth: .infinity)
                .padding(.horizontal, 20)
                .padding(.bottom, 10)
            }
        } // end ZStack
        .ignoresSafeArea()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct TabItem: View {
    let viewModel: TabBarViewModel
    @ObservedObject var router: ViewRouterTabBarView
    var body: some View {

        Button(action: {
            withAnimation() {
                router.currentItem = viewModel
            }
        }) {
            VStack {
                Image(systemName: viewModel.imageName)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: router.currentItem == viewModel.self ? 30 : 20, height: router.currentItem == viewModel.self ? 30 : 20)
                    .frame(maxWidth: .infinity)
                    .symbolRenderingMode(.palette)
                    .foregroundStyle(router.currentItem == viewModel.self ? .orange:  .gray, router.currentItem == viewModel.self ? .blue : .gray)
                Text(viewModel.tabLabel)
                    .lineLimit(1)
                    .minimumScaleFactor(0.5)
                    .font(router.currentItem == viewModel.self ? .footnote : .caption2)
            }
            .foregroundColor(router.currentItem == viewModel.self ? .orange : .gray)
        }
        .padding(.top, -10)
        .offset(y: router.currentItem == viewModel.self ? -20 : 0)
    }
}

class ViewRouterTabBarView: ObservableObject {
    @Published var currentItem: TabBarViewModel = .home

    var view: some View { return currentItem.view }
}

enum TabBarViewModel: Int, CaseIterable {
    case home
    case history

    var imageName: String {
        switch self {
        case .home: return "homekit" //"house.fill"
        case .history: return "calendar.badge.clock"
        }
    }

    var tabLabel: String {
        switch self {
        case .home: return "Home"
        case .history: return "History"
        }
    }

    @ViewBuilder
    var view: some View {
        switch self {
        case .home:
            NavigationView { HomeView() }
        case .history:
            NavigationView { HistoricalView() }
        }
    }
}

HomeView

import SwiftUI

struct HomeView: View {
    var body: some View {
        Text("This is HomeView")
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}

HistoricalView

import SwiftUI

enum HistoryViewModel: String, CaseIterable {
    case records = "Measures"
    case weights = "Weights"
}

struct HistoricalView: View {
    @State private var segmentationSelection : HistoryViewModel = .records
    @State var showingMeasures = true
    @State var showingWeights = false

    var body: some View {
        VStack {
            Picker("", selection: $segmentationSelection) {
                ForEach(HistoryViewModel.allCases, id: \.self) { historyView in
                    Text(historyView.rawValue)
                }
            }
            .pickerStyle(.segmented)
            .padding(.horizontal, 100)
            .onChange(of: segmentationSelection) { newValue in
                showingWeights.toggle()
                showingMeasures.toggle()
            }

            .frame(height:45)
            Spacer()

            if segmentationSelection == .records {
                HistoricalRecordsView()
                    .transition(.move(edge: .leading))
                    .animation(.easeInOut(duration: 0.25), value: showingMeasures)
            } else {
                HistoricalWeightsView()
                    .transition(.move(edge: .trailing))
                    .animation(.easeInOut(duration: 0.25), value: showingWeights)
            }
        }
    }
}

struct HistoricalView_Previews: PreviewProvider {
    static var previews: some View {
        HistoricalView()
    }
}

HistoricalRecordsView

import SwiftUI

struct HistoricalRecordsView: View {
    var body: some View {
        VStack {
            Spacer()
            Text("This is HistoricalRecordsView")
            Spacer()
        }
    }
}

struct HistoricalRecordsView_Previews: PreviewProvider {
    static var previews: some View {
        HistoricalRecordsView()
    }
}

HistoricalWeightsView

import SwiftUI

struct HistoricalWeightsView: View {
    var body: some View {
        VStack {
            Spacer()
            Text("This is HistoricalWeightsView")
            Spacer()
        }
    }
}

struct HistoricalWeightsView_Previews: PreviewProvider {
    static var previews: some View {
        HistoricalWeightsView()
    }
}

Any idea what I need to update to make it work from ContentView as well?

Thank you :)

1      

Hi! If you run on Content canvas and simulator it will do the same transition, besides you can avoid several vars...

struct HistoricalView: View {
    @State private var segmentationSelection : HistoryViewModel = .records

    var body: some View {
        VStack {
            Picker("", selection: $segmentationSelection) {
                ForEach(HistoryViewModel.allCases, id: \.self) { historyView in
                    Text(historyView.rawValue)
                }
            }
            .pickerStyle(.segmented)
            .padding(.horizontal, 100)
            .frame(height:45)
            Spacer()

            selectedView(selected: segmentationSelection)
                .animation(.easeInOut(duration: 0.25), value: segmentationSelection)
        }
    }

    @ViewBuilder
    func selectedView(selected: HistoryViewModel) -> some View {
        switch selected {
        case .records:
            HistoricalRecordsView()
                .transition(.asymmetric(insertion: .move(edge: .leading), removal: .opacity))
        case .weights:
            HistoricalWeightsView()
                .transition(.asymmetric(insertion: .move(edge: .trailing), removal: .opacity))
        }
    }
}

1      

Hi @ygeras!

Thank you very much for the swift and working reply :) really appreciate it. I knew my way of displaying the views was not optimal, just couldn't think of a better way to do it.

Works like a charm now :)

1      

Hacking with Swift is sponsored by String Catalog.

SPONSORED Get accurate app localizations in minutes using AI. Choose your languages & receive translations for 40+ markets!

Localize My App

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.