[ios] TableViewController의 활용

Cobugi·2021년 9월 15일

iOS swift

ios

목록 보기

2/8

TableViewController 사용하기

셀 찍기
셀 선택

스토리보드 설정

네비게이션 컨트롤러를 이용하기 위해서 추가해준다
테이블 뷰 컨트롤러 또한 추가한다
루트 뷰 컨트롤러를 테이블 뷰 컨트롤러로 지정한다
테이블 뷰 컨트롤러의 클래스를 TableViewController로 설정

TableViewController.swift

UITableViewController를 상속받는다

확인

이상태로 실행 시키면 다음과 같이 비어있는 테이블이 나온다

Cell 만들기

새로운 파일을 생성할건데 Cocoa Touch Class를 선택하고
다음과 같이 설정하고 Next

그러면 두개의 파일(.swift, .xib)이 생겼다
스토리보드로 가서 Table View Cell의 클래스를 TableViewCell로 지정

Cell 꾸미기

새로 생긴 xib 파일을 선택하면 cell을 꾸밀 수 있는 스토리보드 같이 생긴 화면이 나온다
셀 높이가 좀 작은 것 같아서 height을 80으로 주고 시작하겠다

여기서부터는 마음대로 꾸미면 된다

나는 이렇게 만들었다

TableViewCell.swift

나중에 cell에 있는 라벨의 text를 바꾸기 위해
@IBOutlet 변수로 만들어준다

테이블 뷰에 만들어놓은 셀 찍기

테이블 뷰에서 제일 중요한것
- 누구를(어떤 셀을?) : numberOfRowsInSection -> Int
- 몇 개(몇 줄이나?) : cellForRowAt -> cell

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10 // 임시로 10개만 찍어보자
    }
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    	// dequeueReusableCell : 입력한 identifier의 cell을 반환해준다
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") else { return UITableViewCell() }
        return cell // 반환은 cell로
    }

지금까지는 찍기 위해 준비한 것이다
viewDidLoad에 찍어줘야한다
우리가 만들었던 xib 파일을 UINib로 만들고
tableView에 등록(찍기)해준다

확인

옵션(셀 높이)

셀의 높이들이 좁은 것 같다
셀의 높이를 변경하는 함수가 있다

확인

셀 제목 바꾸기

지금까지는 각자 셀의 이름이 반복되어 동일하게 나왔는데 이를 동적으로 만들어보겠다
위에서 (어떤 셀을?) 했던 부분에서
어떤 셀인지 지정했었는데 이를 TableViewCell.swift에 있는 클래스로 다운캐스팅을 하겠다

이렇게 하면 다운캐스팅한 클래스(TableViewCell)에서 지정한 변수들에 접근할 수 있다
여기서 cell을 TableViewCell이라고 생각하면 된다
TableViewCell의 변수들에 접근할 수 있으므로 titleLabel의 text를 변경해보자
indexPath.row : row의 인덱스 값이다

확인

응용

임시로 10개를 찍었지만 이제는 주어진 데이터를 찍어보자
몇 개를 찍을까? => return animalData.count

더 응용

데이터의 정보까지 주어졌다

당황하지 않고 위에서 했던 것처럼
- 몇 개를 찍을까? => 개수는 배열의 count이고
- 무엇을 찍을까? => 이것도 동일한데 titleLabel만 Animal[indexPath.row].name로 지정

셀 선택(1)

셀을 선택했을 때 사진과 상세 정보를 보여주고 싶다
셀을 선택했을 때 무엇을 할지 정하는 함수가 있다 : didSelectRowAt

상세 정보 뷰 컨트롤러를 만들자 (DetailViewController)

상세 정보를 나타낼 라벨들을 아울렛 변수로 만든다

이제 didSelectRowAt 함수 안에 내용을 써보자
- 먼저 스토리보드를 가져오고
  - let storyboard = UIStoryboard(name: "Main", bundle: nil)
- 가져온 스토리보드에서 DetailViewController를 가져와야한다(DetailViewController를 인스턴스화(instantiateViewController) 하고 DetailViewController에 있는 클래스로 다운캐스팅한다)
  - guard let detailViewController = storyboard.instantiateViewController(identifier: "DetailViewController") as? DetailViewController else { return }
- 그럼 이제 detailViewController로 DetailViewController에 있는 변수를 사용할 수 있다
- 단, 라벨의 텍스트를 바로 바꿀수는 없고 다른 변수로 받아서 사용하자
- 전달하는 데이터의 타입이 Animal이므로 데이터를 받을 변수를 하나 만들자
- 데이터 전달
- 상세 정보 뷰로 이동(navigationController?.pushViewController)