해당 글에서는 XIB에 대해서 이해를 하고 이를 통해 파일을 생성하고 페이지 간의 이동방법에 대해서 공유합니다.
1) XIB(XML Interface Builder)
💡 XIB(XML Interface Builder)란?
- iOS 애플리케이션에서 사용자 인터페이스를 디자인하고 구성하기 위한 통합 개발 환경입니다. XIB를 사용하여 개발자는 스토리 보드와 같은 인터페이스 디자인 및 개발을 수행할 수 있습니다. - XIB는 XML 기반의 파일 형식으로 ‘NIB 파일’로 컴파일되어 iOS 디바이스에서 로드됩니다.
💡 NIB(Next Interface Builder)란?
- 인터페이스 디자인을 위한 시각적인 요소들과 그들의 역할을 정의한 객체들을 포함하는 바이너리 파일입니다. - 이 파일들은 '앱 번들의 리소스 디렉토리에 저장'되며 실행 시점에 로드되어 화면에 표시됩니다.
[참고] Swift UI의 종류
분류
XIB
Storyboard
SwiftUI
파일 확장자
.xib
.storyboard
.swift
호환성
iOS 2.0+
iOS 5.0+
iOS 13+
레이아웃
개별 파일
개별 파일
코드 기반
인터페이스
드래그 앤 드롭
드래그 앤 드롭
선언적
미리보기
사용 불가
Xcode 11+에서 사용 가능
Xcode 11+에서 사용 가능
재 사용성
여러 뷰에서 재사용 가능
여러 뷰에서 재사용 가능
여러 뷰에서 재사용 가능
러닝 커브
쉽게 배울 수 있음
중간 정도의 학습 곡선
높은 학습 곡선
성능
Storyboard보다 빠름
XIB보다 느림
둘보다 빠름
[참고] Storyboard, SwiftUI를 기반으로 구성한 형태는 아래의 글을 참고하시면 도움이 됩니다.
💡 Xib를 이용하는 프로젝트에서 하나의 세트로 구성되는것이 .xib 파일, UIView, UIViewController로 하나의 세트로 구성이 됩니다.
1. 구성요소에 대한 이해
💡 XIB(XML Interface Builder)란?
- XIB를 사용하여 개발자는 스토리 보드와 같은 ‘인터페이스 디자인’ 및 개발을 수행할 수 있습니다.
💡 View(UIView)란?
- 인터페이스의 ‘기본요소’를 관리하며 모든 뷰에 대한 ‘레이아웃’과 ‘이벤트 처리’를 담당합니다.
💡 ViewController(UIViewController)란?
- 화면의 라이프사이클 및 인터페이스의 ‘로직’을 관리하며 다른 뷰 컨트롤러와 함께 ‘앱의 전반적인 동작’을 조율합니다.
2. 각각 요소에 대한 설명
💡 XIB란?
- 인터페이스 ‘디자인 파일’입니다. 해당 파일은 개발자가 앱의 뷰 계층 구조를 만들기 위해 사용됩니다.
💡 View(UIView)란?
- 화면을 구성하는 뷰의 기본 클래스를 의미하며 모든 뷰에 대한 ‘레이아웃’과 레이아웃의 ‘이벤트 처리’를 담당합니다. 예로는 애니메이션, 그리기, 그림자, 터치 이벤트 등의 다양한 기능을 제공합니다.
💡 ViewController(UIViewController)란?
- UIView에서 처리된 이벤트들을 수신하고 데이터 처리, 화면 간의 전환을 담당합니다.
3. 구성 요소 간의 흐름도
💡 사용자의 관점에서의 흐름도는 xib → UIView → UIViewController 순으로 전달이 되어서 UIViewController → UIView → xib로 반환을 받습니다.
1. 사용자는 xib 파일을 통해 화면이 보여집니다. 2. 사용자는 특정 행동을 위해 xib 파일을 선택하면 매핑된 UIView로 이벤트 처리가 수행됩니다. 3. 이벤트 처리가 완료된 뒤 UIViewController에서 이벤트를 수신하여 데이터 처리 혹은 화면 간의 전환을 수행합니다.
💡 UIView를 제외하고 구성이 가능합니다. 💡 xib → UIViewController 순으로 데이터가 전달되어서 UIViewController → .xib로 반환을 받습니다.
- 사용자는 xib 파일을 통해 화면이 보여집니다.사용자의 특정 행동을 통해 xib 파일을 선택하면 매핑된 UIViewController에서 이벤트 처리와 함께 처리하고 데이터 처리 혹은 화면 간의 전환을 수행합니다.
[ 더 알아보기 ]
💡 UIView 없이 UIViewControler만으로 앱을 개발하는 경우 어떻게 되는가?
- 처리가 가능하지만 UIView가 없을 경우 사용자 인터페이스를 표시할 수 없기 때문에 UIViewController에서 데이터를 처리하고 표시해 주는 로직을 모두 작성해야 합니다.
- 이는 코드의 복잡도를 증가시키고 유지보수를 어렵게 만들 수 있습니다. 그러므로, UIView를 사용하여 앱의 사용자 인터페이스를 구성하고 UIViewController와 연결하여 데이터를 처리하는 것이 일반적인 방법입니다.
3) 파일 구성 -1 : UIView를 제외한 형태(xib, UIViewController)
1. User Interface - ‘View’을 선택하여 파일을 생성합니다 : Xib 파일 생성
💡 TempView.xib 파일명으로 파일을 생성해 주었습니다.
2. Source - ‘Cocoa Touch Class’을 선택하여 파일을 생성합니다. : UIViewController 파일 생성
💡 해당 파일을 생성할 때 ‘Subclass of’ 속성 값으로 ‘UIViewController’를 선택하여 생성합니다.
3. xib 파일과 UIViewController 화면을 매핑합니다 : xib 파일선택 - File’s Owner - Class 값을 생성한 ViewController와 연결한다.
3) 파일 구성 -2 : UIView를 포함하는 형태(xib, UIView, UIViewController)
💡 해당 파일을 생성할 때 ‘Subclass of’ 속성 값으로 ‘UIView’를 선택하여 생성합니다.
2. [Xib 생성] User Interface - ‘View’을 선택하여 파일을 생성합니다.
💡 TempView.xib 파일명으로 파일을 생성하였습니다.
3. [UIViewController 생성] Source - ‘Cocoa Touch Class’을 선택하여 파일을 생성합니다.
💡 해당 파일을 생성할 때 ‘Subclass of’ 속성 값으로 ‘UIViewController’를 선택하여 생성합니다.
4. XIB UI 화면과 View를 연결합니다.
💡 TemView.xib 파일에서 File's Owner - Class명을 UIView 명으로 지정합니다.
5. Adjust Editor Options 버튼 - Assistant 버튼을 누릅니다.
6. 생성된 뷰를 ‘ctrl’ 버튼을 누른 상태에서 드래그 앤 드롭합니다.
7. View와 연결 변수를 생성합니다
💡 해당 부분에서 주의해야 할 점은 뷰에서 지정한 이름과 ‘동일한 이름’으로 이름을 지어야 합니다.
8. 잘 연결됨을 확인하였습니다.
4) 페이지 이동
💡 페이지 이동에는 최초 AppDelegate의 시작화면에서 이동하는 방법과 페이지에서 페이지로 이동하는 방식이 존재합니다.
1. AppDelegate에서 페이지 이동 : UINavigationController 이용
💡 UINavigationController 란?
- iOS에서 화면을 스택 형태로 관리할 때 사용되는 컨트롤러입니다. 즉, 다음 화면으로 이동할 때 이전 화면을 스택에 쌓아두고, 이전 화면으로 돌아갈 때 스택에서 꺼내서 보여주는 방식으로 화면을 관리합니다. - 이를 통해 앱 내에서 여러 화면 간의 이동을 쉽게 구현할 수 있습니다.
import UIKit
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
internal var window: UIWindow?
func application(
_: UIApplication,
didFinishLaunchingWithOptions _: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
// Override point for customization after application launch.
let window = UIWindow(frame: UIScreen.main.bounds)
window.rootViewController = buildTempViewController()
window.makeKeyAndVisible()
self.window = window
return true
}
/**
* TempViewController를 호출합니다
*/
private func buildTempViewController() -> UIViewController{
let tempViewController = TempViewController()
let navViewController = UINavigationController(rootViewController: tempViewController)
if #available(iOS 11.0, *) {
navViewController.navigationBar.prefersLargeTitles = true
} else {
navViewController.navigationBar.isTranslucent = false
}
return navViewController
}
}
2. 페이지 간의 이동 : NavigationController 이용
💡 self.navigationController 란?
- 현재 UIViewController에 연결된 NavigationController 객체를 의미합니다. 이 객체를 사용하면 다른 ViewController와의 화면 전환이나 페이지 이동을 쉽게 구현할 수 있습니다.
