[Swift] AutomaticDimension

---

0

완성 화면

---

좋은 코드 구성은 아닐 수 있지만, 간단한 방법으로 AutomaticDimension을 활용할 수 있는 방법을 적어보려고 합니다!

기본 셋팅 코드는 아래 접은 글로 적어두겠습니다 :)

<VC>

import UIKit
import SnapKit

class ViewController: UIViewController {
    let tableView = UITableView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .white
        configureTableView()
    }
    
    func configureTableView() {
        view.addSubview(tableView)
        
        tableView.snp.makeConstraints {
            $0.edges.equalTo(view.safeAreaLayoutGuide)
        }
        
        tableView.delegate = self
        tableView.dataSource = self
        tableView.register(TestTableViewCell.self, forCellReuseIdentifier: TestTableViewCell.id)
    }
}

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: TestTableViewCell.id, for: indexPath) as? TestTableViewCell else { return UITableViewCell() }
        cell.tableVew = tableView        
        return cell
    }
}

<Cell>

import UIKit

class TestTableViewCell: UITableViewCell {
    let descriptionLabel = UILabel()
    let dropDownButton = UIButton()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        configureUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configureUI() {        
        contentView.addSubview(descriptionLabel)
        contentView.addSubview(dropDownButton)
        
        let safeArea = contentView.safeAreaLayoutGuide
        descriptionLabel.snp.makeConstraints {
            $0.top.equalTo(safeArea).offset(20)
            $0.horizontalEdges.equalTo(safeArea).inset(20)
            $0.bottom.equalTo(dropDownButton.snp.top).offset(-10)
        }
        
        dropDownButton.snp.makeConstraints {
            $0.top.equalTo(descriptionLabel.snp.bottom)
            $0.centerX.equalTo(safeArea)
            $0.height.equalTo(30)
            $0.bottom.equalTo(safeArea)
        }
        
        descriptionLabel.textAlignment = .left
        descriptionLabel.textColor = .label
        descriptionLabel.font = .systemFont(ofSize: 15)
        descriptionLabel.numberOfLines = 2
        
        dropDownButton.setImage(UIImage(systemName: "chevron.down"), for: .normal)
        dropDownButton.tintColor = .black
    }
}

<TableViewCell ReusableProtocol>

protocol ReusableProtocol: AnyObject {
    static var id: String { get }
}

extension UIView: ReusableProtocol {
    static var id: String {
        return String(describing: self)
    }
}

---

1. 셀 높이 설정

기본 셋팅에 이어서 해줘야하는 부분은 버튼을 눌렀을 때,
descriptionLabel의 길이 만큼 유동적으로 움직일 수 있도록 TableViewCell 높이를 설정해줘야합니다.

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableView.automaticDimension
    }

이렇게 높이 값을 특정해서 적지 않고, UITableView.automaticDimension으로 적어주면 됩니다.

2. underDrop 버튼 설정

TestTableViewCell 파일에서 만들었던 underDropButton에 대한 action을 추가해줍니다. (addTarget)

class TestTableViewCell: UITableViewCell {
    let descriptionLabel = UILabel()
    let dropDownButton = UIButton()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        configureUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configureUI() {
		...
        
        dropDownButton.addTarget(self, action: #selector(dropDownButtonClicked), for: .touchUpInside)
    }

    @objc func dropDownButtonClicked() {
		print("클릭됨")
    }
}

작성 후, button을 클릭했을 때, "클릭됨"이 프린트 되는지 확인!

3. 버튼 상태 설정

버튼을 클릭했을 때, 한번 더 클릭했을 때,
상태가 계속 변경되어야 합니다. 그래서 toggle()을 활용해주려고 합니다.

var buttonState = false

처음 실행했을 때는 접혀있는 상태여야하니, false로 선언해두겠습니다.

그리고 dropDownButtonClicked에 필요한 코드를 작성하겠습니다.

    @objc func dropDownButtonClicked() {
        buttonState.toggle()
        
        if buttonState {
        // descriptionLabel.text 전체 길이가 모두 보일 수 있도록 설정
            descriptionLabel.numberOfLines = 0 
        } else {
        // 접었을 때, 2줄만 보일 수 있도록 설정
            descriptionLabel.numberOfLines = 2
        }
    }

이렇게 해주고 나면, 이제 Label에 확인용으로 엄청 긴 문장을 넣어봐야겠죠?
저는 '아이유 - Love Wins All' 가사 일부를 가져오겠습니다.

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableView.automaticDimension
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: TestTableViewCell.id, for: indexPath) as? TestTableViewCell else { return UITableViewCell() }
        cell.descriptionLabel.text = "Dearest, darling, my universe 날 데려가 줄래? 나의 이 가난한 상상력으론 떠올릴 수 없는 곳으로 저기 멀리 from Earth to Mars 꼭 같이 가줄래? 그곳이 어디든 오랜 외로움, 그 반대말을 찾아서 어떤 실수로 이토록 우리는 함께일까? 세상에게서 도망쳐 run on 나와 저 끝까지 가줘 my lover 나쁜 결말일까? 길 잃은 우리 둘 mm 부서지도록 나를 꼭 안아 더 사랑히 내게 입 맞춰 lover Love is all, love is all Love, love, love, love 결국, 그럼에도 어째서 우리는 서로일까?"
        return cell
    }
}

 

4. TableView reload 해주기

View는 한 번 그려지고 난 후에 다시 그려달라고 요청하지 않으면, 다시 그려지지 않습니다.
그래서 위 코드에서 실행하게되면, 아무런 변화가 없을겁니다.

버튼을 클릭했을 때! 상태가 변화해야하니, 버튼 클릭 Action에서 reloadData를 해주겠습니다.

var tableVew: UITableView?

우선 Cell 파일에서 테이블 뷰를 불러올 수 없으니까 이렇게 선언해주고,

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: TestTableViewCell.id, for: indexPath) as? TestTableViewCell else { return UITableViewCell() }
        cell.tableVew = tableView // 이렇게
        cell.descriptionLabel.text = "Dearest, darling, my universe 날 데려가 줄래? 나의 이 가난한 상상력으론 떠올릴 수 없는 곳으로 저기 멀리 from Earth to Mars 꼭 같이 가줄래? 그곳이 어디든 오랜 외로움, 그 반대말을 찾아서 어떤 실수로 이토록 우리는 함께일까? 세상에게서 도망쳐 run on 나와 저 끝까지 가줘 my lover 나쁜 결말일까? 길 잃은 우리 둘 mm 부서지도록 나를 꼭 안아 더 사랑히 내게 입 맞춰 lover Love is all, love is all Love, love, love, love 결국, 그럼에도 어째서 우리는 서로일까?"
        return cell
    }

이렇게 할당해주겠습니다. (이제 보니,, tableView이름을 너무 아무 생각 없이 만들어놨네요..ㅎㅎ...)

    @objc func dropDownButtonClicked() {
        buttonState.toggle()
        
        if buttonState {
            descriptionLabel.numberOfLines = 0
        } else {
            descriptionLabel.numberOfLines = 2
        }
        
        tableVew?.reloadData() // 이렇게
    }

이렇게 테이블뷰 reloadData를 해주면 끝입니다!

전체 코드는 아래에 접은글로 넣어두겠습니다. :)😀
감사합니다.🙇🏻‍♀️

---

<전체코드>

<ViewController>

import UIKit
import SnapKit

class ViewController: UIViewController {
    let tableView = UITableView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .white
        configureTableView()
    }
    
    func configureTableView() {
        view.addSubview(tableView)
        
        tableView.snp.makeConstraints {
            $0.edges.equalTo(view.safeAreaLayoutGuide)
        }
        
        tableView.delegate = self
        tableView.dataSource = self
        tableView.register(TestTableViewCell.self, forCellReuseIdentifier: TestTableViewCell.id)
    }
}

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableView.automaticDimension
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: TestTableViewCell.id, for: indexPath) as? TestTableViewCell else { return UITableViewCell() }
        cell.tableVew = tableView
        cell.descriptionLabel.text = "Dearest, darling, my universe 날 데려가 줄래? 나의 이 가난한 상상력으론 떠올릴 수 없는 곳으로 저기 멀리 from Earth to Mars 꼭 같이 가줄래? 그곳이 어디든 오랜 외로움, 그 반대말을 찾아서 어떤 실수로 이토록 우리는 함께일까? 세상에게서 도망쳐 run on 나와 저 끝까지 가줘 my lover 나쁜 결말일까? 길 잃은 우리 둘 mm 부서지도록 나를 꼭 안아 더 사랑히 내게 입 맞춰 lover Love is all, love is all Love, love, love, love 결국, 그럼에도 어째서 우리는 서로일까?"
        return cell
    }
}

<TestTableViewCell>

import UIKit

class TestTableViewCell: UITableViewCell {
    let descriptionLabel = UILabel()
    let dropDownButton = UIButton()
    var buttonState = false
    var tableVew: UITableView?
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        configureUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configureUI() {
        contentView.addSubview(descriptionLabel)
        contentView.addSubview(dropDownButton)
        
        let safeArea = contentView.safeAreaLayoutGuide
        descriptionLabel.snp.makeConstraints {
            $0.top.equalTo(safeArea).offset(20)
            $0.horizontalEdges.equalTo(safeArea).inset(20)
            $0.bottom.equalTo(dropDownButton.snp.top).offset(-10)
        }
        
        dropDownButton.snp.makeConstraints {
            $0.top.equalTo(descriptionLabel.snp.bottom)
            $0.centerX.equalTo(safeArea)
            $0.height.equalTo(30)
            $0.bottom.equalTo(safeArea)
        }
        
        descriptionLabel.textAlignment = .left
        descriptionLabel.textColor = .label
        descriptionLabel.font = .systemFont(ofSize: 15)
        descriptionLabel.numberOfLines = 2
        
        dropDownButton.setImage(UIImage(systemName: "chevron.down"), for: .normal)
        dropDownButton.tintColor = .black
        
        dropDownButton.addTarget(self, action: #selector(dropDownButtonClicked), for: .touchUpInside)
    }
    
    @objc func dropDownButtonClicked() {
        buttonState.toggle()
        
        if buttonState {
            descriptionLabel.numberOfLines = 0
        } else {
            descriptionLabel.numberOfLines = 2
        }
        
        tableVew?.reloadData()
    }
}

<ReusableProtocol+>

import UIKit

protocol ReusableProtocol: AnyObject {
    static var id: String { get }
}

extension UIView: ReusableProtocol {
    static var id: String {
        return String(describing: self)
    }
}

---