맛집 소개 앱 만들기 [1]

이번에는 포스팅 했던 글들의 내용을 위주로 앱을 만들어보겠습니다.

총 3개의 단계로 이루어지며, 처음부터 만들어가는 과정이 아닌

어느정도 완성된 결과물에 대한 순서를 정리하며 복습하는 목적으로 글을 작성한다는 점 양해바랍니다.

---

Main.storyboard

 

첫 번째 씬으로 나올 ViewController에 TableView를 생성하고 TableView Cell을 추가했습니다.

TableView Cell의 Identifier를 "cell"로 지정한 상태이며, 

ViewController에 대해 TableView에 dataSource와 Delegate를 Outlets으로 연결시켰습니다.

( TableView를 선택하여 ViewController로 드래그 앤 드롭하여 설정할 수 있습니다. )

 

 

---

 

ViewController.swift

 

다음은 코드 작성입니다.

우선 TableView를 ViewController.swift에 아웃렛으로 연결시키고,

CellIdentifier에 대한 값을 초기화와 동시에 상수로 선언해주겠습니다.

 

 

그리고 ViewController 클래스에 UITableViewDataSource와 UITableViewDelegate를 프로토콜로 채택하겠습니다.

 

 

그럼 UITableViewDataSource에 대한 필수 메서드를 작성하라는 경고가 나타납니다.

경고가 나타나면 Fix 버튼을 눌러 자동완성으로 작성해주시면 됩니다.

 

 

 해당 코드가 작성되었는데,

일단 배열을 먼저 생성해야 코드를 작성 시킬 수 있으므로

이 상태로 두고 배열부터 생성하겠습니다.

---

 

저는 섹션에 대해 구분을 음식점의 분류(한식, 일식, 중식, 등,,)로 나누고 싶어 방법을 찾던 중

중첩 배열을 사용한 2차원 배열을 통해 섹션을 여러개로 나누는 방법을 선택했습니다.

data라는 배열을 생성하고 배열의 값을 음식점 이름으로 초기화 시켰습니다.

 

 

그리고, 섹션별로 타이틀을 보이게 하고싶어서 헤더 이름을 지정해 주는 메서드를 작성했습니다.

section의 index값을 case로 나누어 문자열로 리턴을 했습니다.

---

다시 UITableViewDataSource 필수 메서드로 돌아와 코드를 작성해주겠습니다.

 

[ 45 ~ 48 ]

섹션에 입력된 값의 개수를 표시하는 메서드로,

numberOfRowsInSection의 section 값을 받아와 정수형으로 반환해줍니다.

지금은 data배열의 섹션의 수 만큼 리턴하게 설정한 상태입니다.

 

[ 50 ~ 56 ]

테이블 뷰에 사용될 cell을 반환해 주는 메서드로,

cell에 저장할 값을 설정하고 해당 값을 불러와 textLabel이나 imageView와 같은 형태로 반환시켜줍니다.

지금은 data배열의 인자 값을 textLabel에 text 값으로 저장하여 TableViewCell로 출력합니다.

 

numberOfRowsInSections 메서드는 섹션의 수를 저장하는 역할을 하며, data배열의 섹션 수를 저장하고 있습니다.

 

 

---

실행결과

 

그럼 실행을 한 번 해보겠습니다.

제가 의도한대로 섹션별로 나뉘어 화면에 출력되고 섹션 헤더의 타이틀도 생겼습니다.

하지만 섹션별 헤더 타이틀이 배경색에 가려져 잘 안보이는 상태입니다.

배경을 흰색으로 다시 바꾸면, 전체적인 UI가 밋밋하게 느껴질 것 같으므로, 헤더 타이틀의 UI를 변경하겠습니다.

 

---

메서드와 4줄의 소스코드만 작성해주시면 되겠습니다.

 

바로 실행해보겠습니다.

아까보다 훨씬 눈에 잘 보입니다.

글자 색, 왼쪽 정렬, 크기와 폰트체에 대해 설정을 했는데,

섹션 헤더 타이틀이 한글로 되어있어 폰트체는 적용되지 않은것 같습니다.

---

이번 포스팅에서 준비한 내용은 여기까지 입니다.

지금까지의 단계로는 섹션에 대한 반응이 없는 정적인 테이블 뷰만 구현한 상태입니다.

다음 포스팅에서는 섹션 항목에 대한 씬으로 넘어가는 기능과 MapKit을 활용한 음식점의 위치까지 구현해보겠습니다.