소개

안녕하세요
탭하는 등 높이가 애니메이션으로 바뀌는 TableView
iOS 9 이전과 iOS 10.0에서 움직임이 조금 다르므로 조사하고 있으면 발견했기 때문에
정리하고 싶습니다.
이르지 못하는 점 등 많이 있다고 생각합니다만, 코멘트등 받을 수 있으면 다행입니다.

데모

런타임(iOS 9 이하)

런타임(iOS 10)

(보기 어렵고 미안해 ...)
iOS 10이라면 높이를 바꿀 때 셀끼리의 라벨이 겹치는 것처럼 보입니다.

TableView를 reload하는 타이밍에 애니메이션을 설정하면 좋을까?

애니메이션으로 높이가 바뀌는 TableView 셀을 다시 로드할 때는

tableView.reloadData()

대신

tableView.beginUpdates()
//データを変更する処理など
tableView.endUpdates()

와 메소드 사이에 끼우도록 작성합니다. 그 TableView를 타고있는 셀

CustomTableViewCell.swift

override func layoutSubviews() {
    super.layoutSubviews()
    if #available(iOS 10, *) {
        UIView.animate(withDuration: 0.3) { self.contentView.layoutIfNeeded() }
    }
}

처럼 애니메이션을 설정하면 iOS 9 이전의 움직임으로 할 수 있는 것 같습니다.

또 다른 방법과 그 차이

또, 이하와 같이 설정하는 방법도 있는 것 같습니다.

UIView.animate(withDuration: 0.3) {
    self.tableView.beginUpdates()
    //セルのデータを変更する処理など
    self.tableView.endUpdates()
    cell.layoutIfNeeded()
}

런타임 (iOS 10) (알기 쉽게 색을 지정해 보았습니다)

이 설명이라면 셀이 작게 돌아올 때,
다른 셀 위를 가랑이처럼 애니메이션을 해 버립니다.
(녹색/갈색 셀이 화면에 표시 될 때 하늘색 아래에서 순서대로 표시되는 애니메이션)

샘플 코드

일단 gif의 코드를 붙여두고 싶습니다.

CustomTableViewCell.swift

import UIKit

class CustomTableViewCell: UITableViewCell {
    @IBOutlet weak var label: UILabel!

    var isOpen = false

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

    override func layoutSubviews() {
        super.layoutSubviews()
        if #available(iOS 10, *) {
            UIView.animate(withDuration: 0.3) { self.contentView.layoutIfNeeded() }
        }
    }
}

MainViewController.swift

import UIKit

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

    var cellTexts = ["AAA","BBB","CCC","DDD","EEE"]
    var openHeights: [CGFloat] = [308,132,132,132,132]
    var colors: [UIColor] = [UIColor.red,UIColor.blue,UIColor.cyan,UIColor.green,UIColor.brown]
    var isOpens = [false,false,false,false,false]

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
        let nib = UINib(nibName: "CustomTableViewCell", bundle: nil)
        tableView.register(nib, forCellReuseIdentifier: "CustomTableViewCell")
    }
}

extension MainViewController: UITableViewDataSource {
    //テーブルの行ごとのセルを返却するメソッド
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomTableViewCell", for:indexPath) as! CustomTableViewCell
        cell.selectionStyle = .none
        cell.label.text = cellTexts[indexPath.row]
        cell.isOpen = isOpens[indexPath.row]
        cell.backgroundColor = colors[indexPath.row]
        return cell
    }

    //テーブルの行数を返却するメソッド
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return cellTexts.count
    }
}

extension MainViewController: UITableViewDelegate {
    //セルを選択した時の処理
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let cell = tableView.cellForRow(at: indexPath) as! CustomTableViewCell
        UIView.animate(withDuration: 0.3) {
            self.tableView.beginUpdates()
            if cell.isOpen{
                cell.isOpen = false
                self.isOpens[indexPath.row] = false
            }else{
                cell.isOpen = true
                self.isOpens[indexPath.row] = true
            }
            self.tableView.endUpdates()
            cell.layoutIfNeeded()
        }

    }

    // テーブルセルの高さを返します
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return isOpens[indexPath.row] ? openHeights[indexPath.row] : 44
    }
}

참고로 한 페이지

이 iOS 10의 UITableView 애니메이션 정보

스택 오버플로

애니메이션할 UITableView 정보

시메 사바 일기 씨

버전 체크 정보

불만족이야말로 극상을 낳는다. 씨

봐 주셔서 감사합니다.