๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŽ iOS/SwiftUI

[SwiftUI] TabView์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ธฐ (feat. UITabBar)

by Fomagran ๐Ÿ’ป 2022. 3. 10.
728x90
๋ฐ˜์‘ํ˜•



์•ˆ๋…•ํ•˜์„ธ์š” Foma ๐Ÿ’ป ์ž…๋‹ˆ๋‹ค!

์˜ค๋Š˜์€ SwiftUI์—์„œ ํƒญ๋ทฐ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

(UIKit์—์„  UITabBar๋ฅผ ๋œปํ•ฉ๋‹ˆ๋‹ค.)

๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~


TabView Contents


SwiftUI์—์„œ ํƒญ๋ทฐ๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋„ˆ๋ฌด ๋„ˆ๋ฌด ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค.

์•„๋ž˜์™€ ๊ฐ™์ด TabView๋กœ ๊ฐ์‹ธ๊ณ  ํƒญ๋ทฐ ์•ˆ์— ๋“ค์–ด๊ฐˆ ๋ทฐ๋“ค์„ ๋„ฃ์œผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

TabView {
          View1()
          View2()
          View3()
          ...
        }

TabView Item


ํ•˜์ง€๋งŒ ์•„๋ž˜์™€ ๊ฐ™์ด ์„ค์ •ํ•˜๋ฉด ์•„์ง ํƒญ๋ทฐ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๋Š”๋ฐ์š”.

 

        TabView {
            LoginView()
            HelloView()
            SettingView()
        }


์ด์œ ๋Š” ์ด๋ฏธ ํƒญ๋ทฐ๊ฐ€ ์กด์žฌํ•˜์ง€๋งŒ ํƒญ๋ทฐ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์•„์ดํ…œ์„ ์„ธํŒ…ํ•ด์ฃผ์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

 



๊ณ ๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํƒญ์•„์ดํ…œ์˜ ํ…์ŠคํŠธ์™€ ์ด๋ฏธ์ง€๋ฅผ ์„ธํŒ…ํ•ด์ฃผ์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค.

 

   TabView {
            LoginView()
                .tabItem({
                    Image(systemName: "arrow.right.circle.fill")
                    Text("Login")
                })
            HelloView()
                .tabItem {
                    Image(systemName: "person.crop.circle")
                    Text("Hello")
                }
            SettingView()
                .tabItem {
                    Image(systemName: "gearshape")
                    Text("Setting")
                }
        }


์„ธํŒ…ํ•ด์ฃผ๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ํƒญ๋ทฐ๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์„ธํŒ…๋œ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 


Selection


ํƒญ๋ทฐ์˜ ํŠน์ • ์•„์ดํ…œ์„ ๋ˆŒ๋ €์„ ๋•Œ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” ์ƒ์„ฑ์ž๋กœ selection์ด ์žˆ๋Š”๋ฐ์š”.

๊ณต์‹ ๋ฌธ์„œ๋ฅผ ํ™•์ธํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ๋ฐ”์ธ๋”ฉ์„ ํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 


๋˜ํ•œ ๊ฐ View์—๋Š” tag๋ฅผ ๋‹ฌ ์ˆ˜ ์žˆ๋Š”๋ฐ์š”.

์ด ํƒœ๊ทธ์™€ selection์„ ์ด์šฉํ•ด ๋ช‡ ๋ฒˆ์งธ ํƒญ์•„์ดํ…œ์ด ์„ ํƒ๋˜์—ˆ๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

selection์— Binding ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด์„œ ์ ์šฉํ•ด์•ผ ํ•˜๊ฒ ์ฃ ?

@State ๋ณ€์ˆ˜๋กœ ๊ฐ ๋ทฐ์˜ ์ธ๋ฑ์Šค๋ฅผ ์ €์žฅํ•ด์ค๋‹ˆ๋‹ค.

 

 @State var index = 0
    
    var body: some View {
        TabView(selection:$index) {
            LoginView()
                .tabItem({
                    Image(systemName: "arrow.right.circle.fill")
                    Text("Login")
                })
                .tag(0)
            HelloView()
                .tabItem {
                    Image(systemName: "person.crop.circle")
                    Text("Hello")
                }
                .tag(1)
            SettingView()
                .tabItem {
                    Image(systemName: "gearshape")
                    Text("Setting")
                }.tag(3)
        }


ํƒญ๋ทฐ์˜ ์•„์ดํ…œ์„ ๋ˆ„๋ฅด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์•„์ดํ…œ ์ธ๋ฑ์Šค์— ๋งž๊ฒŒ ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค.

 


๋‹ค๋ฅธ View์—์„œ ํƒญ๋ทฐ ์ธ๋ฑ์Šค ์ ‘๊ทผํ•˜๊ธฐ


๋งŒ์•ฝ ์‹œ์ž‘ํ•˜๋Š” ๋ทฐ์—์„œ ๋กœ๊ทธ์ธ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ๋กœ๊ทธ์ธ ํ™”๋ฉดํƒญ์„ ์‹œ์ž‘์œผ๋กœ,

ํ—ฌ๋กœ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ํ—ฌ๋กœ ํ™”๋ฉดํƒญ์„ ์‹œ์ž‘์œผ๋กœ ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ• ๊นŒ์š”?

๋‹น์—ฐํžˆ ํƒญ๋ทฐ๋กœ ์ด๋™ํ•  ๋•Œ ์–ด๋– ํ•œ ๊ฐ’์„ ํƒญ๋ทฐ ํ™”๋ฉด์— ์ „๋‹ฌํ•ด ์ค˜์•ผ๊ฒ ์ฃ ?

๋ฐฉ๋ฒ•์€ ํ™”๋ฉด ์ด๋™ ์‹œ์— ํƒญ๋ทฐ ํ™”๋ฉด์— ์žˆ๋Š” @State var index ๋ณ€์ˆ˜๋ฅผ ์ „๋‹ฌํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

	NavigationLink(destination: TabViewTest(index: 0)) {
 		Text("Go LoginView")
	}
                
	NavigationLink(destination: TabViewTest(index: 1)) {
		Text("Go HelloView")
	}

 

 


 

ํƒญ๋ทฐ ์•ˆ ์•„์ดํ…œ์—์„œ ๋‹ค๋ฅธ ํƒญ๋ทฐ ์ธ๋ฑ์Šค๋กœ ์ด๋™ํ•˜๊ธฐ


๊ฐ ๋ทฐ์— ๋‹ค์Œ ํ™”๋ฉด์˜ ์ธ๋ฑ์Šค๋ฅผ ๋‹ด์„ @Binding ๋ณ€์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๊ณ , ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์›ํ•˜๋Š” ์ธ๋ฑ์Šค๋ฅผ ์„ค์ •ํ•ด์ฃผ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

 

struct LoginView: View {
    @Binding var goIndex:Int
    var body: some View {
        Button("Go Seting") {
            self.goIndex = 2
        }
    }
}

struct HelloView: View {
    @Binding var goIndex:Int
    var body: some View {
        Button("Go Login") {
            self.goIndex = 0
        }
    }
}

struct SettingView: View {
    @Binding var goIndex:Int
    var body: some View {
        Button("Go Hello") {
            self.goIndex = 1
        }
    }
}


ํƒญ๋ทฐ๊ฐ€ ์žˆ๋Š” ๋ทฐ๋กœ ์ด๋™ํ•ด์„œ ๊ฐ ๋ทฐ์˜ goIndex๋ฅผ @State๋กœ ๋ฐ”์ธ๋”ฉ ํ•ด์ค๋‹ˆ๋‹ค.

 

 TabView(selection:selection) {
            LoginView(goIndex:$index)
                .tabItem({
                    Image(systemName: "arrow.right.circle.fill")
                    Text("Login")
                }).tag(0)
            HelloView(goIndex:$index)
                .tabItem {
                    Image(systemName: "person.crop.circle")
                    Text("Hello")
                }.tag(1)
            SettingView(goIndex:$index)
                .tabItem {
                    Image(systemName: "gearshape")
                    Text("Setting")
                }.tag(2)
        }


์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๊ฐ ์•„์ดํ…œ์—์„œ ๋‹ค๋ฅธ ํƒญ ์ธ๋ฑ์Šค๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 


์•ก์„ผํŠธ ์ปฌ๋Ÿฌ ๋ฐ”๊พธ๊ธฐ

 

 TabView(selection:selection) {
        ...
        }
        .accentColor(.purple)


์•ก์„ผํŠธ ์ปฌ๋Ÿฌ๋ฅผ ์„ค์ •ํ•ด์ฃผ๋ฉด ํƒญ๋ทฐ ์•ˆ ์•„์ดํ…œ์˜ ์ƒ‰ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํƒญ๋ทฐ ์•ˆ์— ์žˆ๋Š” ๋ทฐ์˜ ๋ฒ„ํŠผ ์ƒ‰ ๋“ฑ๋„ ๋ฐ”๋€Œ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

 


ํƒญ๋ทฐ ๋ฐฑ๊ทธ๋ผ์šด๋“œ ์ƒ‰ ๋ฐ”๊พธ๊ธฐ

 

  TabView(selection:selection) {
           ...
        }
        .accentColor(.purple)
        .onAppear {
            UITabBar.appearance().backgroundColor = .black
        }


onAppear ๋ฉ”์†Œ๋“œ์™€ UIKit์„ ์ด์šฉํ•˜์—ฌ ํƒญ๋ทฐ์˜ ๋ฐฑ๊ทธ๋ผ์šด๋“œ ์ƒ‰์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

 


์„ ํƒ๋˜์ง€ ์•Š์€ ํƒญ๋ทฐ ์•„์ดํ…œ ์ƒ‰ ๋ฐ”๊พธ๊ธฐ


์œ„ ํ™”๋ฉด์—์„œ ๋ฐฐ๊ฒฝ์ƒ‰์„ ๋ฐ”๊พธ๋‹ˆ ๋‹ค๋ฅธ ์•„์ดํ…œ ์•„์ด์ฝ˜์ด ์ž˜ ์•ˆ๋ณด์ด์ฃ ?

์„ ํƒ๋˜์ง€ ์•Š์€ ์•„์ดํ…œ์˜ ์ƒ‰์ด ์ž˜ ๋ณด์ด๋„๋ก ์„ค์ •ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋ฐ”๋กœ ์ด๊ฒƒ ๋˜ํ•œ UIKit์˜ UITabBar๋ฅผ ์ด์šฉํ•˜์—ฌ ์„ ํƒ๋˜์ง€ ์•Š์„ ์•„์ดํ…œ์˜ ํ‹ดํŠธ์ปฌ๋Ÿฌ๋ฅผ ์„ค์ •ํ•ด์ค๋‹ˆ๋‹ค.

 

init() {
        UITabBar.appearance().unselectedItemTintColor = UIColor.white
}

 


์˜ค๋Š˜์€ ์ด๋ ‡๊ฒŒ SwiftUI์˜ ํƒญ๋ทฐ์— ๋Œ€ํ•ด์„œ ์•Œ์•„ ๋ณด์•˜๋Š”๋ฐ์š”.

์ƒ๊ฐ๋ณด๋‹ค ํƒญ๋ทฐ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์ด UIKit์— ๋น„ํ•ด ์‰ฝ๊ณ  ๊ฐ„๋‹จํ•ด์„œ ๋†€๋ž์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ SwiftUI๋ฅผ ์ž˜ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•ด์„  UIKit์˜ ๊ธฐ๋ณธ ์›๋ฆฌ๋ฅผ ์•Œ์•„์•ผ ๋” ๋””ํ…Œ์ผํ•œ ๋ถ€๋ถ„์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ๋„ ์•Œ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

ํ˜น์‹œ๋ผ๋„ ํ‹€๋ฆฐ ์ ์ด๋‚˜ ๊ถ๊ธˆํ•˜์‹  ์ ์ด ์žˆ๋‹ค๋ฉด ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์„ธ์š”!

728x90
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€