[iOS] UICollectionView でセルの領域外にはみ出る要素を配置する

こんな感じに配置する

赤いUIView がセルからはみ出している

前提条件

Xcode: 12.1
シミュレータ: iOS14系

というわけで早速作っていきます。

セルの領域外にはみ出る要素を配置する

まずコレクションビューを適当に作ります。
(雛形は本ブログの [iOS] UIViewController の中に UICollectionView を貼り付けるとかを参考にサクッと)

で、あとは UIView.layer.zPosition を調整し、UIView.layer.masksToBounds を false にするとすぐにできます。

zPosition のデフォルト値は0なので、それよりも大きな値を指定し、
他の要素よりもZ軸で上に配置されるようにします。

zPositionの設定ははみ出る要素自体ではなく、それを乗せているセルに対して行います。
はみ出る要素自体に設定してしまうと、スクロールして再描画したときに、
それが他の要素の下側に表示されてしまう場合があります。

masksToBounds をfalseにすると、
セルの領域からはみ出した要素を切り取らずに表示できるようになります。

ということで、はみ出る要素を持つUICollectionViewCell に対して
以下のようなコードを書いてあげれば実現できます。

let shouldOverhanging = true // はみ出る要素を持つUICollectionViewCell ならば

if shouldOverhanging {
    let overhangingView = UIView(frame: CGRect(x: 50, y: -100.0, width: 150, height: 120)) // 上にはみ出すUIView
    contentView.addSubview(overhangingView!)

    layer.masksToBounds = false
    layer.zPosition = 1
}

こうすると、冒頭の動画のように
セルの領域からはみ出したUIView (動画の赤い四角のパーツ)を表示することができます！

prepareForReuse でUIView たちをremove してやるのも忘れずに。

override func prepareForReuse() {
    super.prepareForReuse()
         
    let subviews = contentView.subviews
    for subview in subviews {
        subview.removeFromSuperview()
    }
}

これでセルの領域外にはみ出る要素を配置できました。

最後に

以上です。お疲れ様でした！