こんにちは。
今回は、Twittterでみかけるスペース機能みたいな感じの、アイコンが重なってる感じのやつを作りたいと思います。
いざ実装すればめちゃくちゃ簡単だったんですが、調べても全く出てこなかったので、今回書いてみることにしました。
ではいきましょう！
では、CollectionViewを用意しましょう(当たり前)
からの、次のコードを書いてください(インジケータの設定は任意です)↓
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にして入れてます。
他は、画像を丸くしたりサイズを決めたりしてるだけの単純な処理です。
ここまでできたら、あとは次の処理を追加するだけで、重なってくれます。
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
}
}
終わったら、こんな感じになってるかと。
最後に
お疲れさまです。
仮にもっと見た目をよくしたいとかであれば、ボーダーを追加して、それに色をつけたりとかをやってみてください。
では！