iOS swift ui 底部导航栏实现案例

前言：

各位同学大家好， 有段时间没有给大家更新文章了，因为最近都在做视频教程哈，所以文章我没及时更新 。实在不好意思哈， 今天给大家带来一个iOS 里面swift ui 实现的底部导航的demo 那么废话不多说，我们正式开始。

效果图

image.png

image.png

image.png

image.png

开发环境

image.png

. 具体实现

创建一个swiftuiview 的类

//
//  SwiftUIView.swift
//  bottomnavigation
//
//  Created by xuqing on 2022/6/2.
//

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
    
        TabView(selection: /*@START_MENU_TOKEN@*/ /*@PLACEHOLDER=Selection@*/.constant(1)/*@END_MENU_TOKEN@*/) {
            PositionView()
                .tabItem {
                    Image(systemName: "safari").imageScale(.large)
                    Text("发现")
            }.tag(1)
           CompanyView()
                .tabItem {
                    Image(systemName: "book.circle").imageScale(.large)
                    Text("书架")
            }.tag(2)
            MessageView()
                .tabItem {
                    Image(systemName: "personalhotspot").imageScale(.large)
                    Text("故事")
            }.tag(3)
               MyView()
                .tabItem {
                    Image(systemName: "person").imageScale(.large)
                    Text("我的")
            }.tag(4)
        }
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }

    
}

这边需要用到的控件是 TabView 底部导航的

TabView(selection: /*@START_MENU_TOKEN@*/ /*@PLACEHOLDER=Selection@*/.constant(1)/*@END_MENU_TOKEN@*/) {
            PositionView()
                .tabItem {
                    Image(systemName: "safari").imageScale(.large)
                    Text("发现")
            }.tag(1)
           CompanyView()
                .tabItem {
                    Image(systemName: "book.circle").imageScale(.large)
                    Text("书架")
            }.tag(2)
            MessageView()
                .tabItem {
                    Image(systemName: "personalhotspot").imageScale(.large)
                    Text("故事")
            }.tag(3)
               MyView()
                .tabItem {
                    Image(systemName: "person").imageScale(.large)
                    Text("我的")
            }.tag(4)
        }

我们在tabview 里面添加tabItem 属性 tabItem就是底部个每一个导航的item 里面分别设置 图片和文本

    .tabItem {
                    Image(systemName: "person").imageScale(.large)
                    Text("我的")
            }.tag(4)

然后我们分别创建 PositionView CompanyView MessageView MyView 4个子控件 分别来填充我们底部导航那栏上面的部分 swift ui 里面是万物基于view 类似flutter.万物基于widget. 然我们在子控件里面去显示 想要编写UI即可我这边方便 就写了text文本做了一个展示。

//
//  PositionView.swift
//  bottomnavigation
//
//  Created by xuqing on 2022/6/2.
//  职位


import SwiftUI

struct PositionView: View {
    var body: some View {
        Text("职位")
            .padding()
        
    }
}

struct PositionView_Previews: PreviewProvider {
    static var previews: some View {
        PositionView()
    }
}

其余三个子view 类似我就不重复展示了 有兴趣的同学可以下载代码去看哈 。

最后总结：

swift.ui 使用这种声明式UI 然后后现成的控件来实现底部导航 这种效果 比较起原来 uikt 是要方便很多的。有兴趣的可以自己敲一敲 不过这个只能运行在 iOS13 以上的设备 所以低版本无法运行。 最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ，麻烦给关注和star，小弟在这里