SwiftUI 底部 Tabbar 导航选项切换动画效果

摸鱼的时候看到一个有意思的 Tabbar 导航切换效果,贴一个关键效果的示例代码。


我看到的

SwiftUI Tabbar 动画效果演示

完成的示例

SwiftUI Tabbar 导航动画效果示例

示例代码

 

import SwiftUI

struct TabModel:Identifiable{
    var id = UUID()
    var icon:String
    var title:String
}
struct ContentView: View {
    var taps:[TabModel] = [
        TabModel(icon: "person", title: "Accounts"),
        TabModel(icon: "house", title: "Home"),
        TabModel(icon: "creditcard", title: "Payments"),
        TabModel(icon: "arrow.right.arrow.left", title: "Transfers")
        
    ]
    @State var selectedTab = 0
    var body: some View {
        GeometryReader { geo in
            HStack(spacing: 0) {
                redVeiw()
                    .containerRelativeFrame(.horizontal, count: 1, spacing: 0)
                blueVeiw()
                    .containerRelativeFrame(.horizontal, count: 1, spacing: 0)
                greenview()
                    .containerRelativeFrame(.horizontal, count: 1, spacing: 0)
                grayview()
                    .containerRelativeFrame(.horizontal, count: 1, spacing: 0)
            }
            .offset(x: -geo.size.width * CGFloat(selectedTab))
        
        }
        .overlay(alignment: .bottom) {
            HStack{
                ForEach(taps.indices,id:\.self) { tap in
                    HStack(spacing: 14) {
                        Image(systemName:taps[tap].icon)
                        if selectedTab == tap {
                            Text(taps[tap].title).bold()
                                .transition(.scale(scale: 0, anchor: .trailing).combined(with: .opacity))
                        }
                       
                    }
                    .font(.title2)
                    .frame(maxWidth: selectedTab == tap ? .infinity : 55)
                    .frame(height: 55)
                    .background(Color(.systemGray),in:.rect(cornerRadius: 12))
                    .clipped()
                    .onTapGesture {
                        withAnimation {
                            selectedTab = tap
                        }
                    }
                    
                }
            }
            .padding(.horizontal)
         
        }
    }
}

#Preview {
    ContentView()
}
struct redVeiw: View {
    var body: some View {
        ZStack{
            Color.red.ignoresSafeArea()
            Text("RedVeiw").font(.largeTitle)
        }
    }
}
struct blueVeiw: View {
    var body: some View {
        ZStack{
            Color.blue.ignoresSafeArea()
            Text("BlueVeiw").font(.largeTitle)
        }
    }
}
struct greenview: View {
    var body: some View {
        ZStack{
            Color.green.ignoresSafeArea()
            Text("GreenVeiw").font(.largeTitle)
        }
    }
}
struct grayview: View {
    var body: some View {
        ZStack{
            Color.gray.ignoresSafeArea()
            Text("GrayVeiw").font(.largeTitle)
        }
    }
}
struct yellowview: View {
    var body: some View {
        ZStack{
            Color.yellow.ignoresSafeArea()
            Text("YellowVeiw").font(.largeTitle)
        }
    }
}

示例代码下载

SwiftUI 底部 Tabbar 导航选项切换动画效果

SwiftUI 底部 Tabbar 动画效果示例

资源价格 ¥0.00 销售数量 0 更新时间 2024-11-15
已经登录?刷新

  本文自 https://www.codeun.com 发布,相应代码均自主编写并严格审阅和测试,完整代码中包含丰富的学习笔记和使用方式、实用技巧。
  · 如若转载,请注明出处:https://www.codeun.com/archives/1402.html ·

(0)
上一篇 2024-11-14 下午2:57
下一篇 2024-11-19 下午4:01

相关推荐

发表回复

登录后才能评论