Tinder風UIの実装

完成品

使用ライブラリ

'VerticalCardSwiper'

参考URL
https://www.cocoacontrols.com/controls/verticalcardswiper

CocoaPodsにて

 pod 'VerticalCardSwiper'

をPodfileに記載の上、pod intallする

実装

VerticalCardSwiperはUIViewを継承したものなので選択する

Custom ClassのClass名をVerticalCardSwiperと記載する

ViewControllerに下記を記載する
cardForItemAtの中身は後ほど記載します。

ViewController.swift

import UIKit
import VerticalCardSwiper
class ViewController: UIViewController {

    @IBOutlet private weak var cardSwiper: VerticalCardSwiper!
    let prefecturesArray: [String] = [
        "北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県",
        "埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県",
        "岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県",
        "鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県",
        "佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"
    ]
    override func viewDidLoad() {
        super.viewDidLoad()
        cardSwiper.delegate = self
        cardSwiper.datasource = self
    }
}
extension ViewController: VerticalCardSwiperDatasource, VerticalCardSwiperDelegate {
    func cardForItemAt(verticalCardSwiperView: VerticalCardSwiperView, cardForItemAt index: Int) -> CardCell {
        // 後で書く
    }
    
    // tableViewでいうnumberOfRowsInSectionと同じようなデリゲートメソッド
    func numberOfCards(verticalCardSwiperView: VerticalCardSwiperView) -> Int {
        return prefecturesArray.count
    }
}

xibを作成します。

File→New→File→Cocoa Touch Classを選択し
Class名はCardViewCellでSublass ofはUITableViewCellとします。
また必ずAlso create XIB fileにはチェックがついていることを確認してください。

CardViewCellにLabelを中央に貼り付けます。
またIdentifierの名前をCardViewCellと命名します。

CardViewCell.swiftに下記を記載
VerticalCardSwiperをimportする
prepareForReuse、layoutSubviews、setRandomBackgroundColorはドキュメントからそのまま拝借しました。

CardViewCell.swift

import UIKit
import VerticalCardSwiper
// UITableViewCell→CardCellに変更
class CardViewCell: CardCell {

    @IBOutlet weak var prefectureLabel: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
    // ライブラリのコードからそのまま拝借
    override func prepareForReuse() {
        super.prepareForReuse()
    }
    // ライブラリのコードからそのまま拝借
    override func layoutSubviews() {
        self.layer.cornerRadius = 12
        super.layoutSubviews()
    }
    
    // ライブラリのコードからそのまま拝借
    public func setRandomBackgroundColor() {
        let randomRed: CGFloat = CGFloat(arc4random()) / CGFloat(UInt32.max)
        let randomGreen: CGFloat = CGFloat(arc4random()) / CGFloat(UInt32.max)
        let randomBlue: CGFloat = CGFloat(arc4random()) / CGFloat(UInt32.max)
        self.backgroundColor = UIColor(red: randomRed, green: randomGreen, blue: randomBlue, alpha: 1.0)
    }
}

ViewControllerに下記を追記します。
ここではXIBの登録を行っています。

ViewController.swift

override func viewDidLoad() {
        super.viewDidLoad()
        cardSwiper.delegate = self
        cardSwiper.datasource = self
        // register cardcell for storyboard use
        cardSwiper.register(nib: UINib(nibName: "CardViewCell", bundle: nil), forCellWithReuseIdentifier: "CardViewCell")
        cardSwiper.reloadData()
    }

cardForItemAtの中身を記載します。

ViewController.swift

func cardForItemAt(verticalCardSwiperView: VerticalCardSwiperView, cardForItemAt index: Int) -> CardCell {
        if let cardCell = verticalCardSwiperView.dequeueReusableCell(withReuseIdentifier: "CardViewCell", for: index) as? CardViewCell {
            // verticalCardSwiperView.backgroundColor = UIColor.random()
            view.backgroundColor = verticalCardSwiperView.backgroundColor
            // セル（カード）に配列を表示させる
            let prefectureName: String = prefecturesArray[index]
            cardCell.setRandomBackgroundColor()
            cardCell.prefectureLabel.text = prefectureName
            cardCell.prefectureLabel.textColor = UIColor.white
            return cardCell
        }
        return CardCell()
    }

ビルドしたら完成です。

完成品のgithubはこちらです。