もっとみるを押したらUILabelが広がるやつ

## 動作環境
- Swift 5.2
- Xcode 11.5

## つくるやつ
こんな風にボタンを押したら`UILabel`が開閉するサンプルを作ります。開閉したいラベルの入った`UIStackView`と、閉じているときの高さを持った`UIView`の入った`UIStackView`を準備して、2つの`UIStackView`の高さが同じになるような制約をつけておくことで、`view.isHidden`の切り替えで開閉できるようになります。
文章は[こちら](https://lipsum.sugutsukaeru.jp/)から拝借しました。
![sample1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258151/47a72192-d6d7-ae28-ec65-a5c3baa31eac.gif)

## Storyboardのつくり方
Storyboardはこんな感じになります。
![スクリーンショット 2020-06-12 23.28.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258151/3d762770-bf32-b9d9-993c-5d079e5f819a.png)

### 手順

1. 可変したい`UILabel`を準備して`UIStackView`（以下、`TitleContainerView`と呼びます）に内包します。当然ですが`numberOfLines`は0に設定する必要があります。
`TitleContainerView`の設定は、`Axis: Vertical`、`Alignment: Center`、`Distribution: Fill`とします。
![スクリーンショット 2020-06-13 2.28.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258151/0c5dc66c-d389-2006-ce64-82ecc8e4e014.png)

2. `TitleContainerView`に対して基準となる位置の制約をつけます。
![スクリーンショット 2020-06-13 2.14.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258151/cc4e33ea-92ff-55a7-4263-bbcc61ab4530.png)　![スクリーンショット 2020-06-13 1.25.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258151/4bc3c6f1-5b3b-00cd-f9d6-1bc15ae1f2d5.png)

3. もっと見るボタンを配置して、`TitleContainerView`のbottomに紐付けます。こうすることで、`TitleContainerView`が広がった時に一緒に下へ動くようになります。
![スクリーンショット 2020-06-13 2.16.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258151/96a835a5-c5b1-6543-eb79-f89901843a7e.png)　![スクリーンショット 2020-06-13 1.18.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258151/0059d6b8-9fbe-51f8-412c-dbb1744017bd.png)

4. もう１つ`UIStackView`を準備して、中に空の`UIView`を配置します。この`UIStackView`の上下左右と`TitleContainerView`の上下左右を一致させるように制約をつけます。
![スクリーンショット 2020-06-13 2.17.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258151/5e336aec-b141-dcc5-dffa-fb6b666f0c4c.png)　![スクリーンショット 2020-06-13 1.28.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258151/9e791758-9a84-9e89-7535-d262b3d3ea8c.png)

5. 中に配置した`UIView`にheightの制約をかけます。このheightが閉じている状態での高さになります。
![スクリーンショット 2020-06-13 2.22.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258151/b7b627f9-3dfd-8dc2-26a2-5c663619b881.png)　![スクリーンショット 2020-06-13 2.23.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258151/5795b718-4a25-8223-5b6c-d81f32ffec33.png)

これをViewControllerへ紐づけていきます。

## ViewController

```swift: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()
        }
    }
}
```
動作確認に必要なコードだけ書いています。
`UIStackView`の中のパーツを`hidden`にすると、そのパーツが存在しないようにレイアウトが決定されます。
`TitleContainerView`の高さはもう1つの`UIStackView`の中にある`UIView`の高さによって決められているので、
`UIView`が`hidden`になる -> 高さの制約がなくなる -> `TitleContainerView`の高さは`UILabel`の高さによって決まる
という流れで開閉することができる、って感じだと思います。

[こちら](https://github.com/kimiaki704/more-read-sample)からクローンできます。

## おまけ
最初に動かしたとき、こんな風なアニメーションになってしまい、かなり戸惑いました。
`contentMode`が何故か`left`になっていたせいでした。デフォルトは`top`になっているので気にする必要はないはずですが、、、
![sample2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258151/7a3f36d6-02ea-88b9-0b29-1e21c1928d5e.gif)