Swift) UITabBarController와 TabView의 차이점

UITabBarController와 TabView의 차이점

코드 비교

• UIKit

import UIKit

class FirstViewController: UIViewController {}
class SecondViewController: UIViewController {}

class TabBarController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let firstViewController = FirstViewController()
        firstViewController.tabBarItem = UITabBarItem(
            title: "첫번째 화면",
            image: UIImage(systemName: "person"),
            tag: 0
        )

        let secondViewController = SecondViewController()
        secondViewController.tabBarItem = UITabBarItem(
            title: "두번째 화면",
            image: UIImage(systemName: "person"),
            tag: 1
        )

        viewControllers = [firstViewController, secondViewController]
    }
}

• SwiftUI

import SwiftUI

struct FirstView: View {
    var body: some View {
        Text("첫번째 탭")
    }
}

struct SecondView: View {
    var body: some View {
        Text("두번째 탭")
    }
}

struct SampleTabView: View {
    var body: some View {
        TabView {
            FirstView()
                .tabItem {
                    Image(systemName: "person")
                    Text("첫번째 화면")
                }
            SecondView()
                .tabItem {
                    Image(systemName: "person")
                    Text("두번째 화면")
                }
        }
    }
}

• 두 코드를 비교해보면 SwiftUI가 UIKit에 비해 좀 더 직관적이고 읽는 순서대로 구현이 되어 알아보기 쉽다.

TabView 구현

import SwiftUI

struct MainTabView: View {
    var body: some View {
        TabView {
            Text("Home") // 각각 넣으면 유지보수의 어려움이 있기 때문에 별도의 enum으로 정의를 해둔다.
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            Text("Ohter")
                .tabItem {
                    Image(systemName: "ellipsis")
                    Text("Other")
                }
        }
    }
}

struct MainTabView_Previews: PreviewProvider {
    static var previews: some View {
        MainTabView()
    }
}

 

• 이렇게 바로 TabView에 각각 넣는 코드는 유지보수에 그닥 좋지 못해서 따로 enum을 정의해서 tabItem을 넣어주겠습니다.

import SwiftUI

enum Tab {
    case home
    case other
    
    // associate value : enum의 변수를 바로 리턴 시키는 것
    var tabTextItem: Text {
        switch self {
        case .home: return Text("Home")
        case .other: return Text("Other")
        }
    }
    
    var imageItem: Image {
        switch self {
        case .home: return Image(systemName: "house.fill")
        case .other: return Image(systemName: "ellipsis")
        }
    }
}

struct MainTabView: View {
    var body: some View {
        TabView {
            Text("Home") // 각각 넣으면 유지보수의 어려움이 있기 때문에 별도의 enum으로 정의를 해둔다.
                .tabItem {
                    Tab.home.imageItem
                    Tab.home.tabTextItem
                }
            Text("Ohter")
                .tabItem {
                    Tab.other.imageItem
                    Tab.other.tabTextItem
                }
        }
    }
}

struct MainTabView_Previews: PreviewProvider {
    static var previews: some View {
        MainTabView()
    }
}

• enum은 따로 swift 파일을 만들어 넣어주면 더 깔끔한 코드를 작성할 수 있다.