안녕하세요 제로데이입니다!
오늘은 앱 개발할 때 자주 사용되는 테이블 뷰를 생성해보고 기본 코드를 작성해보겠습니다.
생성 및 UI
우선 프로젝트 생성하실 때 UI는 스토리보드, 언어는 스위프트로 해주시고 다른 것은 기본 설정대로 놔두시면 됩니다!
생성이 완료되셨으면 Main.storyboard를 들어가셔서 비어있는 ViewController에 TableView를 넣어줍니다.
1. 텅 빈 뷰 컨트롤러를 준비합니다.
2. 화면 우측 상단에 +버튼을 눌러주세요.
3. 검색창에 table을 검색하신 후 Table View라고 적혀있는 것을 텅 빈 뷰 컨트롤러에 마우스로 끌어당깁니다.
4. 이제 테이블 뷰를 클릭해 주시고 Auto Layout을 설정하신 뒤 우측에 테이블 뷰 세팅하는 곳을 봐주세요.
5. Prototype Cells이라고 적혀있는 곳을 1로 설정해 주세요.
스토리보드에서 사진과 똑같은 모습을 하셨으면 잘 따라오신 것입니다!
6. 스토리보드에서 셀을 클릭하고 우측에 Identifier에 TestCell이라고 작성합니다.
이제 라벨을 넣어봅시다.
7. 상단에 버튼을 눌러주세요.
8. 가장 상단에 보이는 라벨을 마우스로 끌어당겨 테이블 뷰의 셀 안으로 넣어줍니다.
셀 안에 있는 라벨에 Auto Layout만 설정해 주시면 UI는 완성입니다! 🥳
잘 따라오셨어요
이제 셀 파일 생성과 코드 작성만 하면 됩니다!
테이블뷰 셀 파일 생성
방금 만든 라벨에 문자를 넣으려면 테이블 뷰 셀 파일을 생성해야 됩니다.
파일을 생성해 봅시다.
1. 자신이 만든 폴더를 우 클릭하고 New File... 을 클릭해 주세요.
2. Cocoa Touch Class를 클릭하고 Next를 눌러주세요.
3. Class:에 TestTableViewCell을 넣고 Subclass of:는 UITableViewCell을 넣어주세요
그리고 Next를 눌려줍니다.
4. 스토리보드에서 좌측에 Table View Cell을 클릭하고, 우측 Class에 TestTableViewCell을 넣습니다.
import UIKit
class TestTableViewCell: UITableViewCell {
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
이제 TestTableViewCell에 들어가 보면 이렇게 나오실 텐데
여기서 awakeFromNib와 setSelected를 지워줍니다.
import UIKit
class TestTableViewCell: UITableViewCell {
@IBOutlet weak var GoodLabel: UILabel!
}
클래스 안에 Outlet을 설정해 주시고 스토리보드의 라벨과 연결해 주시면
테이블 뷰 파일 생성 부분은 끝입니다!
테이블 뷰 기본 구성요소 코드 작성
우선 테이블 뷰 Outlet 코드를 넣어주시고 스토리보드의 테이블 뷰와 연결해 줍니다.
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var TestTableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
}
}
이제 실행을 한번 시켜볼까요?
줄들이 여러 개가 생겼습니다.
저것이 테이블 뷰의 셀들입니다!
이제 라벨 안에 값을 넣어보겠습니다.
import UIKit
var name = ["Camila","Oliver","Daisy","Emma"]
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
@IBOutlet weak var TestTableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
TestTableView.delegate = self
TestTableView.dataSource = self
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return name.count //셀의 개수
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 50 //셀의 높이
}
internal func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "TestCell", for: indexPath) as! TestTableViewCell
cell.GoodLabel.text = name[indexPath.row]
return cell
}
}
3. var name = ["Camila","Oliver","Daisy","Emma"]
테이블 뷰 라벨에 넣을 문자열을 배열로 만듭니다.
5. class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
테이블 뷰의 내장 함수, 프로토콜을 사용하기 위해 Delegate와 DataSource를 선언해 줍니다.
11 ~ 12. TestTableView.delegate = self , TestTableView.dataSource = self
테이블 뷰가 해야 되는 역할을 현재 뷰 컨트롤러로 위임하여, 뷰 컨트롤러가 테이블 뷰의 내장 메서드, 프로토콜을 사용할 수 있습니다.
16. func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
테이블 뷰의 셀의 개수를 설정합니다.
17. return name.count
3번의 name 배열의 총개수를 반환하여 셀의 개수를 설정합니다.
21. func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
테이블 뷰의 셀의 높이를 설정합니다.
22. return 50
셀의 높이를 50으로 설정합니다.
26. internal func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
셀의 특정 위치에 값을 넣을 수 있는 내장 메서드입니다.
아까 DataSource를 뷰 컨트롤러로 위임했기 때문에 이 메서드를 사용할 수 있습니다.
27. let cell = tableView.dequeueReusableCell(withIdentifier: "TestCell", for: indexPath) as! TestTableViewCell
셀의 위치와 어떤 셀을 사용할 것인지 지정해 줍니다.
28. cell.GoodLabel.text = name[indexPath.row]
name 배열의 index를 반환하여 cell의 라벨 text에 넣습니다.
29. return cell
cell을 반환하여 내용과 위치를 특정합니다.
다음 편에는 테이블 뷰에 버튼을 만들어보고 버튼을 누르면 뷰를 전환하게 만들어보겠습니다!
오늘도 따라오시느라 너무 수고 많으셨어요.🥰
시작은 그 무엇보다 어렵지만계속해 나간다면 모든 것이 잘 될것이다. - 빈센트 반 고흐
'🔨 Xcode > 🕊 Swift' 카테고리의 다른 글
| Swift • 테이블 뷰(Table View) 버튼을 누르면 뷰 전환시키기 (2) (0) | 2021.02.27 |
|---|
댓글