소개

이번에는 UICollectionView를 사용하여 iOS 버전 slack의 반응 스탬프를 표시하는 화면 같은 녀석을 만듭니다.
스탬프는 유니 코드로 문자로 표시됩니다 (이미지 리소스로 처리하는 것보다 낫습니다).

개발 환경

macOS 10.13.6

Xcode10

Swift 4.2

Storyboard

먼저 스토리 보드에서 ViewController에 UICollectionView를 배치합니다.
Xcode10에서 객체 선택이 내비게이션의 버튼으로 바뀐 것은 처음 혼란스러웠습니다.

검색


CollectionView를 넣어


제약을 사방 모두 0으로 하면 k입니다.

CollectionViewCell

xib로 Cell을 만들어도 괜찮습니다만, 스탬프를 표시할 뿐이므로 지금 배치한 CollectinoView내에서 완결시킵니다.
CollectionView 안에 셀이 포함되어 있으므로 거기에 UILabel을 배치합니다.

UILabel을 넣어


UILabel의 제목에 😀를 입력하여 가운데에 맞춥니다.


ViewController에서 셀의 UILabel을 참조하기 위해 태그를 지정합니다.


ViewController에서 보면 이런 느낌입니다.


셀을 재사용하기 위해 ID도 설정합니다.


마지막으로 ViewController와 UICollectionView를 아울렛 연결하면 스토리 보드의 작업이 완료됩니다!

ViewController

먼저 표시할 스탬프의 정의와 CollectionView의 Delegate&DataSource의 연결을 잊지 마세요.

ViewController.swift

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var collectionView: UICollectionView!
    // スタンプの定義(Unicode)
    let stamps = ["1F600", "1F601", "1F602", "1F603", "1F604", "1F605", "1F606", "1F606",
 "1F607", "1F608", "1F609", "1F60A", "1F60B", "1F60C", "1F60D", "1F60E", "1F60F",
 "1F610", "1F611", "1F612", "1F613", "1F614", "1F615", "1F616", "1F617", "1F618",
 "1F619", "1F61A", "1F61B", "1F61C", "1F61D", "1F61E", "1F61F"]

    override func viewDidLoad() {
        super.viewDidLoad()
        // DelegateとDataSourceの紐付け
        self.collectionView.delegate = self
        self.collectionView.dataSource = self
    }
}

그런 다음 Delegate 및 DataSource 프로토콜을 구현합니다.
이번에는 탭하여 무언가를 하는 처리는 쓰지 않으므로, Delegate는 좋게 해 주세요.

ViewController.swift

extension ViewController: UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        // スタンプが押された時の処理を書く
    }
}

extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.stamps.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        if let label = cell.contentView.viewWithTag(1) as? UILabel {
            // CollectionViewCellのUILabelを取得し、絵文字をに代入する
            let text = UnicodeScalar(Int(self.stamps[indexPath.row], radix: 16)!)
            label.text = text?.description
        }

        return cell
    }
}

ViewController 측의 처리는 이것뿐입니다.
유니코드의 변환 처리가 들어가 있기 때문에 약간의 로직이 짜넣어지고 있습니다만, UILabel에 문자를 표시하는 것만이라면 한층 더 소스가 줄어듭니다.

ViewController.swift

extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.stamps.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        if let label = cell.contentView.viewWithTag(1) as? UILabel {
            // 文字列を代入
            label.text = "hogehoge"
        }

        return cell
    }
}

끝에

이상으로 UICollectionView를 사용하여, iOS판 slack의 리액션 스탬프를 표시하는 화면 같은 녀석을 만들 수 있었습니다. UICollectionView도 Cell 레이아웃을 생각하지 않으면 상당히 쉽게 사용할 수 있습니다.
Cell간의 마진이나 한 줄에 표시하는 요소수나 좋은 제어를 주는 것도 매력이네요.