【Xcode/Swift】Cosmosというライブラリを使ってみた

今回はCosmosというライブラリの使い方を解説します。

星5判定みたいな機能が実装出来るっぽいです！

☆今回の完成系

Contents 非表示

プロジェクトの作成、Pod Install、Storyboardの装飾
プログラムと紐付け、コードの記述
ビルドをして挙動の確認
まとめ

プロジェクトの作成、Pod Install、Storyboardの装飾

☆今回使用するライブラリ

参考GitHub – evgenyneu/Cosmos: A star rating control for iOS/tvOS written in SwiftGitHub

プロジェクトを作成してPod Installを行い、白いファイルから開き直した後Storyboardを以下のように装飾

*UIViewは見やすくするため一旦色をつけているだけです、この後イジっていきます。

UIViewを選択し、右側のClass指定部分に “CosmosView”と入力する

この時点で一旦ビルドをするかプロジェクトを開き直すと星が表示されているはずです。

ひとくちメモ

星のサイズ、色、数などは自由に設定が出来ます(以下画像を参考に)

余裕がある人は公式のライブラリを読んでみると色々使い方が詳しく書いてあるので確認してみてください。

プログラムと紐付け、コードの記述

今回はボタンをOutlet Collectionというもので指定して一つのコードで管理していきます。

ボタンを一つ選んでいつものようにCtrlを押しながらドラッグした時に、Connection部分を [Outlet Collection] に変更してください。

次に以下GIFを参考に他のボタンにも紐付けを行ってください。

*GIFの録画時間上ボタン部分しか繋げていませんが下のボタン3つも同様に繋げてください。

全て繋ぎ終わると以下のように表示されているはずです。

Action接続も同様に行いましょう。

ひとくちメモ

今回は各ボタンにtag値を設定してボタンが押された時に表示する星の数を設定します。

以下画像を参考に、Storyboard上でボタンにそれぞれ該当の数字を設定してください。

それでは下準備は全て整ったのでコードを書いていきましょう。


import UIKit
//cosmosの機能を使えるようにする
import Cosmos

class ViewController: UIViewController {
    
    @IBOutlet weak var cosmosView: CosmosView!
    @IBOutlet var rateButton: [UIButton]!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setup()
    }
    
    private func setup() {
        //星の数の初期表示数(0に設定)
        cosmosView.rating = 0
        //ボタンを角丸にする
        rateButton.forEach({ $0.layer.cornerRadius = 20.0 })
    }
    
    @IBAction func rateStarsAction(_ sender: UIButton) {
        //押されたボタンの数に応じて表示する星の数を変更する
        cosmosView.rating = Double(sender.tag)
    }
    
}