[Swift5]初心者向け画像のみでラジオボタン作成[ライブラリ無し]

はじめに

• アプリにラジオボタンが必要になった時ライブラリでの実装を検討したことがある方いらっしゃると思います。
• 今回ライブラリ無し、画像のみで実装するラジオボタンを自作いたしましたので紹介いたいと思います。
• 少しコードを変えるだけで複数選択も可能です。
  誰かの選択肢の一つになればと思います。

このようなものを作ります

1.準備

• ■四角い画像
• ✔︎チェック画像

これらを無料素材サイトなどからダウンロードしておきます。

2.StoryBoardに並べる

画像をStoryboard上に並べます。

例）

• ■四角画像はUIButtonとして配置します
• ✔︎チェック画像はUIImageとして配置します
• ✔︎チェック画像にtagを１〜４を設定しておきます

3.チェックの初期化

ViewDidLoad内などに以下を記述してチェックボタンの初期表示を設定します

• 例）falseのみチェックボタン表示

        self.view.viewWithTag(1)?.isHidden = false
        self.view.viewWithTag(2)?.isHidden = true
        self.view.viewWithTag(3)?.isHidden = true
        self.view.viewWithTag(4)?.isHidden = true

4.タップで１つのみ選択できるようにする

実装例）isHiddenで単純に表示非表示しています

    @IBAction func whiteButton(_ sender: Any) {
        self.view.viewWithTag(1)?.isHidden = false
        self.view.viewWithTag(2)?.isHidden = true
        self.view.viewWithTag(3)?.isHidden = true
        self.view.viewWithTag(4)?.isHidden = true
    }
    @IBAction func blueButton(_ sender: Any) {
        self.view.viewWithTag(1)?.isHidden = true
        self.view.viewWithTag(2)?.isHidden = false
        self.view.viewWithTag(3)?.isHidden = true
        self.view.viewWithTag(4)?.isHidden = true
    }
    @IBAction func yellowButton(_ sender: Any) {
        self.view.viewWithTag(1)?.isHidden = true
        self.view.viewWithTag(2)?.isHidden = true
        self.view.viewWithTag(3)?.isHidden = false
        self.view.viewWithTag(4)?.isHidden = true
    }
    @IBAction func pinkButton(_ sender: Any) {
        self.view.viewWithTag(1)?.isHidden = true
        self.view.viewWithTag(2)?.isHidden = true
        self.view.viewWithTag(3)?.isHidden = true
        self.view.viewWithTag(4)?.isHidden = false
    }

5.選択情報を保存する

UserDefaultsに選択情報を保存する場合の例です。

• 保存ボタンを作成し、それをクリックしたら以下が発動するようにすれば良いでしょう。
• 以下の例では1~4番をチェックされた箇所ごとに振ってdataArrayに入れています。

        if self.view.viewWithTag(1)?.isHidden == false{
            dataArray.append(1)
        }else if self.view.viewWithTag(2)?.isHidden == false{
            dataArray.append(2)
        }else if self.view.viewWithTag(3)?.isHidden == false{
            dataArray.append(3)
        }else if self.view.viewWithTag(4)?.isHidden == false{
            dataArray.append(4)
        }
        UserDefaults.standard.set(colorArray, forKey: "color")

まとめ

• SwiftはtagとisHiddenで簡単に判定が行える
• CSSと違いButtonの上に画像を配置してもボタンの判定がある

これらのメリットを利用して簡単に画像配置だけでシンプルにラジオボタンを実装しました。
複数選択もコードを少し変えて実装できます。

書いた経緯

プライベートで自作アプリを作成中ラジオボタンが必要になり、自作してみました。
ネット上で実装方法を検索したところライブラリでの実装の記事ばかりでしたので、この記事がどなたかの参考になればと思い、情報整理がてら投稿いたしました。
もし参考になればいいねくださると励みになります。