SwiftUI-自定义Tabbar

立即下载用AI写一个

发布时间：2022-05-09

2人 | 浏览：3376次 | 收藏 |

技术：Tabbar + Table

运行环境：SwiftUI3.0 + Xcode13.3.1 + MacOS 12.1 + iPhone Simulator - iPhone 13 pro Max

概述

我将教授如何使用 SwiftUI 3.0 创建动画自定义标签栏

详细

[开源SwiftUI演练集合,如果觉得不错,大家给个star
SwiftUIRehearse
](https://github.com/studyLiyuhong165/SwiftUIRehearse)

[我的博客,经常会分享一些
数据结构与算法、底层逻辑、
SwiftUI、SwiftUI项目、组件化、Rac、RxSwift、
Firebase、Flutter、RN、面试题等干货
欢迎大家点赞+关注+收藏](https://blog.csdn.net/qq_42816425)

## 一、运行效果
![运行效果](/contentImages/image/20220504/ldKvxbhJvkyEitmARje.gif)

## 二、项目结构图
![](/contentImages/image/20220504/bnbqag0qgEz9cuELAqT.png)

## 三、程序实现 - 过程
### ①、创建一个SwiftUI的项目 命名为`CustomTabbar`
![](/contentImages/image/20220504/1tEMwvrxpbLqVEvedgD.png)
![](/contentImages/image/20220504/3wJHSAxJL30cI2WxbN9.png)
![](/contentImages/image/20220504/beGWyA5STLIJ1cluzp6.png)
### ②、新建一个`Tab.swift`、`CustomTabbar.swift`
> 它们的作用是
1.Tab是一个枚举 其中枚举的 Rawvlaue 和`Assets.xcassets`资源文件的图片是相对应的
2.CustomTabbar 主要是做自定义tabbar样式的

#### 1、Tab.swift
```swift
import SwiftUI

// Mark : Enum For Tabs with Rawvlaue as Asset Image
// 标记:Enum选项卡与Rawvlaue作为资产图像
enum Tab : String ,CaseIterable {
    case home = "Home"
    case label = "Label"
    case position = "Position"
    case found = "Found"
    case my = "My"
}
```

#### 2、CustomTabbar.swift
> 其中 
1. getIndex()方法 是用于获取tabbar点击的索引值
2. indicatorOffset(witdh : CGFloat) ->CGFloat 是用于获取当前黄色圈圈的偏移位置
3. 当点击到某个tabbar的时候 做一个动画处理
将当前的tabbar记录起来 并且设置小黄圈的偏移量y设置为-60。当动画完成时设置会偏移量为0.最主要是做一个跳动效果
4.点击的图片  通过 scaleEffect 做一个缩放效果

```
import SwiftUI

struct CustomTabbar: View {
    @Binding var currentTab : Tab
    
    // MARK : To Animate Like Curve
    // 动画曲线
    @State var yOffset : CGFloat = 0
    var body: some View {
        GeometryReader{ proxy in
            // 获取整体的宽度
            let width = proxy.size.width
            HStack(spacing:0) {
                ForEach(Tab.allCases,id:\.rawValue){tab in
                    Button {
                        withAnimation(.easeInOut(duration: 0.2)) {
                            currentTab = tab
                            yOffset = -60
                        }
                        withAnimation(.easeInOut(duration: 0.1).delay(0.07)){
                            
                            yOffset = 0
                        }
                    } label: {
                        Image(tab.rawValue)
                            .renderingMode(.template)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width:30,height: 30)
                            .frame(maxWidth:.infinity)
                            .foregroundColor(currentTab == tab ? Color("Purple"):.gray)
                        
                        // MARK : Little Scaling Effect
                        // 图表一个缩放动画效果
                            .scaleEffect(currentTab == tab && yOffset != 0 ? 1.5 : 1)
                    }

}
            }
            .frame(maxWidth:.infinity)
            .background(alignment:.leading){
                Circle()
                    .fill(Color("Yellow"))
                    .frame(width:25,height:25)
                    .offset(x:10,y:yOffset)
                    .offset(x:indicatorOffset(witdh: width))
            }
            
        }
        .frame(height:30)
        .padding(.bottom,10)
        .padding([.horizontal,.top])
    }
    // MARK: Indicator Offset
    // 指示器偏移
    func indicatorOffset(witdh : CGFloat) ->CGFloat {
        let index = CGFloat(getIndex())
        if index == 0 {return 0}
        
        let buttonWidth = witdh / CGFloat(Tab.allCases.count)
        return index * buttonWidth
    }
    func getIndex() -> Int {
        switch currentTab {
        case .home:
            return 0
        case .label:
            return 1
        case .position:
            return 2
        case .found:
            return 3
        case .my:
            return 4
        }
    }
}

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

### 3、ContentView.swift
>  ContentView 是做一个展示的效果
> 其中
1. 使用Table 创建出一个tabbarController来
2. ApplyBG 是设置当前view的背景以及当前view的整体大小

```swift
import SwiftUI

struct ContentView: View {
    // MARK: Hiding Native One
    // 隐藏Native One
    init(){
        UITabBar.appearance().isHidden = true
    }
    
    
    @State var currentTab : Tab = .home
    var body: some View {
        VStack(spacing:0){
            TabView(selection:$currentTab) {
                // MARK: Need to Apply BG For Each Tab View
                // 需要为每个标签视图应用BG
                Text("Home")
                    .ApplyBG()
                    .tag(Tab.home)
                Text("Label")
                    .ApplyBG()
                    .tag(Tab.label)
                Text("Position")
                    .ApplyBG()
                    .tag(Tab.position)
                Text("Found")
                    .ApplyBG()
                    .tag(Tab.found)
                Text("My")
                    .ApplyBG()
                    .tag(Tab.my)

}
            CustomTabbar(currentTab: $currentTab)
        }
    }
}

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

extension View{
    func ApplyBG() -> some View {
        // infinity 无穷的
        self
            .frame(maxWidth:.infinity,maxHeight: .infinity)
            .background{
                Color("BG")
                .ignoresSafeArea()
            }
    }
}

```

## 四、补充
无

---

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

SwiftUI-自定义Tabbar

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子