[Swift] Custom TableView, Segue

※ 추가적으로 공부가 필요..

 

---

[Custom TableView]

1. 임의로 이름, 현상수배금을 ViewController에서 생성하고, 사진을 Assets.xcassets에 넣는다

추가로, ListCell 클래스를 생성하여 객체를 쉽게 저장할 수 있도록 한다.

let nameList = ["brook", "chopper", "franky", "luffy", "nami", "robin", "sanji", "zoro"]
let bountyList = [33000000, 50, 4400000, 300000000, 16000000, 8000000, 77000000, 12000000]
    
//IBOutlet: Interface Builder Outlet
//IBOutlet은 컨트롤러 헤더 파일에 선언한 객체를 인터페이스 빌더가 알아 볼 수 있도록 하는 것
class ListCell: UITableViewCell {
	@IBOutlet weak var imgView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var bountyLabel: UILabel!
}

 

2. Cell에 데이터들을 넣는다

//TableView를 cell로 지정하고 반환
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as? ListCell{
            let img = UIImage(named: "\(nameList[indexPath.row]).jpg")      //이미지 불러오기
            cell.imgView.image = img            //이미지 설정
            cell.nameLabel.text = nameList[indexPath.row]       //텍스트 설정
            cell.bountyLabel.text = "\(bountyList[indexPath.row])"      //값 설정
            return cell
        }else{
            return UITableViewCell()
        }  
}

 

3. 각 Cell을 클릭하면 해당 Cell에 대한 자세한 정보를 보여주는 다른 ViewContorller가 위에 뜨도록 Segue를 사용한다

[코드에서 설정하는 부분]

//UITableViewDelegate: 클릭했을 때 반응
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    performSegue(withIdentifier: "showDetail", sender: nil)
}

 

[스토리보드에서 설정하는 부분]

- 왼쪽 ViewController의 가장 왼쪽 위 아이콘 클릭 + ctrl한 후 드래그해서 오른쪽 View Controller에 연결한 후, Present Modally로 설정한다

 

[결과화면]