Toy Project/One Piece (iOS)

1. List -> UITableView

개발자킹콩 2021. 1. 28. 02:55

우리는 앱을 사용하면서 데이터가 리스트형식으로 보이는 View를 많이 봐왔다.

맞다. 그거 만드는 거 배우려한다.

 

 

UITableView는 여러 아이템을  리스트 형태로 보여주기 위한 View이다.

column이 한 개로 구성된 특징이 있다. (하나의 데이터가 하나의 행을 차지한다는 의미이다.)

데이터들을 여러 행에 걸쳐서 보여줄 수 있다.

 

 

각 데이터들은  TableView Cell이라는 녀석을 통해 표현이 된다.

TableViewCell은 다양한 스타일로 표현될 수 있다.

이미 시스템에서 제공해 주는 것이 있는가 하면,

개발자가 직접 커스텀마이징을 통해서 만들 수도 있다.

 

 

TableView는 TableView Cell을 통해서 데이터를 표시하게 되는데 

여기서 중요한 것은  TableView은  Cell을 재활용해서 데이터를 보여준다.

 

100개의 데이터가 있어도 10개정도만 화면에서 보게된다.

이렇게 실제로 보여지는 Cell은 한정적이기 때문에 모든 데이터를 위해 Cell을 만들지는 않는다.

화면에 보여지는 만큼만 TableViewCell을 만들어서 재사용한다.

스크롤 때마다 만들어논 Cell 재사용해서 새로운 데이터를 표현한다.

 

 

 

아래의 그림을 보면 싹 이해된다.

 

 

위 그림처럼 TableView는 각각의 TableView Cell에 의해 데이터가 표현되는데,

100개의 데이터가 있어도 우리는 사실 폰에 보여지는 소수의 데이터만 보게된다.

그렇기에 페이지가 스크롤되어 내려가게 되면 지나간 Cell을 재사용해서 밑을 채워가며 사용한다.

 

 

 


 

다음의 프로젝트를 살펴보자

 

 

 

 

AppDelegate: app이 실행할 때 여기에 매소드들이 호출된다.

 

SceneDelegate: UI를 사용하는 거라서 이번 강의에서는 사용하지 않는다.

 

ViewController: storyboard에서 보이는 UI와 연결되어 있는 것이다.

여기서 ViewController파일을 삭제하고 BountyViewController 클래스를 갖는 파일을 생성하자.

—> 이때 UIViewController을 상속받게 하자!

이제 storyboard에서 기존의 클래스가 없어지고 새로운 클래스가 생겼으니 연결되도록 지정해주어야 한다.

 

이번 챕터의 목표는 TableView를 이용하여 각 Cell을 리스트로 구현하는 것이다.

TableView는 object library에 있다.~ (우측상단 + )

 

 

 

View를 가져오면 바로 Auto layouting을 해주는 습관을 가지자!!

아니면 잘 만들어 놓고 구조가 찌그러 질수 있으니깐~

 

Auto layout은 control을 누른상태에서 생성된 View를 부모View에 가져다 놓으면 된다.

이때 shift를 누른상태에서 누르면 다중 선택이 가능하다.

 

 

Table View의 데이터는 무엇으로 표현되는가? Cell !!!!!

Object library에서 있는 TableView Cell 가져다 놓으면 된다.