[iOS/UI] 테이블뷰 안에 있는 텍스트뷰 높이 글에 따라 조정하기(Dynamic tableviewcell height by textview text)

안녕하세요 Foma 입니다!

 

오늘은 알아볼건 텍스트뷰안에 글씨에 따라서 테이블뷰셀의 높이가 자동으로 조정되는 기능을 구현해볼거에요!

 

바로 시작할게요~

---

Storyboard

 

스토리보드에서 테이블뷰 컨트롤러를 만들어주시고

 

테이블뷰셀 안에 텍스트뷰를 넣어주세요!

 

(텍스트뷰가 늘어나는 걸 한 눈으로 보기 위해 테이블뷰 백그라운드 색을 검정색으로 해주었습니다.)

 

오토레이아웃은 아래와 같이 해주세요!

---

TableViewCell

 

테이블뷰에 텍스트뷰를 연결해주세요!

class TableViewCell: UITableViewCell {

    @IBOutlet weak var textView: UITextView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

}

먼저 텍스트뷰에 따라 테이블뷰셀의 높이가 바뀌게 할 프로토콜을 만들어줍니다.

protocol TableViewCellDelegate:class {
    func updateTextViewHeight(_ cell:ApplyTableViewCell,_ textView:UITextView)
}

딜리게이트도 함께 만들어주세요.

weak var delegate: TableViewCellDelegate?

 

아래와 같이 텍스트뷰 세팅을 해주고 awakeFromNib() 밑에 메소드를 실행시켜주세요.

  func setTextView() {
        textView.delegate = self
        textView.isScrollEnabled = false
        textView.sizeToFit()
    }

 

테이블뷰셀 밑에 UITextViewDelegate를 채택해주시고 

 

텍스트뷰의 글씨가 바뀔때마다 프로토콜의 메소드가 바뀌도록 합니다.

//MARK:UITextViewDelegate

extension ApplyTableViewCell:UITextViewDelegate {

    func textViewDidChange(_ textView: UITextView) {
        if let delegate = delegate {
            delegate.updateTextViewHeight(self, textView)
        }
    }
    
}

---

TableViewController

 

먼저 테이블뷰 셀의 딜리게이트를 현재 뷰컨트롤러로 설정해줍니다.

   override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as! TableViewCell
        cell.delegate = self
        return cell
    }

테이블뷰의 행 높이를 아래와 같이 UItableView.automaticDimension으로 설정해주세요.

 

(알아서 행높이 맞춰줘와 같은건데 정말 유용합니다!)

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

그리곤 다음과 같이 TableViewCellDelegate를 설정해줍니다.

 

간단히 설명드리면 텍스트뷰가 바뀔때마다 테이블뷰를 업데이트 해주는 것입니다.

extension TableViewController:TableViewCellDelegate {
    func updateTextViewHeight(_ cell: TableViewCell, _ textView: UITextView) {
        let size = textView.bounds.size
        let newSize = tableView.sizeThatFits(CGSize(width: size.width,
                                                    height: CGFloat.greatestFiniteMagnitude))
        if size.height != newSize.height {
            UIView.setAnimationsEnabled(false)
            tableView.beginUpdates()
            tableView.endUpdates()
            UIView.setAnimationsEnabled(true)
        }
    }
}

아래는 실행했을 때 화면입니다!

---

 

위에 화면을 보면 맨 처음 텍스트뷰가 실행될때 너무 작다는 느낌을 받았어요.

 

Storyboard

 

그래서 스토리보드에 뷰를 추가해서 텍스트뷰 아래에다 세팅해주었습니다.

---

TableViewCell

 

아래와 같이 View를 테이블뷰셀에 연결해주시고

 @IBOutlet weak var emptyView: UIView!

emptyView에 제스쳐 레코그나이저를 넣어주시고.

 

뷰를 탭했을때 텍스트뷰가 실행(?)되게 하시면 됩니다.

   func setEmptyView() {
        let tap = UITapGestureRecognizer(target: self, action: #selector(tapEmptyView))
             emptyView.addGestureRecognizer(tap)
    }
    
    @objc func tapEmptyView() {
        textView.becomeFirstResponder()
    }

setEmptyView도 awakeFromNib()에서 실행시켜줍니다.

---

emptyView를 추가하고 실행시킨 화면

 

---

오늘은 이렇게 텍스트뷰의 글씨에 따라서 테이블뷰 셀의 높이가 동적으로 바뀌는 것을 알아보았습니다.

 

혹시라도 지적해주실 부분이나 틀린점이 있다면 댓글로 알려주세요!

 

---

Source Code

 

TableViewCell

protocol TableViewCellDelegate:class {
    func updateTextViewHeight(_ cell:TableViewCell,_ textView:UITextView)
}

class TableViewCell: UITableViewCell {
    
    weak var delegate: TableViewCellDelegate?

    @IBOutlet weak var emptyView: UIView!
    @IBOutlet weak var textView: UITextView!
    override func awakeFromNib() {
        super.awakeFromNib()
        setTextView()
        setEmptyView()
    }
    
    func setTextView() {
        textView.delegate = self
        textView.isScrollEnabled = false
        textView.sizeToFit()
    }
    
    func setEmptyView() {
        let tap = UITapGestureRecognizer(target: self, action: #selector(tapEmptyView))
             emptyView.addGestureRecognizer(tap)
    }
    
    @objc func tapEmptyView() {
        textView.becomeFirstResponder()
    }

}

extension TableViewCell:UITextViewDelegate {

    func textViewDidChange(_ textView: UITextView) {
        if let delegate = delegate {
            delegate.updateTextViewHeight(self, textView)
        }
    }
}

 

TableViewController

 

import UIKit

class TableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    // MARK: - Table view data source
    
    override func numberOfSections(in tableView: UITableView) -> Int {
        
        return 1
    }
    

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        return 1
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as! TableViewCell
        cell.delegate = self
        return cell
    }
    
    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

        return UITableView.automaticDimension
    }
    

}

extension TableViewController:TableViewCellDelegate {
    func updateTextViewHeight(_ cell: TableViewCell, _ textView: UITextView) {
        let size = textView.bounds.size
        let newSize = tableView.sizeThatFits(CGSize(width: size.width,
                                                    height: CGFloat.greatestFiniteMagnitude))
        print(newSize)
        if size.height != newSize.height {
            UIView.setAnimationsEnabled(false)
            tableView.beginUpdates()
            tableView.endUpdates()
            UIView.setAnimationsEnabled(true)
        }
    }
}