iOS 앱에서 UI를 구현하기 위해서 몇가지 방법이 있습니다.
Code base로 할 수도 있고,
혹은 .storyBoard, .xib 파일과 같은 Interface Builder를 활용하여
구현 할 수도 있습니다.
어떤 방식이 좋다 나쁘다를 떠나서
각자의 방식에 따라 장단점이 있기 마련이죠.
Interface Builder 기반의 UI 구현을 진행 한다고 했을 때
추후 협업 시 예상치 못한 conflict 발생 우려도 있을 것이고,
conflict 해결에 있어서 code base 구현 방식과 비교했을 때
원인 파악이 쉽지 않았다는 것을 경험해보셨을 것입니다.
하지만 어떤 형태의 레이아웃으로 구현되어 있는지 확인하기 용이하며,
직관성에 있어서는 굉장히 뛰어나다는 장점 또한 가지고 있습니다.
이렇게 다른 장점과 단점들을 가지고 있으니,
다양한 방법으로 직접 구현해보는 시간을 가져볼까 하는데요!
오늘은 먼저 Story Board와 Xib를 사용해서 구현하는 방식에 대해 알아보려 합니다.
Story Board
UITableView를 ViewController에 가져와 보겠습니다.
그리고 constraints를 하단 이미지와 같이 safeArea에 맞게 적용 시키겠습니다.
우측 편집 창에서 표시되는 것들중에 Edit 버튼을 통해서
필요에 따른 간격 수정도 아래와 같이 진행 가능합니다.
Edit 버튼을 클릭하는게 아닌
제약조건 영역을 더블 클릭 했을 때
아래와 같이 디테일한 수정이 가능한 창으로 이동하기도 하죠.
드래그앤드랍을 통해 @IBOutlet 선언을 진행한다면
code로 추가적인 대응도 가능합니다.
@IBOutlet weak var tableView: UITableView!
이제 TableView의 Delegate와 DataSource를
Story Board로 지정하는 방법에 대해 알아보겠습니다.
tableView를 상단 ViewController 버튼으로 드래그 해서
dataSource와 deleagate를 지정해줍니다.
swift 파일에서 코드로도 가능합니다.
스토리보드로 진행 한다고 해서 무조건 이런식으로 delegate를 지정해주지 않아도 됩니다.
그다음 tableView의 Cell을 구현 할 차례입니다.
일반적으로 default 형태의 Cell을 사용하는 케이스는 많지 않기 때문에
Cell을 custom해서 진행한다고 가정하여 진행해보려 하는데요!
Table View Cell을 드래그 하여 tableView 내부에 위치 시키겠습니다.
그리고 Cell contentView에 imageView를 addSubView 하고
constraints를 좌측 이미지와 같이 잡아 준다면,
우측 이미지와 같이 제약 조건에 맞게 설정된 걸 볼 수 있을 것입니다.
label도 추가하여 제약 조건을 설정해볼까요?
이제 Story Board를 통해서 어느정도의 청사진은 잘 마무리 한 것 같아요.
이어서 방금 생성했던 Cell을 swift 파일로 하나 생성 해보겠습니다.
class ActorCell: UITableViewCell {
...
}
스토리보드에서 Cell 영역을 클릭하고
Class 입력란에는 ActorCell을 선택해주도록 하겠습니다.
그리고 ActorCell.swift 파일로 드래그앤드랍을 통해 @IBOutlet을 선언해보겠습니다.
이렇게 하면 @IBOutlet을 통해 Code로도 UI 관련 후처리가 가능해지죠.
class ActorCell: UITableViewCell {
@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var nameLabel: UILabel!
func configure(image: UIImage, name: String) {
imageView.image = image
nameLabel.text = name
}
}
그 다음 Cell을 재사용하기 위한 등록 절차를 보도록 하겠습니다.
스토리보드로 구현할때는 이런식으로 identifier에 입력해주기만 하면 됩니다.
그리고 register시 넘겨 주었던 CellID를 사용하여
Cell을 불러 오기 위한 작업을 cellForRowAt 메소드 내부에서 처리해준다면
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: "cellID") as? ActorCell else { return .init() }
cell.configure(....)
)
return cell
}
하단 이미지와 같이 의도한대로 Cell이 그려지는 걸 볼 수 있습니다.🙌
Xib
여기서 Cell 내부의 UI가 조금 더 복잡해지는 요건에 마주할수가 있을 것 같아요.
그럴때는 Cell을 분리시켜서 독립적으로 관리하는 방법이 있다면 참 좋을 것 같다는 생각이 드네요.
맞습니다.
Xib 파일을 따로 생성하여 구현하는 방법이 있습니다.
위에서 Story Board 내의 ViewController 내부로
TableView Cell을 드래그해서 위치시켰던 방법과는 다르게
이번에는 Xib 파일을 하나 생성해보도록 하겠습니다.
CocoaTouchClass를 선택해서 .swift 파일과 .xib 파일을 동시에 하나씩 만들도록 하겠습니다.
xib 파일을 함께 생성한다는 조건에 체크를 해주세요.
그러면 swift 파일 하나,
그리고 하단 이미지와 같은 UITableViewCell의 xib파일이 하나가 동시에 생성됩니다.
imageView와 label을 추가할껀데
위에서 진행했던 방식이랑 다를게 없으니 동일하게 진행해주세요!
스토리보드로만 구현할 당시 cell의 class를 지정해주었던 점과는 다르게
xib 파일에서는 생성할 당시 swift 파일과 xib 파일을 함께 생성했기 때문에
자동으로 class가 연결되어 있는걸 확인하실 수 있습니다.
그 다음 cell을 재사용하기 위한 등록 절차를 보도록 하겠습니다.
xib로 구현할때는 이런식으로 identifier에 입력해주고
생성했던 xib 파일 이름을 사용하여 UINib을 생성하고
위에서 입력해주었던 identifier를 사용하여 register 해주도록 합니다.
let myNib = UINib(nibName: "MyTableViewCell", bundle: nil)
tableView.register(myNib, forCellReuseIdentifier: "cellID")
그리고 register시 넘겨 주었던 cellID를 사용하여
cell을 불러 오기 위한 작업을 cellForRowAt 메소드 내부에서 처리해주면
위에서 Story Board로만 구현했을 때와 동일하게 TableView 가 노출되는 걸 보실 수 있습니다!🙌
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: "cellID", for: indexPath) as? MyTableViewCell else { return .init() }
cell.configure(....)
return cell
}