더보기를 누르면 UILabel이 퍼지는 사람

운영 환경

Swift 5.2

Xcode 11.5

만드는 사람

이런 식으로 버튼을 누르면 UILabel 가 개폐하는 샘플을 만듭니다. 개폐하고 싶은 라벨이 들어간 UIStackView 와 닫을 때의 높이를 가진 UIView 의 들어간 UIStackView 를 붙여 놓는 것으로, UIStackView 의 전환으로 개폐할 수 있게 됩니다.
문장은 여기 에서 빌렸습니다.

Storyboard를 만드는 방법

Storyboard는 이런 느낌입니다.

절차

가변하고 싶은 view.isHidden 를 준비해 UILabel (이하, UIStackView 라고 한다)에 내포합니다. 당연하지만 TitleContainerView는 0으로 설정해야합니다.numberOfLines 의 설정은 TitleContainerView , Axis: Vertical , Alignment: Center 로 합니다.

Distribution: Fill 에 대한 기준이 되는 위치를 제약합니다.

더보기 버튼을 배치하고 TitleContainerView의 bottom에 연결합니다. 이렇게 하면 TitleContainerView 가 퍼졌을 때 함께 아래로 움직이게 됩니다.

또 다른 TitleContainerView 를 준비하고 안에 빈 UIStackView 를 놓습니다. 이 UIView 의 상하 좌우와 UIStackView 의 상하 좌우를 일치시키도록 제약을 합니다.

안에 배치한 TitleContainerView 에 height 제약을 가합니다. 이 height가 닫힌 상태에서의 높이가 됩니다.

이것을 ViewController에 연결해 갑니다.

ViewController

MoreReadViewController.swift

import UIKit

final class MoreReadViewController: UIViewController {
    @IBOutlet private var heightView: UIView!
    @IBAction private func moreReadButtonTapped(_ sender: UIButton) {
        UIView.animate(withDuration: 0.2) { [weak self] in
            guard let self = self else { return }
            self.heightView.isHidden.toggle()
        }
    }
}

동작 확인에 필요한 코드만 쓰고 있습니다.UIView 의 파트를 UIStackView 로 하면 그 파트가 존재하지 않도록 레이아웃이 결정됩니다.hidden 의 높이는 또 다른 TitleContainerView 안에 있는 UIStackView 의 높이에 의해 정해져 있으므로,UIView 가 UIView 가 된다 -> 높이 제약이 없어진다 -> hidden 의 높이는 TitleContainerView 의 높이에 의해 정해진다
라는 흐름으로 개폐할 수 있다는 느낌이라고 생각합니다.

여기 에서 복제할 수 있습니다.

덤

처음 움직였을 때, 이런 애니메이션이 되어 버려, 꽤 당황했습니다.UILabel 가 왜인가 contentMode 가 되어 있었기 때문이었습니다. 기본값은 left이므로 신경 쓸 필요는 없지만,,,