普段何気なく使っていたYouTubeアプリですが、そのミニプレイヤーは結構面白い動作をしています。
画像はYouTube Musicのものですが、ミニプレイヤーは具体的には以下のようなものです。
YouTubeアプリもほぼ同じような動作です。
ハーフモーダルではなく、下部のタブバーと連動し、同一ビューでサイズを変えて、その内部でパーツのサイズを変えてシームレスにUIを変更しています。
サイズの変更は縦スワイプで行えます。
このViewの実装はどうやるんだろうと思い、いろいろ調べてみたのですが、実装方法やライブラリーをうまく見つけることができませんでした。
でもまあ、見つけられないならしょうがないので、とりあえずガワの部分だけでも実装してみることにしました。
その結果のソースはこちらで、Playgroundにコピペで動作します。
基本的にはジェスチャーの移動量に応じて、オートレイアウトでビューの高さと下マージンを変更する、というものになります。
当初はframeでやろうとしていたのですが、下マージンの兼ね合いでY座標の計算が非常に面倒でしたのでオートレイアウトに切り替えたところ、非常にシンプルになりました。
また当初はスワイプを検出するUISwipeGestureRecognizerで良いのかと思っていたのですが、こちらはiOSで既定されているスワイプ動作を行った際に発火するもので、移動量の取得はできないようです。
移動量を取得する際にはUIPanGestureRecognizerを利用する必要があるようです。
L68-
/// ジェスチャーの設定
private func setGestureRecognizer() {
let recognizer = UIPanGestureRecognizer(target: self, action: #selector(onPanGesture(_:)))
addGestureRecognizer(recognizer)
}
今後いろいろ使いまわせるように、極力MiniPlayerView内に処理を収めたいという方針でやってみたのですが、結果的に大部分を収めることができました。
こちらはいろいろ調べている最中に見つけたものですが、View内部よりsuperviewでオートレイアウトを設定する、というテクニックは今後いろいろ使えそうです。
L84-
// 制約の設定
translatesAutoresizingMaskIntoConstraints = false
heightConstraint = heightAnchor.constraint(equalToConstant: minHeight)
bottomConstraint = bottomAnchor.constraint(equalTo: superview.bottomAnchor, constant: maxMargin)
NSLayoutConstraint.activate([heightConstraint, bottomConstraint,
leftAnchor.constraint(equalTo: superview.leftAnchor),
rightAnchor.constraint(equalTo: superview.rightAnchor)])
とりあえずView自体の動きだけ試しに実装してみましたが、View内部のUIの動きはオートレイアウトでやっていくことになるでしょう。
タブバーなど外部のUIとの連携はデリゲートなりCombineなどを実装する必要はあり、Viewの継承元クラスとして使えるようにはなっておらず、使い回しは現状できませんが、実際に使う段階で考えたいと思います。