前言：
各位同学大家好， 有段时间没有给大家更新文章了，因为最近都在做视频教程哈，所以文章我没及时更新 。实在不好意思哈， 今天给大家带来一个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，小弟在这里
