【Swift】【初心者用】CollectionViewを使ってみよう

はい、どうも！

フリーランスエンジニアの南だいすけです！

今日はCollectionViewについて説明していきます！

CollectionViewはTableViewとよく似ているので

それを意識してみていただけるとわかりやすいと思います。

ではいってみましょう！

CollectionViewとは

CollectionViewはTableViewがたてだけなのに対し、

Cellを作ったら縦横両方ともに作ることが出来ます！

例で言うとこんな感じです！

よくフリマアプリなどでみる画面ですね！

こちらはCellにimageViewとUILabelを二つ乗せて何個も作っています。

CollectionView作ってみた

では実際にCollectionViewを使ってこういった画面を作ってみましょう！

まず前提としてStoryBoardにCollectionViewをおき、

画面いっぱいに制約をつけておきましょう。

そしてそのCollectionViewをOutletで繋いでおきます。

import UIKit

class SearchViewController: UIViewController {

   // これはassetに登録している画像
　　let photos = ["Image-1", "Image-2","Image-3","Image-4","Image-5",
                 "Image-2","Image-4","Image-3","Image-1","Image-5"]
   
   let names = ["SMEG", "Panasonic", "HITACHI", "三菱", "Panasonic",
                "あああ", "いいいい", "ううううう", "ええええええ", "おおおおおおおおおおお"]
   
   let price = ["324,000円", "210,400円", "285,200円", "233,900円", "199,930円", "210,400円", "233,900円", "285,200円","324,000円", "199,930円"]
   
   @IBOutlet weak var collectionView: UICollectionView!
   
   override func viewDidLoad() {
       super.viewDidLoad()
       setupCell()
   }

   private func setupCell() {
       let layout = UICollectionViewFlowLayout()
       layout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
       collectionView.collectionViewLayout = layout
       
       layout.itemSize = CGSize(width: 110, height: 280)
       collectionView.collectionViewLayout = layout
   }
}

extension SearchViewController: UICollectionViewDataSource,UICollectionViewDelegate {
   func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

       let SearchRefrigeratorCell:UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "SearchRefrigeratorCell", for: indexPath)
       let imageView = SearchRefrigeratorCell.contentView.viewWithTag(1) as! UIImageView
       let cellImage = UIImage(named: searchViewModel.photos[indexPath.row])
       imageView.image = cellImage
       
       let namesLabel = SearchRefrigeratorCell.contentView.viewWithTag(2) as! UILabel
       namesLabel.text = searchViewModel.names[indexPath.row]
       namesLabel.textColor = Color.Palette.bwDark80
       
       let priceLabel = SearchRefrigeratorCell.contentView.viewWithTag(3) as! UILabel
       priceLabel.text = searchViewModel.price[indexPath.row]
       priceLabel.textColor = Color.Palette.bwDark20
       
       SearchRefrigeratorCell.layer.cornerRadius = 5
       
       return SearchRefrigeratorCell
   }
   
   func numberOfSections(in collectionView: UICollectionView) -> Int {
       return 1
   }
   
   func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       return searchViewModel.photos.count;
   }
}

するとはじめのような画面ができるかと思います。

次回はCollectionViewのあれこれを話したいと思います！

さいごに

プログラミングって難しいですよね。。

僕も文系大学を出て、全くの未経験からスタートしたので

気持ちは痛いほどよくわかります。。！

少しずつ勉強していけば知識が蓄積され、

いつかはそれが線として繋がる日が絶対きます！！

一緒にがんばっていきましょう！

この記事で少しでも初心者の方が、

「お！そういうことか！」とか「ちょっとわかったぞ！！」

っとなっていただけたら幸いです。

最後まで見ていただきありがとうございました！

ではまた次の記事でお会いしましょう！