大家好，我们又见面了~今天给大家带来 Tabs标签页组件在SwiftUI中的实现方式。在本文中，我依然会采用一种循序渐进的方式来进行讲解，这其实也是我的实现思路，希望能帮到需要的朋友。
在看本文之前，我强烈建议你先阅读我的上一篇文章 SwiftUI精讲：自定义 Tabbar 组件 (包含过渡效果)，因为有一些重复的知识点在上篇中已经讲过了，本文再讲的话难免会有些乏味，我希望每次写下的文章都有一些新的知识点~
1.Tabs组件的实现
我们先创建 Componets 文件夹，并在其中创建 tabs 文件，我们先简单地创建一个list，并将内容遍历渲染出来，如下所示：
1-1：大致UI的实现
import SwiftUI
struct TabItem: Identifiable {
var id:Int
var text:String
}
struct tabs: View {
let list:[TabItem]
@State var currentSelect:Int = 0
var body: some View {
ScrollView(.horizontal,showsIndicators: false) {
HStack {
ForEach(list) { tabItem in
Button{
currentSelect = tabItem.id
} label: {
HStack{
Spacer()
Text(tabItem.text)
.padding(.horizontal,12)
.fixedSize()
Spacer()
}
}
}
}
.frame(minWidth: UIScreen.main.bounds.width)
}
}
}
struct tabs_Previews: PreviewProvider {
// 创建一些测试数据
static let list = [
TabItem(id:1,text:"关注"),
TabItem(id:2,text:"推荐"),
TabItem(id:3,text:"热榜"),
TabItem(id:4,text:"头条精选"),
TabItem(id:5,text:"后端"),
TabItem(id:6,text:"前端")
]
static var previews: some View {
tabs(list: list)
}
}
这里加上 .frame(minWidth: UIScreen.main.bounds.width) 是为了保证在标签只有两三个的时候，我依然希望它们处于一个均匀布局的状态。代码运行后如图所示：
接着我们加上下划线样式，代码如下所示：
import SwiftUI
struct TabItem: Identifiable {
var id:Int
var text:String
}
struct tabs: View {
let list:[TabItem]
@State var currentSelect:Int = 1
var body: some View {
ScrollView(.horizontal,showsIndicators: false) {
HStack {
ForEach(list) { tabItem in
Button{
currentSelect = tabItem.id
} label: {
HStack{
Spacer()
Text(tabItem.text)
.padding(EdgeInsets(top: 8, leading: 12, bottom: 10, trailing: 12))
.fixedSize()
Spacer()
}
.background(
VStack{
if(currentSelect == tabItem.id){
Spacer()
Rectangle()
.fill(Color(hex: "#1677ff"))
.frame(height: 2)
.padding(.horizontal,12)
.cornerRadius(2)
}
}
)
}
}
}
.frame(minWidth: UIScreen.main.bounds.width)
}
}
}
struct tabs_Previews: PreviewProvider {
// 创建一些测试数据
static let list = [
TabItem(id:1,text:"关注"),
TabItem(id:2,text:"推荐"),
TabItem(id:3,text:"热榜"),
TabItem(id:4,text:"头条精选"),
TabItem(id:5,text:"后端"),
TabItem(id:6,text:"前端")
]
static var previews: some View {
tabs(list: list)
}
}
细心的朋友可能会发现，我的代码里面出现了 Color(hex: "#1677ff")，这是因为我们对Color结构进行了拓展，让它支持16进制颜色的传递，如下所示：
extension Color {
init(hex: String) {
let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
var int: UInt64 = 0
Scanner(string: hex).scanHexInt64(&int)
let a, r, g, b: UInt64
switch hex.count {
case 3: // RGB (12-bit)
(a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
case 6: // RGB (24-bit)
(a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
case 8: // ARGB (32-bit)
(a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
default:
(a, r, g, b) = (1, 1, 1, 0)
}
self.init(
.sRGB,
red: Double(r) / 255,
green: Double(g) / 255,
blue: Double(b) / 255,
opacity: Double(a) / 255
)
}
}
代码运行后的效果如图所示：
我们再对字体方面进行优化，我们希望点击后的字体颜色和大小和点击前保持不一致，我们对代码做出修改，如下所示：
HStack{
Spacer()
Text(tabItem.text)
.padding(EdgeInsets(top: 8, leading: 12, bottom: 10, trailing: 12))
.fixedSize()
.foregroundColor(currentSelect == tabItem.id ? Color(hex: "#1677ff") : Color(hex: "#333"))
// 新增
.font(.system(size: currentSelect == tabItem.id ? 20 : 17))
// 新增
.fontWeight(currentSelect == tabItem.id ? .bold : .regular)
Spacer()
}
更改后的效果如图所示：
好了，我们一个普通的tab组件就写完了，完结撒花。
接下来我们需要给下划线添加相应的过渡效果，类似于掘金的下划线移动过渡。如果有从事web端开发的朋友们，我们可以想一下，在web端我们是怎么实现类似的效果的？是不是要通过一些计算，然后赋值给下划线 css的 left 值，或者是 translateX 值。在SwiftUI中，我们压根不用这么麻烦，我们可以使用 matchedGeometryEffect 来轻易的做到相应的效果！
1-2：下划线过渡效果实现
我们对代码稍微修改下，详细的步骤我会在图中进行标注，如下图所示：
接着我们按下 command + R ,运行 Simulator 来查看对应的效果:
可以发现，我们其实已经取得了我们想要的效果。但是由于 tab 在激活的时候，文字对应的动画看着十分晃眼，很讨人厌。如果希望只保留下划线的过渡效果，而不要文字的过渡效果，该怎么做呢？
很简单，我们只需要添加 .animation(nil,value:UUID()) 即可，如下所示：
Text(tabItem.text)
.padding(EdgeInsets(top: 8, leading: 12, bottom: 10, trailing: 12))
.fixedSize()
.foregroundColor(currentSelect == tabItem.id ? Color(hex: "#1677ff") : Color(hex: "#333"))
.font(.system(size: currentSelect == tabItem.id ? 20 : 17))
.fontWeight(currentSelect == tabItem.id ? .bold : .regular)
// 新增
.animation(nil,value:UUID())
现在看起来是不是正常多了？
1-3：自动滚动到对应位置
大致UI画得差不多了，接下来我们需要在点击比较靠后的tab时，我们希望 ScrollView 能帮我们滚动到对应的位置，我们该怎么做呢？
答案是引入 ScrollViewReader, 使用 ScrollViewProxy中的scrollTo方法，代码如下所示：
struct tabs: View {
let list:[TabItem]
@State var currentSelect:Int = 1
@Namespace var animationNamespace
var body: some View {
ScrollViewReader { scrollProxy in
ScrollView(.horizontal,showsIndicators: false) {
HStack {
ForEach(list) { tabItem in
Button{
withAnimation{
currentSelect = tabItem.id
}
} label: {
HStack{
Spacer()
Text(tabItem.text)
.padding(EdgeInsets(top: 8, leading: 12, bottom: 10, trailing: 12))
.fixedSize()
.foregroundColor(currentSelect == tabItem.id ? Color(hex: "#1677ff") : Color(hex: "#333"))
.font(.system(size: currentSelect == tabItem.id ? 20 : 17))
.fontWeight(currentSelect == tabItem.id ? .bold : .regular)
.animation(nil,value:UUID())
Spacer()
}
.background(
VStack{
if(currentSelect == tabItem.id){
Spacer()
Rectangle()
.fill(Color(hex: "#1677ff"))
.frame(height: 2)
.padding(.horizontal,12)
.cornerRadius(2)
.matchedGeometryEffect(id: "tab_line", in: animationNamespace)
}
}
)
}
}
}
.frame(minWidth: UIScreen.main.bounds.width)
}
.onChange(of: currentSelect) { newSelect in
withAnimation(.easeInOut) {
scrollProxy.scrollTo(currentSelect,anchor: .center)
}
}
}
}
}
在代码中，我们利用 scrollProxy.scrollTo 方法，轻易地实现了滚动到对应tab的位置。效果如下所示:
呜呼，目前为止，我们已经完成了一个不错的tabs组件。接下来在ContentView中，我们引入该组件。由于我们需要在父视图中知道tabs中currentSelect的变化，我们需要把子组件的 @State 改成 @Binding，同时为了避免 preview报错，我们也要做出对应的修改，如图所示：
1-4：结合TabView完成手势滑动切换
日常我们在使用tabs标签页的时候，如果需要支持用户通过手势进行切换标签页的操作，我们可以结合TabView一起使用，代码如下所示：
import SwiftUI
struct ContentView: View {
let list = [
TabItem(id:1,text:"关注"),
TabItem(id:2,text:"推荐"),
TabItem(id:3,text:"热榜"),
TabItem(id:4,text:"头条精选"),
TabItem(id:5,text:"后端"),
TabItem(id:6,text:"前端"),
]
@State var currentSelect:Int = 1
var body: some View {
VStack(spacing: 0){
tabs(list:list,currentSelect:$currentSelect)
TabView(selection:$currentSelect){
ForEach(list){tabItem in
Text(tabItem.text).tag(tabItem.id)
}
}.tabViewStyle(.page(indexDisplayMode: .never))
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
效果如下所示：
至此，我们总算是完成了一个能满足大部分需求的Tabs组件啦~
2. Tabs组件的拓展
2-1：Tabs组件的吸顶
仅仅实现一个简单的效果怎么够，这不符合笔者精讲技术的精神，我们还要结合日常的业务进行思考。比如，我现在想要在页面滚动的时候，我希望tabs组件能够自动吸顶，应该怎么去实现呢？
首先我们新建View文件夹，在其中放置一些视图组件，并在组件中，添加一些文本，如图所示：
接着我们先思考一下，如何在SwiftUI中做出一个吸顶的效果。这里我使用了 LazyVStack + Section的方式来做。但是有个问题，TabView被包裹在Section里面时，TabView的高度会丢失。我将会在 ScrollView 的外层套上 GeometryReader 来解决这个问题，以下为代码展示：
import SwiftUI
struct ContentView: View {
let list = [
TabItem(id:1,text:"关注"),
TabItem(id:2,text:"推荐"),
TabItem(id:3,text:"热榜")
]
@State var currentSelect:Int = 1
var body: some View {
NavigationView{
GeometryReader { proxy in
ScrollView{
LazyVStack(spacing: 0, pinnedViews:.sectionHeaders) {
Section(
header:tabs(list:list,currentSelect:$currentSelect)
.background(.white)
){
TabView(selection:$currentSelect){
ForEach(list){tabItem in
VStack{
switch currentSelect{
case 1:
Attention()
case 2:
Recommend()
case 3:
Hot()
default:
Text("")
}
}
.tag(tabItem.id)
}
}
.tabViewStyle(.page(indexDisplayMode: .never))
.frame(minHeight:proxy.size.height)
}
}
}
}
.navigationTitle("Tabs组件实现")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
效果如图所示：
2-2：下拉刷新的实现
要实现下拉刷新的功能，我们可以使用ScrollView并结合.refreshable 来实现这个效果，代码如下所示：
import SwiftUI
struct ContentView: View {
let list = [
TabItem(id:1,text:"关注"),
TabItem(id:2,text:"推荐"),
TabItem(id:3,text:"热榜")
]
@State var currentSelect:Int = 1
var body: some View {
NavigationView{
GeometryReader { proxy in
ScrollView{
LazyVStack(spacing: 0, pinnedViews:.sectionHeaders) {
Section(
header:tabs(list:list,currentSelect:$currentSelect)
.background(.white)
){
TabView(selection:$currentSelect){
ForEach(list){tabItem in
ScrollView{
switch currentSelect{
case 1:
Attention()
case 2:
Recommend()
case 3:
Hot()
default:
Text("")
}
}
.tag(tabItem.id)
.refreshable {
print("触发刷新")
}
}
}
.tabViewStyle(.page(indexDisplayMode: .never))
.frame(minHeight:proxy.size.height)
}
}
}
}
.navigationTitle("Tabs组件实现")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
在这里要注意 .refreshable 是 ios15 才能使用的，使用时要考虑API的兼容性。效果如图所示：
至此，我们已经完成了一个很不错的Tabs标签页组件啦。感谢你的阅读，如有问题欢迎在评论区中进行交流~
在下方可以看到错误日志.
