[iOS] Tableview 만들기 ( Custom Tableview Cell )

상품의 정렬 기준이나 여러 리스트중에서 한가지를 선택할때 AOS에서는 BottomSheetDialog나 Dialog를 사용하곤 하는데 iOS에서는 아래 사진과 같은 view를 많이 사용하는데 이를 Tableview라고 합니다.

Storyboard에 ViewController Object와 class 파일( SelectChargePointViewController.swift )을 생성하고 TableView Object를 추가하고 상위 View의 배경색을 투명(clear color) 하게 합니다. ( present 했을때 Tableview만 나오도록 하기 위함 ) 

여기서 tableView cell을 추가할 필요는 없습니다. cell은 별도로 생성해야 재사용할 수 있기 때문입니다.

 

그리고 추가한 TableView Object를 SelectChargePointViewController.swift 파일에 Outlets 연결합니다. 

Custom Cell 생성

New File > ios > Cocoa Touch Class > UITableViewCell(Subclass of) , Also create XIB file을 체크해서 생성합니다.

이와 같은 방법으로 cell을 생성하면 같은 UI를 사용하는 곳에 재활용할 수 있어 편리합니다.

생성된 cell에 원하는 디자인으로 배치합니다. 

Cell과 TableView 연결

viewDidLoad시 tableView가 어떤 cell을 사용할지 등록하고 delegate와 dataSource를 등록합니다.

        chargePointView.register(UINib(nibName: "CommonSelectCell", bundle: nil), forCellReuseIdentifier: "cell")
    
        chargePointView.delegate = self
        chargePointView.dataSource = self

nibName은 위에서 생성한 cell의 xib 파일의 이름이고 forCellReuseIdentifier에는 등록한 셀을 재사용할때 사용될 이름입니다. 만약 다양한 형태의 셀을 등록해서 동적으로 변경해주고 싶다면 register작업이 여러번 발생해야 합니다.

 

 

SelectChargePointViewController.Swift

Tableview에 관련된 코딩들을 모두 작성합니다.

- 어떤 리스트를 보여줄건지

- 각 cell을 그릴때 어떻게 그릴건지

- 각 cell을 클릭했을때 

 

UITableViewDataSource와 UITableViewDelegate를 상속받으면 대부분 추가되는 메소드들이지만 'cell을 선택했을때' 메소드는 직접 추가해야 합니다.

class SelectChargePointViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{

	 let items = ["10,000P", "20,000P", "30,000P", "40,000P"]

	func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    	// cell의 갯수 
        return items.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
       ....
        // 어떤 cell을 그릴건지 
        return cell
    }
    
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    // cell을 선택했을때 
        ....
    }
	....

}

 

Cell그리기

어떤 셀을 그릴지는 'dequeueReusableCell' 메소드를 사용하는데 withIdentifier는 viewDidLoad시 register한 Cell의 forCellReuseIdentifier를 사용합니다. 

그리고 인덱스 값을 이용해 Cell을 그려줍니다.

    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell : CommonSelectCell =
        tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! CommonSelectCell
        
        let isSelect = indexPath.row == selectIndex
        cell.imgSelect.isHidden = !isSelect
        
        cell.lbTitle.text = items[indexPath.row]
        if( isSelect){
            cell.lbTitle.textColor = CommonUtils.getThemeColor()
        }else{
            cell.lbTitle.textColor = CommonUtils.getUIColor(red: 0, green: 0, blue: 0)
        }
        
        return cell
    }

 

Cell 선택시 이벤트

selectDelegate는 제가 별도로 생성한 protocol로 해당 TableView를 부른 ViewController에서 protocol을 상속받아 사용합니다.

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
        tableView.deselectRow(at: indexPath, animated: true)
        selectDelegate?.selectChargePoint(_controller: self, index: indexPath.row, name: items[indexPath.row])
        
        self.dismiss(animated: true, completion: .none)
    }

 

해당 포스팅은 기본기를 적절하게 쌓지 않고 작성되어 혼동을 줄 수 있어 참고용으로만 사용해주시면 감사하겠습니다.

그래도 잘못된 내용을 말씀해주시면 수정하도록 하겠습니다.