Starbucks Caramel Frappuccino
본문 바로가기
  • 그래 그렇게 조금씩
UIKit/AutoLayout

16 - Self-Sizing Table View Cells

by Toughie 2023. 4. 3.

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithSelf-SizingTableViewCells.html

 

Auto Layout Guide: Working with Self-Sizing Table View Cells

 

developer.apple.com

기존에는 

tableView.estimatedRowHeight = 100.0

tableView.rowHeight = UITableViewAutomaticDimension등을 작성해야 했지만,

지금은 하지 않아도 크게 상관 없어졌다.

 

 

간단한 테이블뷰와 셀을 만들고 뷰레이어를 살펴보자.

UIWindowScene - (Foreground Active)

UIWindow

UITransitionView

UIDropShadowView

 

ViewController

UIView

SafeArea

UITableView

 

UITableViewCell

-UISystemBackgroundView

   - UIView

-UITableViewCellContentView

  -UITableViewLabel

  -UITableViewLabel

 

계층 구조가 꽤 복잡하게 되어있다. 🤔 우선 테이블뷰 부분에 집중

//  Created by Toughie on 2023/04/03.
//

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        13
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        
        cell.textLabel?.text = indexPath.description
        cell.detailTextLabel?.text = """
                                    안녕하세요 터피입니다. 안녕하세요 터피입니다. 안녕하세요 터피입니다. 안녕하세요 터피입니다. 안녕하세요 터피입니다. 안녕하세요 터피입니다.
                                    """
        cell.detailTextLabel?.numberOfLines = 0
        return cell
    }
}

여기서 셀의 이미지뷰에 이미지를 넣어보면..

이미지뷰의 이미지 사이즈는 predefined 되어있어서 조정할 수 없다..!

(아래와 같은 대참사)

 

이를 해결하려면..

-> 이미지 사이즈를 미리 통일해 두기

OR

->  커스텀뷰를 활용하기

 

다음 시간에 이어서 해보자 :)

 

[학습 소스]

공식문서, 야곰 오토레이아웃 정복하기 강의

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html

https://yagom.net/courses/autolayout/

'UIKit > AutoLayout' 카테고리의 다른 글

18 - Changing Constraints 제약 변경  (0) 2023.04.04
17 - Self-Sizing Table View Cells _ 2  (0) 2023.04.04
15 - Login View Layout  (0) 2023.04.03
14 - Dynamic Type  (0) 2023.04.01
13 - Dynamic Scroll View  (0) 2023.04.01