[iOS] “Bean Mobility Korea” Application (Day-4 ദ്ദി '֊' ))

어제(Day3)에 이어 오늘은

 

Profile 화면의 리스트에서 연결되는 Driving Guide 화면을 구현해 봅니다.TableView를 사용하기 위해 UITableViewDelegate과, UITableViewDataSaurce를 상속받고,이에 이어지는 수순, 애플이 배려한 자연스러운 흐름(?)에 따라 필요한 두 개의 func, numberOfRowsInSection과 cellForRowAt에서 코드를 구현해 줍니다. ̗̀(˶'ᵕ'˶) ̖́- 

---

 

1. UITableViewDelegate, UITableViewDataSaurce 상속

 

VC에서 TableView를 만든다.?그럼 기본적으로 다음의 두 Protocol(Method)를 UIVewController 옆에 추가로 상속시켜준다.

 

import UIKit

class GuideViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

 

 

2. 더미 데이터 생성

 

Model data file을 따로 빼서 화면 구성에 필요한 변수와 타입을 선언해 주고,

import Foundation

struct GuideModel {
 
    var imageName: String
    var title: String
    var addedLine: String
    
}

 

VC로 돌아와 배열로 만든 더미 데이터의 속성에 맞추어 정보를 넣어준다. 

    // 이용가이드 더미 데이터
    let guideData: [GuideModel] = [
        GuideModel(imageName: "image_1", title: "킥스탠드를 접어주세요", addedLine: "주행 전 킥스탠드를 접어주세요."),
        GuideModel(imageName: "image_2", title: "앞으로 밀어주세요", addedLine: "발로 땅을 밀어 전동킥보드를 움직이세요."),
        GuideModel(imageName: "image_3", title: "시동을 거세요", addedLine: "충분한 추진력이 생기면'주행' 버튼을 부드럽게 길게 누르세요.")
    ]

 

 

3. numberOfRowsInSection

 

numberOfRowsInSection 메소드를 통해 TableView의 섹션에 표시될 행의 수를 변환한다. 

즉, guideData라는 변수의 count 속성을 반환하여 행의 수를 결정하도록 한다. 

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {	
return guideData.count

 

그런데  이 화면의 TableView에 섹션을 두개로 나누어 사용할 것이므로,

아래와 같이 0번째 섹션의 경우와, 1번째 경우의 섹션을 경우 표시될 행의 항목 수를 반환하도록 한다.

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if section == 0 {
            return guideData.count
            
        } else if section == 1 {
            return safeData.count
        }
        return 0

 

섹션 인덱스 참고이미지

 

 

섹션을 추가했으므로, 추가된 섹션에 들어갈 더미 데이터(safeData)도 추가해준다. (자더추?)

    // 이용가이드 더미 데이터
    let guideData: [GuideModel] = [
        GuideModel(imageName: "image_1", title: "킥스탠드를 접어주세요", addedLine: "주행 전 킥스탠드를 접어주세요."),
        GuideModel(imageName: "image_2", title: "앞으로 밀어주세요", addedLine: "발로 땅을 밀어 전동킥보드를 움직이세요."),
        GuideModel(imageName: "image_3", title: "시동을 거세요", addedLine: "충분한 추진력이 생기면'주행' 버튼을 부드럽게 길게 누르세요.")
    ]
    
    let safeData: [GuideModel] = [
        GuideModel(imageName: "bean1", title: "헬멧 필수 착용", addedLine: "주행 중에는 반드시 헬멧을 착용해야 합니다."),
        GuideModel(imageName: "bean2", title: "먼저 브레이크를 테스트하세요", addedLine: "브레이크를 작동했을 때 기기가 움직여서는 안됩니다."),
        GuideModel(imageName: "bean3", title: "2인 이상 탑승 금지", addedLine: "라이더 본인 이외의 승객은 절대 함께 탑승할 수 없습니다."),
        GuideModel(imageName: "bean4", title: "음주 운전 금지", addedLine: "약물이나 술을 마신 경우 절대로 주행하지 마세요.")
    ]

 

 

4. numberOfRowsInSection

 

마찬가지로, UITableViewDataSource 프로토콜의 필수 메서드 중 하나인,

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell: 

메서드로 테이블 뷰의 각 행에 대한 셀을 아래와 같이 구성하고 반환해준다.

  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = GuideTable.dequeueReusableCell(withIdentifier: "guideList", for: indexPath) as? GuideTableViewCell else {
            return UITableViewCell ()
            }
        
        if indexPath.section == 0 {
            let content = guideData[indexPath.row]
            
            cell.guideImage.image = UIImage(named: content.imageName)
            cell.guideText.text = content.title
            cell.guideBody.text = content.addedLine
            return cell
        } else if indexPath.section == 1 {
            
            let content = safeData[indexPath.row]
            cell.guideImage.image = UIImage(named: content.imageName)
            cell.guideText.text = content.title
            cell.guideBody.text = content.addedLine
            return cell
        }
        return UITableViewCell ()
        
    }

 

 

 

tableView(_:didSelectRowAt:) | Apple Developer Documentation

 

 

일단 오늘은 여기까지.