Table View 생성하기

이번에는 Table View를 만들어보겠습니다.

---

Main.storyboard

 

View Controller에 Table View를 생성하고 Table View위에 Table View Cell을 추가하겠습니다.

 

다음은 부가적인 요소입니다.

먼저 테이블 뷰에 제약조건을 주겠습니다.

이어서 테이블 뷰를 선택한 상태로 View Controller에 드래그 앤 드롭하여 dataSource와 Delegate를 선택해줍니다.

DataSource와 Delegate는 TableView 이론 포스팅에서 다루었으니 한 번 보고오면 좋을것같습니다. :) 

마지막으로 Table View Cell을 선택하여 Attributes Inspector에 Identifier를 cell이라고 입력해주겠습니다.

---

코드 작성

 

코드 작성을 해보겠습니다.

먼저 테이블 뷰를 선택해, ViewController Class 안에 드래그 앤 드롭해 아웃렛으로 추가하겠습니다.

그리고 테이블 뷰에 담을 데이터를 배열로 작성했습니다.

 

클래스에서 데이터소스와 델리게이트를 활용할 수 있게 UITableViewDataSource와 UITableViewDelegate를 채택하겠습니다.

그럼 에러가 발생합니다.

이는 DataSource에 2개의 필수 메서드가 있기 때문입니다.

코드 작성을 통해 해결 할 수 있으며, 간편하게 Fix 버튼을 눌러 코드를 작성시키겠습니다.

 

그럼 두 가지 메서드가 생성됩니다.

위의 메서드는 테이블 뷰의 한 개의 섹션 단위마다 몇 개의 셀을 담을 것인지를 Return 해주는 메서드이고,

아래의 메서드는 각 row에 해당하는 cell을 Return 해주는 메서드입니다.

---

UITableViewDataSource에 numberOfSecions 함수에 사용될 섹션이 2개라고 알려주는 코드를 작성하겠습니다.

 

그리고 두 가지 필수 메서드를 작성해보겠습니다.

첫 번째 메서드입니다.

각 섹션에 Cell이 몇 개 들어가는지 반환해주는 메서드입니다.

이번 실습에서 두 가지 배열을 사용하였기 때문에

Switch문을 사용하여 경우별로 해당 항목을 count해 section 값으로 넘겨주게 작성하였습니다. 

 

두 번째 메서드입니다. 

테이블 뷰에 사용될 모든 cell을 반환하는 메서드입니다.

메서드의 인자값으로 IndexPath가 전달되는데, 여기서 접근자(.)를 통해 어떤 section과 row에 들어갈 cell을 원하는지

알 수 있습니다.

지금은 두 개의 section을 사용하기 때문에 삼항 연산자를 사용하였습니다.

( 3개가 넘을 경우 Switch문을 사용하는 방법이 있습니다. )

 

---

실행결과

지금까지 작성한 정도로 정적인 테이블 뷰를 구현할 수 있습니다.

많이 부족해 보이지만, 입력하고자 한 내용들이 정상적으로 출력되는 것을 확인 할 수 있습니다.

---

내용출처 = https://etst.tistory.com/103