[SWIFT] Table View 1(리스트 뷰)

Swift에는 리스트뷰가 따로없고, Table View라는 것을 이용하여 리스트뷰를 만들 수 있습니다.

실행하면 위와 같이 빈 칸이지만

테이블 뷰에 데이터를 입력하면 데이터가 들어갑니다.

우선 테이블뷰를 만들려면 두개의 뷰가 필요합니다.

Table View와 Table View Cell 

Table View는 말 그대로 리스트 같은걸 말하고, Table View Cell은 그 안에 들어가는 레이아웃 같은 겁니다.

우선은 단순히 텍스트 하나 넣는 걸로 해보겠습니다.

Table View를 먼저 layout으로 그려줍니다.

그리고 Table View Cell을 그 위에 위치시킵니다.

그럼 아래와 같은 모양이 됩니다.

이건 합쳐진 모양

이건 Table View 모양

이건 Table View Cell입니다.

그리고 Table View Cell을 선택한 후 Id를 달아줍니다.

이제 코드로 갑니다.

먼저 protocol을 추가합니다.

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{
 
......
 
}

기본 UIViewController에 UITableViewDelegate와 UITableViewDataSource가 추가 되었습니다.

Delegate는 table에 들어갈 데이터들이 변동되면 알려주는 역할을 하고, 

DataSource는 실질적으로 들어갈 데이터들을 관리합니다.

var data:[String]=[]
let textCellIdentifier = "TextCell"
@IBOutlet weak var tableview: UITableView!

Line 1 : Table View로 띄울 String Array입니다.

Line 2 : 방금 지정한 Table View Cell의 ID입니다.

Line 3 : Table View를 아울렛으로 뽑아줍니다.

func tableView(tableview: UITableView, numberOfRowsInSection section: Int) -> Int {
    return self.data.count
}
func tableView(tableview: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableview.dequeueReusableCellWithIdentifier(textCellIdentifier, forIndexPath: indexPath) as UITableViewCell
    let row = indexPath.row
    cell.textLabel?.text = data[row]
    return cell
}
    
func tableView(tableview: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    tableview.deselectRowAtIndexPath(indexPath, animated: true)
    let row = indexPath.row
    print(data[row])
}

 

위 3개의 함수가 Table View에 데이터를 연결하는 역할을 합니다.

Line 1~3 : 데이터의 갯수를 반환합니다. 즉 Table 의 수입니다.

Line 4~9 : 데이터를 Table에 넣는 역할을 합니다.

Line 5 : 데이터를 넣을 Table View Cell을 정의합니다.

Line 6 : 데이터 array의 번호입니다.

Line 7 : Table View Cell에 데이터를 연결합니다.

Line 11~15 : 이 부분은 Table View에서 데이터 선택시 행동인데, 여기서는 디버그로 출력하도록 했습니다.