【Swift】CollectionViewを重ねる方法


こんにちは。

今回は、Twittterでみかけるスペース機能みたいな感じの、アイコンが重なってる感じのやつを作りたいと思います。

いざ実装すればめちゃくちゃ簡単だったんですが、調べても全く出てこなかったので、今回書いてみることにしました。

ではいきましょう！

<h1>
では、CollectionViewを用意しましょう(当たり前)
</h1>


からの、次のコードを書いてください(インジケータの設定は任意です)↓

```php
import UIKit

class ViewController: UIViewController,UICollectionViewDelegate, UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {

        @IBOutlet weak var collectionView: UICollectionView!

        let items = ["1","2","3","4","5","6"]

        override func viewDidLoad() {
        super.viewDidLoad()

         collectionView.delegate = self
         collectionView.dataSource = self
　　　　　　collectionView.showsHorizontalScrollIndicator = false//任意

      }

      func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    
        return items.count
        
    }

      func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        
        let imageView = cell.contentView.viewWithTag(1) as? UIImageView
        imageView?.image = UIImage(named: items[indexPath.row])
        imageView?.contentMode = .scaleAspectFill
        imageView?.layer.masksToBounds = true
        imageView?.layer.cornerRadius = (imageView?.frame.size.width)!/2
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        return CGSize(width: 80, height: 80)
    }

   }
```

itemsの配列は、わかりやすいように番号で適当に決めてます。そして、適当に外部から取ってきた画像に1~6の番号をつけ、cellForItemAtの中でImageViewにして入れてます。

他は、画像を丸くしたりサイズを決めたりしてるだけの単純な処理です。

ここまでできたら、あとは次の処理を追加するだけで、重なってくれます。

```php
import UIKit

class ViewController: UIViewController,UICollectionViewDelegate, UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {

        @IBOutlet weak var collectionView: UICollectionView!

        let items = ["1","2","3","4","5","6"]

        override func viewDidLoad() {
        super.viewDidLoad()

         collectionView.delegate = self
         collectionView.dataSource = self
　　　　　　collectionView.showsHorizontalScrollIndicator = false//任意

      }

      func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    
        return items.count
        
    }

      func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        
        let imageView = cell.contentView.viewWithTag(1) as? UIImageView
        imageView?.image = UIImage(named: items[indexPath.row])
        imageView?.contentMode = .scaleAspectFill
        imageView?.layer.masksToBounds = true
        imageView?.layer.cornerRadius = (imageView?.frame.size.width)!/2
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        return CGSize(width: 80, height: 80)
    }

//これを追加

　　　func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return -22 
    }

   }
```

終わったら、こんな感じになってるかと。

![スクリーンショット 2021-09-01 12.33.04 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1106647/f9102ab0-7336-1348-9183-70ff0a2bed48.png)

<h1>
最後に
</h1>

お疲れさまです。

仮にもっと見た目をよくしたいとかであれば、ボーダーを追加して、それに色をつけたりとかをやってみてください。

では！