![見出し画像](https://assets.st-note.com/production/uploads/images/26931035/rectangle_large_type_2_f48010ad5137f8531e67d9221e3bf616.jpg?width=1200)
【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のあれこれを話したいと思います!
さいごに
プログラミングって難しいですよね。。
僕も文系大学を出て、全くの未経験からスタートしたので
気持ちは痛いほどよくわかります。。!
少しずつ勉強していけば知識が蓄積され、
いつかはそれが線として繋がる日が絶対きます!!
一緒にがんばっていきましょう!
この記事で少しでも初心者の方が、
「お!そういうことか!」とか「ちょっとわかったぞ!!」
っとなっていただけたら幸いです。
最後まで見ていただきありがとうございました!
ではまた次の記事でお会いしましょう!
この記事が気に入ったらサポートをしてみませんか?