Expand Cell

생성일: 2021년 10월 7일 오후 10:20

누르면 해당 부분이 확장되서 보이는 구조를 구현하고자 한다.

1 단계

table view와 cell을 생성한다.

import UIKit

class ExpandCell: UITableViewCell {
    
    @IBOutlet weak var descriptionLabel: UILabel!
}

class ViewController: UIViewController,UITableViewDataSource, UITableViewDelegate {

    @IBOutlet weak var tableView: UITableView!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        return 5
    }
    
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "expandCell_ID", for: indexPath) as! ExpandCell
        
        return cell
    }

}

tableView를 만드는데 필요한 프로토콜과 함수들을 생성했다.

tableView Cell을 위한 class는 다른 파일을 하나 생성해서 만드는 것이 정석이지만 편의를 위해 한파일에 구현했다.

실행 화면

2 단계

클릭시 해당 부분이 확장하여 모든 정보(description)을 보여주도록 구현

import UIKit

class ExpandCell: UITableViewCell {
    
    @IBOutlet weak var descriptionLabel: UILabel!
}

class ViewController: UIViewController,UITableViewDataSource, UITableViewDelegate {

    @IBOutlet weak var tableView: UITableView!
    
    // Model
    struct ExpandDataModel {
        var description: String
        var isExpand: Bool
    }
    
    // Model Array
    var dataModels = [ExpandDataModel]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
        
        //테스트를 위한 description Array
        let textArray = ["short Text",
                         "long long long long long long long long long long long long long long long long long long long long Text",
                         "short Text",
                         "long long long long long long long long long long long long long long long long long long long long long long long long long longlong long long long long long long long long long long long long long long long long long long long Text",
                         "short Text"
        ]
        
        for (_, value) in textArray.enumerated() {
            
            dataModels.append(ExpandDataModel.init(description: value, isExpand: false))
        }
        
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        return dataModels.count
    }
    
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "expandCell_ID", for: indexPath) as! ExpandCell
        
        cell.descriptionLabel.text = dataModels[indexPath.row].description
        
        // cell 클릭시 확장하도록 구현
        if dataModels[indexPath.row].isExpand == true {
            cell.descriptionLabel.numberOfLines = 0
        } else {
            cell.descriptionLabel.numberOfLines = 1
        }
        
        //cell 클릭시 회색으로 변하는 효과 삭제
        cell.selectionStyle = .none
        
        return cell
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
        //클릭하면 해당 model의 isExpand 값을 뒤집는다.
        dataModels[indexPath.row].isExpand = !dataModels[indexPath.row].isExpand
        //reloadData
        tableView.reloadRows(at: [indexPath], with: .none)
    }

}

cell에 들어갈 데이터를 만들기 위해 ExpandDataModel 이라는 Struct를 생성했다.

해당 모델은 description과 확장 유무를 결정하는 isExpand를 가진다.

모델들을 dataModels라는 Array를 만들고 그 곳에 저장한다.

클릭하면 isExpand 값이 바뀌고 거기에 맞춰 true일 때 확장을하고 해당 row를 reload한다.

실행화면
두 번째 cell을 클릭하여 확장시켰다.

3 단계

tableView에 오토레이아웃을 사용할 때 애니메이션 효과가 이상해지는 것을 수정한다.

시도해 볼 만한 해결 방법

1. cell의 크기가 고정된 값으로 커졌다 줄어드는 상황을 구현 한다면, heightForRowAt 함수 사용하여 정확한 높이 값을 준다.
2. tableView.reloadRows(at: [indexPath], with: .none) 를 전체 tableView를 reload 하는
   tableView.reloadData()로 바꾼다.
3. didSelectRowAt 에
   tableView.estimatedSectionHeaderHeight = 0
   tableView.estimatedSectionFooterHeight = 0 을 준다.
4. 애니메이션 효과를 없앤다.
   UIView.setAnimationsEnabled(false)
   tableView.reloadRows(at: [indexPath], with: .none)
   UIView.setAnimationsEnabled(true)
   이렇게 하여 reload를 하기 전에 애니메이션 효과를 없애고 그 후에 다시 애니메이션 효과를 켜준다.

1, 4번은 사용 가능한 환경이라면 확실하게 문제를 해결 할 수 있다.