의 목적

Swift+storyboard에서의 개발을 체험하고 싶습니다.
UItableView의 구현을 경험하고 싶습니다.

물줄기

프로젝트 제작

storyboard의 제작

TableView 구성

TableView 연결

TableViewCell 생성

ViewController.swift 제작

실행/확인

1. 프로젝트 제작

2.storyboard 제작

화면 왼쪽에 있는 Main.storyboard 선택
화면 오른쪽 상단의 "+"

3. TableView 구성

검색 태그에 UItable 가져오기

"UItableView"를 스마트폰 화면으로 끌어 놓기

전체 화면으로 UItableView 확장(= 위아래 좌우 여백 0→"add Constraints"클릭)

다음 그림에서 보듯이 UItableView가 전체 화면에 널리 퍼지면 UItableView의 제작이 완성된다

다음 그림의 빨간 동그라미 부분을 누르다

4. TableView 연결

를 참고하십시오.빨간색 화살표를 눌러 끌어 놓습니다.「data Source」 と　「View Controller」 「delegate」 と　「View Controller」
접속 후 접속 확인

5. TableViewCell 제작

TableView 구성을 참조하여 다음 그림과 같이 "TableViewCell"

구성

TableViewCell의 "Identifier"를 "Cell"로 변경

6. ViewController.swift 만들기

ViewController.swift에 프로그램 추가
ViewController에서 TabView의 DataScore 및 delegate 상속
ViewController.swift

import UIKit

// UITableViewDelegate, UITableViewDataSource を追加
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

}

오류가 발생했습니다.

오류 세부 정보를 확인하려면 "Fix"를 누르십시오.

누르면 다음과 같이 ①와 ②를 추가한다.
또한, 추가let weeksName = ["月", "火", "水", "木", "金", "土", "日"]ViewController.swift

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    let weeksName = ["月", "火", "水", "木", "金", "土", "日"]

    // ①: Fix を押すと自動で追加される
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    }
    // ②: Fix を押すと自動で追加される
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    }


    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

}

①、②의 설명과 절차의 추가
①.swift

// 描画するセルの数

// ①: Fix を押すと自動で追加される
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return weeksName.count   // 7

}

②.swift

// 描画するセルを生成する

// ②: Fix を押すと自動で追加される
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    // セルを作成, Identifier が "Cell" となっているセルを呼び出す
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)   
    cell.textLabel?.text = weeksName[indexPath.row]   // 表示する文字列
    return cell

}

완성된 프로그램
ViewController.swift

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    let weeksName = ["月", "火", "水", "木", "金", "土", "日"]

    // Fix を押すと自動で追加される①
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        return weeksName.count   // 7

    }

    // Fix を押すと自動で追加される②
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        // セルを作成, Identifier が "Cell" となっているセルを呼び出す
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        cell.textLabel?.text = weeksName[indexPath.row]   // 表示する文字列
        return cell

    }


    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

7. 실행·확인

Main.storyboard의 TableView, TableViewCell 구성
ViewController.swift에 프로그램 추가
완성한 후에 다시 집행하다.
실행기(아이폰)를 선택합니다.
이번에는 아이폰12mini를 선택하겠습니다.


화면 왼쪽 상단의 "◀준비

실행 결과를 확인합니다.
예상한 집행 결과를 얻다.

참고 문헌