[swift] 스택 뷰를 사용하여 탭 바 구성하기

01 Dec 2023

swift

탭 바는 iOS 앱에서 주요한 네비게이션 요소 중 하나입니다. 탭 바는 여러 개의 탭을 제공하고, 사용자는 탭을 선택하여 해당 화면으로 이동할 수 있습니다. 이번에는 스택 뷰를 사용하여 탭 바를 간편하게 구성하는 방법에 대해 알아보겠습니다.

스택 뷰란?

스택 뷰는 iOS 개발에 자주 사용되는 인터페이스 요소 중 하나입니다. 스택 뷰는 여러 개의 뷰를 포함할 수 있으며, 자식 뷰들이 수직 또는 수평으로 자동으로 정렬되는 기능을 제공합니다. 이를 통해 복잡한 레이아웃을 간편하게 구성할 수 있습니다.

탭 바 구성하기

먼저, 탭 바에 표시할 탭들의 뷰 컨트롤러를 생성합니다. 예를 들어, “HomeViewController”와 “SettingsViewController”라는 두 개의 뷰 컨트롤러를 생성하겠습니다.
뷰 컨트롤러를 스토리보드로 드래그하여 탭 바 컨트롤러와 연결합니다.
스택 뷰를 사용하여 탭 바를 구성하기 위해, 뷰 컨트롤러의 루트 뷰에 스택 뷰를 추가합니다.

import UIKit

class HomeViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 스택 뷰 생성
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.alignment = .fill
        stackView.distribution = .fillEqually
        
        // 탭 바 아이템 생성
        let homeTabItem = UITabBarItem(title: "Home", image: UIImage(named: "home"), tag: 0)
        let settingsTabItem = UITabBarItem(title: "Settings", image: UIImage(named: "settings"), tag: 1)
        
        // 탭 바 아이템을 이용하여 버튼 생성
        let homeButton = UIButton()
        homeButton.setTitle("Home", for: .normal)
        homeButton.setImage(UIImage(named: "home"), for: .normal)
        homeButton.addTarget(self, action: #selector(didTapHomeButton), for: .touchUpInside)
        homeButton.imageView?.contentMode = .scaleAspectFit
        homeButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: -20, bottom: 0, right: 0)
        homeButton.setTitleEdgeInsets(UIEdgeInsets(top: 0, left: -10, bottom: 0, right: 0))
        homeButton.sizeToFit()
        homeButton.tabBarItem = homeTabItem
        
        let settingsButton = UIButton()
        settingsButton.setTitle("Settings", for: .normal)
        settingsButton.setImage(UIImage(named: "settings"), for: .normal)
        settingsButton.addTarget(self, action: #selector(didTapSettingsButton), for: .touchUpInside)
        settingsButton.imageView?.contentMode = .scaleAspectFit
        settingsButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: -20, bottom: 0, right: 0)
        settingsButton.setTitleEdgeInsets(UIEdgeInsets(top: 0, left: -10, bottom: 0, right: 0))
        settingsButton.sizeToFit()
        settingsButton.tabBarItem = settingsTabItem
        
        // 스택 뷰에 버튼 추가
        stackView.addArrangedSubview(homeButton)
        stackView.addArrangedSubview(settingsButton)
        
        // 루트 뷰에 스택 뷰 추가
        view.addSubview(stackView)
        
        // 스택 뷰 오토레이아웃 설정
        stackView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            stackView.topAnchor.constraint(equalTo: view.topAnchor),
            stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        ])
    }
    
    @objc func didTapHomeButton() {
        // "Home" 버튼을 탭했을 때 실행될 코드 작성
    }
    
    @objc func didTapSettingsButton() {
        // "Settings" 버튼을 탭했을 때 실행될 코드 작성
    }
}

위의 코드는 “Home”과 “Settings” 두 개의 탭을 갖는 탭 바를 구성하는 예시입니다. 각 버튼에는 UIControl.Event.touchUpInside 이벤트가 발생했을 때 호출되는 액션 메서드가 정의되어 있습니다.

스택 뷰란?

탭 바 구성하기

참고 자료