[ iOS ] 여러 개의 뷰 넣기 - 탭 바 컨트롤러

공부한 내용을 정리한 글입니다.

 

문제

탭 바 컨트롤러를 이용해 여러 개의 뷰를 넣어라. 뷰의 특징에 맞게 탭 바 아이콘도 수정하라. 더하여 이미지뷰에 이미지를 할당하고, 버튼 클릭시 해당 뷰로 전환되도록 구현하라.

 

 

구현 순서

1. 레이아웃 구성
2. 탭 바 컨트롤러 스토리 보드에 추가
3. 탭 바에 뷰 추가
4. 탭 바 아이콘 수정
5. 버튼으로 뷰 전환 구현

 

 

최종 결과

 

 

 

 

 

 

 

 

 

 

 

---

 

1. 레이아웃 구성 (최종적으로 볼 수 있는 레이아웃)

 

 

ImageView에 사진 할당하기

ImageView를 클릭한 후 오른쪽 인스펙터 영역에서 [Attributes inspector]의 image를 통해 원하는 이미지를  코드 수정없이 이미지 뷰에 할당할 수 있다. 

 

 

 

 

 

 

 

 

 

 

---

2. 탭 바 컨트롤러 스토리 보드에 추가

 

탭 바 컨트롤러 Tap Bar Controller

여러 개의 뷰와 더불어 뷰를 선택해 이동할 수 있게 해주는 컨트롤러

@interface UITabBarController : UIViewController
A container view controller that manages a multiselection interface, where the selection determines which child view controller to display.

A container view controller that manages a multiselection interface, where the selection determines which child view controller to display.

다중 선택 인터페이스를 관리하는 컨테이너 뷰 컨트롤러이다. 선택에 따라 어떤 자식 뷰 컨트롤러를 보여줄지 결정한다.

 

 

@interface UITabBar : UIView
A control that displays one or more buttons in a tab bar for selecting between different subtasks, views, or modes in an app.

 

앱의 다른 하위 작업, 뷰 또는 모드 중 선택하기 위해 탭 바에 한 개 이상의 버튼을 보여주는 컨트롤이다.

 

 

 

 

스토리보드의 아이폰 화면 전체를 드래그한 후 메뉴에서 [ Editor/ Embed in/ Tab Bar Controller ]를 선택한다.

 

 

 

 

 

 

 

 

 

 

---

 

3. 탭 바에 뷰 추가

ViewController 를 추가하여 뷰를 생성하거나 기존에 생성했던 프로젝트를 복사하여 뷰를 생성할 수 있다.

ViewControllew 를 추가하여 뷰를 생성할 경우, UIVoewController 클래스를 상속받는 class를 하나 생성하여 ViewController의 Custom Class로 지정한다.

기존 프로젝트에서 뷰를 가져오는 경우, 프로젝트 파일의 'ViewController.swift' 파일을 이름 변경 후 복사 붙여넣기 한다. 그 후 해당 프로젝트 Main.storyboard를 열어 ViewController가 모든 포함되도록 드래그한 후 복사 붙여넣기 한다. 이때 아까 'ViewController.swift' 파일 이름을 변경했기 때문에, 복사해온 뷰의 Custom Class로 변경한 이름대로 설정한다. 또한 해당 파일 속 클래스의 이름도 파일 이름으로 변경해야 한다.

 

사용할 뷰를 모두 생성했으면, 'Tab Bar Controller'라고 적혀있는 뷰에 마우스 오른쪽 버튼을 클릭한 후 뷰 하나씩 연결한다.

 

 

 

 

 

 

 

 

 

 

 

 

---

4. 탭 바 아이콘 수정

탭 바에 있는 아이콘을 클릭한 뒤 오른쪽 인스펙터 영역의 [Attributes inspector]에서 System Item을 Custom에서 뷰의 목적에 맞게 변경하라.

 

+ 오른쪽 인스펙터 영역의 [Attributes inspector]에서 Bar Item을 통해 임의로 아이콘과 타이틀을 수정할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

---

5. 버튼으로 뷰 전환 구현

버튼을 레이아웃에 배치한 후 버튼을 위한 액션함수를 생성한다.

그 후 버튼 클릭 시 원하는 뷰로 전환할 수 있도록 tabBarcontroller의 selectedIndex 프로퍼티에 화면 번호를 할당한다. 여기서 화면 번호는 탭 바 아이템의 순서이다. 방향은 왼쪽에서 오른쪽으로, 0부터 시작한다.

selectedIndex 프로퍼티에 원하는 뷰의 번호를 할당할 경우 해당 뷰로 뷰 전환이 일어난다.

 

var selectedIndex: Int { get set }
The index of the view controller associated with the currently selected tab item.
This property nominally represents an index into the array of the viewControllers property. 

현재 선택된 탭 아이템과 연관된 뷰 컨트롤러의 번호

이 프로퍼티는 명목상 뷰 컨트롤러 프로퍼티의 배열 속 번호를 나타낸다.

 

import UIKit

class TabViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func btnMoveImageView(_ sender: UIButton) {
        //이 숫자는 탭 바 아이템 순서이다. 0~
        tabBarController?.selectedIndex = 1 //1-이미지 뷰 택으로 이동
    }
    
    @IBAction func btnMoveDatePickerView(_ sender: UIButton) {
        //이 숫자는 탭 바 아이템 순서이다. 0~
        tabBarController?.selectedIndex = 2 //2-데이트 피커 뷰 탭으로 이동
    }
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

공부 자료

Do It! 스위프트로 아이폰 앱 만들기 개정 5판
SWIFT 문서