CollectionViewに画像とラベルを表示してみよう

Blog

 

今回は、CollectionViewに画像とラベルの表示を実装します。

 

UIの実装

 

  • Collection Viewを配置してセルを大きくする。

 

 

 

 

  • Image ViewとLabelをセルに配置。

 

 

 

セルに名前をつける

 

 

  • セルを選択し、Identifierを「Cell」に。

 

 

 

Tag付をする

  • ImageViewのtagを「1」に。
  • Labelのtagを「2」に。

 

 

 

 

 

Assets.xcassetsに画像を追加

 

  • 画像を用意してAssets.xcassetsに追加。
  • 画像の名前はコードに記入するときに必要になるので簡単な名前にしとくと楽です。今回は「dog1」「dog2」「dog3」「dog4」「dog5」にします。

 

 

 

 

 

コードの記入

 

 

 

import UIKit
 
class ViewController: UIViewController ,UICollectionViewDataSource,
UICollectionViewDelegate {
    
    //"dog1""dog2""dog3""dog4""dog5"は画像の名前を記入。
    let photos = ["dog1", "dog2", "dog3", "dog4", "dog5" ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    func collectionView(_ collectionView: UICollectionView,
                        cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
        
        // "Cell" はストーリーボードで設定したセルのID
        let testCell:UICollectionViewCell =
            collectionView.dequeueReusableCell(withReuseIdentifier: "Cell",
                                               for: indexPath)
        
        // Tag番号を使ってImageViewのインスタンス生成
        let imageView = testCell.contentView.viewWithTag(1) as! UIImageView
        // 画像配列の番号で指定された要素の名前の画像をUIImageとする
        let cellImage = UIImage(named: photos[indexPath.row])
        // UIImageをUIImageViewのimageとして設定
        imageView.image = cellImage
        
        // Tag番号を使ってLabelのインスタンス生成
        let label = testCell.contentView.viewWithTag(2) as! UILabel
        label.text = photos[indexPath.row]
        
        return testCell
    }
    
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        // section数は1つ
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView,
                        numberOfItemsInSection section: Int) -> Int {
        // 要素数を入れる、要素以上の数字を入れると表示でエラーとなる
        return photos.count;
    }
    
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

 

 

 

 

DelegateとDatasourceを紐ずけ

 

  • collectionViewとViewControllerを紐付する。

 

 

 

 

 

実行結果

 

 

 

いかがでしたか?

 

ラベルと画像が表示されれば成功です。

 

以上で「CollectionViewに画像とラベルを表示してみよう」

 

 

 

 

コメント

  1. […] collectionViewに写真を表示するまではこちらを参考にしてください。 […]

  2. […] collectionViewに写真を表示するまではこちらを参考にしてください。 […]