TabViewで画面を切り替える
Published by @SoNiceInfo at 6/24/2020
TabViewを使うことで複数の画面を切り替えることができます。
TabViewの使い方
TabViewは画面下部にタブを表示させて画面を切り替えられるようにする機能です。TabViewの直下のViewが各タブのコンテンツになります。
そのViewに対して修飾子tabItemをを利用することでタブ機能を利用することができます。TabViewはViewプロトコルに準拠しているのでViewの修飾子が利用できます。tabItem内でタブバーで表示する内容を記述します。tabItem内で使えるViewはText, Imageに限られているので注意が必要です。
Text, Image以外を使うと空のtabItemになります。
ここでは3つのタブを用意して切り替えています。
//
// ContentView.swift
//
import SwiftUI
struct ContentView: View {
var body: some View {
TabView {
Image(systemName: "faceid")
.tabItem {
Image(systemName: "1.square.fill")
Text("faceid")
}
Image(systemName: "faceid")
.resizable()
.scaledToFit()
.frame(width: 200.0, height: 200.0)
.foregroundColor(.blue)
.tabItem {
Image(systemName: "2.square.fill")
Text("Second")
}
Image(systemName: "faceid")
.resizable()
.scaledToFit()
.font(.system(size: 18, weight: .ultraLight, design: .serif))
.frame(width: 200.0, height: 200.0)
.foregroundColor(.blue)
.tabItem {
Image(systemName: "3.square.fill")
Text("Third")
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
TabViewの色を変える
タブが選択されたときの色を変えるには.accentColor(.red)を利用します。
タブの色を変えるにはTabViewの修飾子では不可能なのでUIKit側で変更します。
Viewのイニシャライザ内でUITabBar.appearance().backgroundColorを指定します。
//
// ContentView.swift
//
import SwiftUI
struct ContentView: View {
init() {
UITabBar.appearance().backgroundColor = UIColor.blue
}
var body: some View {
TabView {
Image(systemName: "faceid")
.tabItem {
Image(systemName: "1.square.fill")
Text("faceid")
}
Image(systemName: "flame")
.tabItem {
Image(systemName: "2.square.fill")
Text("flame")
}
}.accentColor(.red)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
