iOS) 맛집소개 | Table View 개념

유재우·2022년 1월 18일

2022 iOS 앱 개발자 워크숍

목록 보기

9/15

Table View 개념 공부

Table View 생성

Table View가 꽉차게 오토레이아웃 설정

Table View 아울렛 변수 설정

UITableViewDelegate, UITableViewDataSource 프로토콜 선언 후 필수 메서드 생성

테이블의 섹션과 row, cell에 대한 설명
영상 23:11초에 이미지를 캡쳐해서 사용했음

필수 메서드 완성

행 마다 행의 인덱스 값을 출력하게 설정

섹션 관련 함수의 리턴 값을 바꾼만큼 변경된 모습

이해를 바탕으로 한 주석 생성

섹션의 개수를 정하기 위한 함수 작성
이 과정에서 위에서 말했던 섹션 관련 함수가 사실은 섹션 안의 행들을 관리하는 함수였고 
방금 새롭게 작성한 함수가 섹션 관련 함수인것을 인지하였음
앞서 설정한 섹션 2개, 행 5줄이 잘 설정된 모습

UITableViewCell의 style을 subtitle로 변경하고 cell의 detailTextLabel값을 indexPath의 description값으로 설정한 모습

style값이 value1일 때

style값이 value2일 때

행(row)에 들어갈 시험용 이미지를 Assets폴더에 넣는다.

이미지 삽입 코드 추가
 cell.imageView?.image = UIImage(named: "swift.png")
깔끔하게 적용된 모습

Cell을 직접 만들기

Main.StoryBoard에서 가서 Table View Cell을 드래그해서 Table View에 넣는다.

프로토타입 셀이 생긴 모습

프로토타입 셀 하나를 디자인 해주면 모든 타입의 셀이 자동적으로 프로토타입 셀에 맞게 생성됨

Table View의 Content가 Dynamic Prototypes일 때엔 정해진 갯수 없이 디자인한 셀이 생성

Content가 Staitic Cells일 때엔 지정한 수까지만 생성

Table View Cell의 Style이 Custom인지 확인하고 Identifier를 myCell로 지정

cell을 관리할 Swift파일을 생성

Cocoa Touch Class로 생성하는 이유는 부모를 선택할 수 있어서 좋다.

MyTableViewCell의 부모 선택

생성된 모습

Swift파일과 mycell을 연결

Lable 생성 후 myCell에 꽉차게 오토레이아웃을 각각 0으로 설정

MyTableViewCell 파일에 Oulet 변수로 myLable 선언

myCell의 myLable을 변경하고 그값을 출력하는 코드 작성
let cell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath) as! MyTableViewCell 
// cell의 아이디가 "myCell"인 것을 사용
// as를 사용해서 부모를 자식으로 바꾼다. =DownCasting
cell.myLable.text = indexPath.description 
// myLable의 text를 indexPath.description로 초기화
return cell
myCell의 myLable값이 의도한대로 잘 바뀐 모습