DynamicTableView 다른 크기의 셀 높이 지정

DynamicTableView 다른 크기의 셀 높이 지정

<완성화면>

아래와 같이 description Label 의 길이가 제각각이어서 서로 다른 크기의 셀 높이를 갖는 테이블 뷰!

---

TIL

Dynamic Tableview 만들 때

테이블뷰 아래까지 꽉  차게 0 0 0 0 constraints를 잡는데 다만, 주의할 점은 다음과 같다.

아래 constraints 세부사항을으로 들어가서 safe area  bottom 이 아닌 superview.bottom 에 constraint를 건다.

---

 

Stackview 관련

1) Stackview일단 만든다 -> 너비 높이가 지정이 안되어있을 건데, Label 또는 button 하나만 넣어도 일단 파란불 들어옴.

2) 그 다음에 요소를 여러개 넣고 싶으니까 당연히 Stackview를 만들었을 것임...!! -> 복사+붙여넣기 여러개.

3) 만약 Stackview 안에 넣는 요소들을 같은 너비 또는 높이로 하고 싶은 경우, Fill Equally로 설정. + 그 밑에 spacing도 같이 조절.

 

---

Dynamic TableView

어차피 스크린 사이즈 (핸드폰 디바이스 전체 높이)를 알기 때문에,

안에 들어가는 요소들 각각 constraints를 빠짐 없이 걸면, 각 요소들의 높이는 저절로 계산되어서 잡힌다.

 

(아래 그림을 예로 들자면, Lorem Ipsum is~~~ 이 부부분이 무한정 늘어날 수 있다는 가정이 있음.

따라서 해당 라벨의 높이는 딱 ! 지정을 할 수는 없기 때문에 각 요소들의 constraints들만(여백 제약조건) 다 걸어주는거임.

그러면 해당 Lorem Ipsum is~~~ 이 부분의 높이는 저절로 잡힘)

 

---

무한정으로 늘어나는 라벨의 경우,

trailing constraints 줄 때

greater Than or Equal 로 주었음

그 이유는 해당 라벨이 여백 제약조건보다 더 작아질수도 길어질 수도 있으니깐

 

---

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.delegate = self
        tableView.dataSource = self
        
        tableView.register(UINib(nibName: "TableViewCell", bundle: nil), forCellReuseIdentifier: "TableViewCell")
        
        tableView.rowHeight = UITableView.automaticDimension
        tableView.estimatedRowHeight = 120
    }
}

 

중요한거 !!

tableView.rowHeight = UITableView.automaticDimension //Dynamic TableView 셀 높이 자동으로 조절

tableView.estimatedRowHeight = 120 // 예상하는 셀의 높이

 

---

복습

TableView 메소드 중에서

cellForRowAt의 역할: 

테이블뷰 드래그해서 조금씩 올릴 때마다 데이터와 뷰를 연결시켜주는 역할 (dequeReusableCell 셀을 재사용하면서)

---

트러블슈팅 1

왜 cell.descriptionLabel.text 에서 옵셔널 에러가 났을까?

=> xib 셀 등록을 빼먹어서

tableView.register(UINib(nibName: "TableViewCell", bundle: nil), forCellReuseIdentifier: "TableViewCell")

 

---

 

트러블슈팅 2

TableView seperator 이 제대로 보이지 않는 현상 발생

 

 

해결:

tableView seperator style 속성에서 수정

 

원래 테이블뷰 seperator style 기본 설정은 automatic , left 15로 되어있는데,

이걸 위와 같이 custom, left 0 으로 설정하면 다음과 같이 완성.

 

참고)

https://minzombie.github.io/ios/separator/

 

https://www.youtube.com/watch?v=Z_aJWjarRpg&t=304s