4. 스파르타 코딩 클럽 - 테이블 뷰 만들어보기

1. 새로운 뷰 컨트롤러 추가하기

1) View Controller 입력 후 드래그 앤 드랍

2) 컴파일 후 시작되는 뷰 컨트롤러 변경하는 방법 (화살표가 붙은 뷰 컨트롤러가 시작 뷰)

변경 전 - 변경 후

 

3) 원하는 뷰 컨트롤러 선택 후 우측에 있는 Is Initial View Controller 체크박스 선택

 

4) 프로젝트 파일 우 클릭 후 New File From Template 클릭 후 뷰 컨트롤러 파일 생성하기

 

5) Class 부분에 해당 컨트롤러 연결해주기

---

2. 테이블 뷰 만들기

- 스토리 보드에서 드래그 앤 드롭

• 다른 뷰들과 그리는 방법은 같습니다
• 테이블 뷰라는 기능이 있는 것입니다
• 일단 그리고 색상만 입혀봅시다

---

3. 테이블 뷰 셀 추가하기

- 스토리 보드에서 드래그 앤 드롭

• 테이블 뷰 안에 사용되는 셀 입니다
• 셀까지 넣고나면 테이블 뷰가 그려지나 봅시다

---

4. 테이블 뷰 바꾸기

• 우리가 원하는 내용을 넣어봅시다
• 우리가 원하는 그림을 그려봅시다
• 우리가 원하는 테이블 뷰를 그려봅시다
• 더 복잡한 것들은 어떻게 할 수 있을지 고민 해 봅시다

---

5. 최종 테이블 뷰

 

코드

import UIKit

class MyTableViewController: UIViewController{
    
    @IBOutlet weak var myTableView: UITableView!
    
    let friendNames: [String] = ["Henry", "Mario", "Louiz", "Key", "Peach", "Daizy", "Yoshi"]

    override func viewDidLoad() {
        super.viewDidLoad()
        myTableView.backgroundColor = .blue
        
        // myTableView를 MyTableViewController에게 위임하다, 연결되다
        myTableView.delegate = self
        myTableView.dataSource = self
    }
}


extension MyTableViewController: UITableViewDelegate, UITableViewDataSource  {
        
        // 테이블 뷰의 몇개의 줄이 들어갈건지
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return friendNames.count // 배열의 크기만큼 설정
        }
        
        // 각 셀마다 어떤 셀이 들어갈건지
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = myTableView.dequeueReusableCell(withIdentifier: "MyFirstCell", for: indexPath)
            cell.textLabel?.text = friendNames[indexPath.row]
            return cell
        }
}

 

시뮬레이터

 

---

 

[ 미션 문제 ]

하나의 테이블 뷰를 만들고, 5개의 항목을 추가하세요. 각 항목을 클릭했을 때 그 항목의 이름이 화면에 표시되도록 하세요.

 

1. Label 추가하기

 

2. IBOutlet 연결하기

 

3. 코드 작성하기

import UIKit

class MyTableViewController: UIViewController{
    
    @IBOutlet weak var myTableView: UITableView!
    @IBOutlet weak var selectedLabel: UILabel!
    
    let characters: [String] = ["Mario", "Louiz", "Peach", "Daizy", "Yoshi"]

    override func viewDidLoad() {
        super.viewDidLoad()
        myTableView.backgroundColor = .blue
        
        // myTableView를 MyTableViewController에게 위임하다, 연결되다
        myTableView.delegate = self
        myTableView.dataSource = self
    }
}


extension MyTableViewController: UITableViewDelegate, UITableViewDataSource  {
        
        // 테이블 뷰의 몇개의 줄이 들어갈건지
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return characters.count // 배열의 크기만큼 설정
        }
        
        // 각 셀마다 어떤 셀이 들어갈건지
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = myTableView.dequeueReusableCell(withIdentifier: "MyFirstCell", for: indexPath)
            cell.textLabel?.text = characters[indexPath.row]
            return cell
        }
    
        // 특정 셀을 클릭했을 때
        func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
            let selectedCharacter = characters[indexPath.row]
            selectedLabel.text = "Selected : " + selectedCharacter
        }
}

 

4. 미션 문제 중 각 항목을 클릭했을 때 그 항목의 이름이 표시되게 하는 부분 구현

didSelectRowAt 은 UITableViewDelegate 프로토콜의 메서드 중 하나로, 테이블 뷰의 특정 셀을 선택했을 때 호출됩니다.

이 메서드를 활용하면 사용자가 셀을 터치했을 때 원하는 동작을 수행할 수 있습니다.

 

사용자가 선택 한 항목의 이름이 selectedLabel에 표시되게 하기 위해서는 먼저

selectedCharacter 의 변수에 사용자가 클릭한 셀의 정보를 받아옵니다. (characters[indexPath.row])

 

그 후 selectedLabel.text 를 이용하여 변수 selectedCharacter에 담겨있는 정보를 selectedLabel에 표시해줍니다.

 

5. 결과