快捷導(dǎo)航

SwiftUI中TabView組件的常規(guī)使用

更新時(shí)間：2022年06月16日 11:56:51 作者：張江

這篇文章主要給大家介紹了關(guān)于SwiftUI中TabView組件的常規(guī)使用,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用SwiftUI具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

在UIKit中設(shè)置多個(gè)tabbar展示需要使用到UITabBarController 在SwiftUI中由TabView組件來進(jìn)行實(shí)現(xiàn)，同時(shí)TabView也可以實(shí)現(xiàn)PageViewController的效果，

TabView常規(guī)用法1

import SwiftUI

struct ZTMinePageView: View {
    var body: some View {
        TabView{
            Text("設(shè)置一").tabItem {
                Image(systemName: "arkit").foregroundColor(.red)
                Text("設(shè)置一")
            }
            
            Text("設(shè)置二").tabItem {
                Image(systemName: "star")
                Text("設(shè)置二")
            }
            
            Text("設(shè)置三").tabItem {
                Image(systemName: "star").foregroundColor(.red)
                Text("設(shè)置三")
            }
            
            Text("設(shè)置四").tabItem {
                Image(systemName: "star").foregroundColor(.red)
                Text("設(shè)置四")
            }
        }
    }
}

tabview此時(shí)不會(huì)綁定對(duì)應(yīng)的selectedIndex，只能在初始化的時(shí)候設(shè)置對(duì)應(yīng)的index，不能動(dòng)態(tài)設(shè)置要展示的tabbar的index，

TabView常規(guī)用法2

除了上面的點(diǎn)擊tabview切換視圖，SwiftUI還允許我們使用狀態(tài)來控制當(dāng)前視圖。為此我們需要四步

1.創(chuàng)建一個(gè)記錄當(dāng)前顯示視圖的@State 屬性
2.跳轉(zhuǎn)到其他tab中的視圖修改該屬性
3.該屬性以Binding的形式傳給TabView，便于自動(dòng)跟蹤
4.告訴SwiftUI 那種值應(yīng)該顯示那個(gè)Tab

具體的如下：

import SwiftUI

struct ZTTestPageView: View {
    
    @State private var selectedTab = 0
    
    var body: some View {
        TabView(selection: $selectedTab){
            Text("設(shè)置一").tabItem {
                Image(systemName: "arkit").foregroundColor(.red)
                Text("設(shè)置一")
            }.onTapGesture {
                self.selectedTab = 3
            }.tag(0)
            
            Text("設(shè)置二").tabItem {
                Image(systemName: "star")
                Text("設(shè)置二")
            }.tag(1)
            
            Text("設(shè)置三").tabItem {
                Image(systemName: "star").foregroundColor(.red)
                Text("設(shè)置三")
            }.tag(2)
            
            Text("設(shè)置四").tabItem {
                Image(systemName: "star").foregroundColor(.red)
                Text("設(shè)置四")
            }.tag(3)
        }
    }
}

上面代碼中當(dāng)我們點(diǎn)擊設(shè)置一界面中的text 這時(shí)會(huì)修改selectedTab,而我們?cè)谏厦姘?code>TabView和selectedTab綁定到一起了，修改selectedTab的值 TabView也會(huì)切換對(duì)應(yīng)展示的視圖。

TabView常規(guī)用法3

在上面的用法中沒有辦法對(duì)TabbarItem中的圖片做選中和非選中的切換，上面截圖中的變化只是系統(tǒng)對(duì)選中和非選中的一個(gè)顏色的處理，事實(shí)上我們的圖片都是同一個(gè)。在實(shí)際項(xiàng)目中，點(diǎn)擊tabbar切換視圖底部的圖片也會(huì)跟著變化，而且在其他界面中也會(huì)動(dòng)態(tài)的修改當(dāng)前TabView的index。

1.創(chuàng)建一個(gè)環(huán)境對(duì)象，在App啟動(dòng)的時(shí)候設(shè)置要展示的初始值，
2.其他要修改的地方獲取環(huán)境變量并修改
3.TabView和環(huán)境變量相互綁定，有一方修改其他方也會(huì)跟著變化

1.定義一個(gè)全局的環(huán)境變量

import SwiftUI
import Combine

final class TabBarIndexObserver: ObservableObject {
   @Published
   var tabSelected: TabBarItem = .Home
}

2.定義為全局的環(huán)境變量 @EnvironmentObject

import SwiftUI

@main
struct SwiftUITestApp: App {
   var body: some Scene {
       WindowGroup {
           ContentView().environmentObject(TabBarIndexObserver())
       }
   }
}

3.綁定TabView和環(huán)境變量,其中要自己自定義一個(gè)TabBarItem對(duì)象，主要是根據(jù)當(dāng)前TabView中的index 返回 image 和 title，每個(gè)展示的視圖都要設(shè)置tag 否則綁定視圖一直展示的都是0，不會(huì)切換到其他視圖。圖片資源可以自己設(shè)置。

import SwiftUI

enum TabBarItem: Int {
   case Home
   case Living
   case Message
   case Mine
   
   var titleStr: String {
       switch self {
       case .Home:
           return "首頁"
       case .Living:
           return "直播"
       case .Message:
           return "消息"
       case .Mine:
           return "我的"
       }
   }
   
   var normalImage: Image {
       var imageName = ""
       switch self {
       case .Home:
           imageName = ""
       case .Living:
           imageName = ""
       case .Message:
           imageName = ""
       case .Mine:
           imageName = ""
       }
       return Image(imageName)
   }
   
   var selectedImage: Image {
       var imageName = ""
       switch self {
       case .Home:
           imageName = ""
       case .Living:
           imageName = ""
       case .Message:
           imageName = ""
       case .Mine:
           imageName = ""
       }
       return Image(imageName)
   }
}

在TabView中進(jìn)行對(duì)應(yīng)的設(shè)置，給每一個(gè)視圖設(shè)置一個(gè)唯一的標(biāo)識(shí)，用這個(gè)標(biāo)識(shí)符作為被選中的tab，這些標(biāo)識(shí)符被稱為Tag

import SwiftUI

struct ContentView: View {
   @EnvironmentObject
   private var tabbarIndex: TabBarIndexObserver
   
   private var selectedTab: Binding<Int> {
     Binding(
       get: { tabbarIndex.tabSelected.rawValue },
       set: {
           tabbarIndex.tabSelected = TabBarItem(rawValue: $0)!
       }
     )
   }
   // 設(shè)置對(duì)應(yīng)的normal 和 selected圖片 要設(shè)置TabView 綁定狀態(tài) 和 每個(gè)View的tag值，在點(diǎn)擊的時(shí)候把值傳遞給對(duì)應(yīng)的view
   var body: some View {
    TabView(selection: selectedTab) {
        ZTHomePageView()
            .tabItem {tabItem(for: .Home)}
            .tag(TabBarItem.Home.rawValue)
        ZTLivingPageView()
            .tabItem {tabItem(for: .Living)}
            .tag(TabBarItem.Living.rawValue)
        ZTMessagePageView()
            .tabItem {tabItem(for: .Message)}
            .tag(TabBarItem.Message.rawValue)
        ZTMinePageView()
            .tabItem { tabItem(for: .Mine) }
            .tag(TabBarItem.Mine.rawValue)
    }
    .font(.headline)
    .accentColor(Color.red) // 設(shè)置 tab bar 選中顏色

   }

   private func tabItem(for tab: TabBarItem) -> some View {
       print(selectedTab.wrappedValue)
     return VStack {
       tab.rawValue == selectedTab.wrappedValue ? tab.selectedImage : tab.normalImage
       Text(tab.titleStr)
     }
   }
}

TabView常規(guī)用法4---做輪播圖

TabView實(shí)現(xiàn)輪播圖時(shí)不用設(shè)置tabItem 需要指定tabView的顯示類型為.tabViewStyle(PageTabViewStyle()) 具體代碼如下

struct ZTMinePageView: View {
   
   //設(shè)置定時(shí)器 每2s運(yùn)行一次 mode為 common 在主線程執(zhí)行 autoconnect 立即開始定時(shí)器
   let timer = Timer.publish(every: 2, tolerance: 0.5, on: .main, in: .common).autoconnect()
   
   @State private var bannerIndex = 0
   
   var body: some View {
       if #available(iOS 15.0, *) {
           TabView(selection: $bannerIndex){
               Image("test_1").resizable().scaledToFit().tag(0)
               Image("test_2").resizable().scaledToFit().tag(1)
               Image("test_3").resizable().scaledToFit().tag(2)
               Image("test_4").resizable().scaledToFit().tag(3)
           }
           .background(Color(red: 0.5, green: 0.9, blue: 0.3, opacity: 0.3))
           .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
           .onReceive(timer){ time in
               self.bannerIndex += 1
               if self.bannerIndex > 3{
                   self.bannerIndex = 0
               }
           }
           .onAppear{
               
           }.onDisappear{
               self.timer.upstream.connect().cancel()
           }
       } else {
           
       }
   }
}

其中設(shè)置了一個(gè)定時(shí)器，具體效果如下，如果想要?jiǎng)赢?可以自己加上去