Tinder風UIの実装

# 完成品

![スクリーンショット 2022-03-22 15.37.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/6e8a600b-ee7b-5251-d68b-675c851fbc62.png)

# 使用ライブラリ
```
'VerticalCardSwiper'
```

参考URL
[https://www.cocoacontrols.com/controls/verticalcardswiper](URL)

CocoaPodsにて
```
 pod 'VerticalCardSwiper'
```
をPodfileに記載の上、pod intallする

# 実装

VerticalCardSwiperはUIViewを継承したものなので選択する
![スクリーンショット 2022-03-22 15.20.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/b01fd6f4-1b47-6f4c-63a7-1d62ce13eb5f.png)


![スクリーンショット 2022-03-22 15.21.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/9989a4e7-f23f-1e22-3bf2-e5f468462f83.png)

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

![スクリーンショット 2022-03-22 15.23.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/35f4c0af-0437-321b-e3e9-e1ae87fae36d.png)

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にはチェックがついていることを確認してください。
![スクリーンショット 2022-03-22 15.52.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/cbb6c4dc-0e39-b569-b67a-423a0a1a5e0d.png)


CardViewCellにLabelを中央に貼り付けます。
またIdentifierの名前をCardViewCellと命名します。
![スクリーンショット 2022-03-22 15.58.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/8c732cfe-6f5d-0c17-76bf-1138e33faa23.png)

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は[こちら](https://github.com/mikekondo/MiniApp-VerticalCardSwiper)です。