[Swift]ドラムロールボタン(くるくる回転して選択するボタン)をUIPickerViewで作る〜GAFAのサイトにジャンプするアプリを例に〜

↑みたいにくるくる回転させて選択するボタンを作ろうとしたら、一筋縄ではいかなかった（ライブラリみたいなものがなかった）ので作り方をシェアします。

完成イメージ(GIF)

GIFをクリックで拡大して見れます。

動作環境

Xcode 11.3
iOS 13.3
iPhone 11 Pro Max (シミュレーター)

コード

今回はstoryboardを使わずに全てコードで実装しています。

ViewController.swift

//  Created by japanesebonobo on 2020/01/10.
//  Copyright © 2020 japanesebonobo. All rights reserved.
//

import UIKit
import SafariServices

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource, UITextFieldDelegate {

    private var myTextField: UITextField!
    let pickerView = UIPickerView()
    // ドラムロールボタンの選択肢を配列にして格納
    let dataSource =  ["Google", "Apple", "Facebook", "Amazon"]
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // UITextFieldの配置するx,yと幅と高さを設定.
        let tWidth: CGFloat = 150
        let tHeight: CGFloat = 30
        let posX: CGFloat = (self.view.bounds.width - tWidth)/2
        let posY: CGFloat = (self.view.bounds.height - tHeight)/2
        
        // UITextFieldを作成する.
        myTextField = UITextField(frame: CGRect(x: posX, y: posY, width: tWidth, height: tHeight))
        
        // 表示する文字を代入する.
        myTextField.text = "START"
        
        myTextField.textAlignment = .center
        
        // Delegateを自身に設定する
        myTextField.delegate = self
        
        // 枠を表示する.
        myTextField.borderStyle = .bezel
        
        //カーソル（キャレット）を非表示
        myTextField.tintColor = UIColor.clear
        
        // myTextFieldをViewに追加する
        self.view.addSubview(myTextField)
        
        
        // pickerViewの配置するx,yと幅と高さを設定.
        pickerView.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: pickerView.bounds.size.height)
        
        // Delegateを自身に設定する
        pickerView.delegate   = self
        
        // 選択肢を自身に設定する
        pickerView.dataSource = self
        
        // pickerViewをViewに追加する
        let vi = UIView(frame: pickerView.bounds)
        vi.backgroundColor = UIColor.white
        vi.addSubview(pickerView)
        
        // UITextField編集時に表示されるキーボードをpickerViewに置き換える
        myTextField.inputView = vi
    }
    
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return dataSource[row]
    }
    
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return dataSource.count
    }
    
    // 各選択肢が選ばれた時の操作
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        switch row {
        case 0:
            //　Googleが選ばれたらHPにアクセスする
            guard let url = URL(string: "https://www.google.com/?client=safari") else { return }
            let safariController = SFSafariViewController(url: url)
            present(safariController, animated: true, completion: nil)
        case 1:
            guard let url = URL(string: "https://www.apple.com/jp/") else { return }
            let safariController = SFSafariViewController(url: url)
            present(safariController, animated: true, completion: nil)
        case 2:
            guard let url = URL(string: "https://www.facebook.com") else { return }
            let safariController = SFSafariViewController(url: url)
            present(safariController, animated: true, completion: nil)
        case 3:
            guard let url = URL(string: "https://www.amazon.co.jp") else { return }
            let safariController = SFSafariViewController(url: url)
            present(safariController, animated: true, completion: nil)
        default:
            break
        }
    }
}

コードの解説

・ドラムロールボタン実装のポイントはUITextFieldを編集する際に出てくるキーボードをUIPickerViewに置き換えることです。
・UITextViewでSTARTボタンを作って、UIPickerViewを作った後、UITextField.inputView(キーボードが出てくるところ)をUIPickerViewに置き換えてます。
・GAFAの各サイトに移動する際にはSafariServicesを用いることで簡単に実装できてます。

雑感

・選択肢をドラッグして離したら選択という感じになっちゃってる。選択肢を確定するボタンがあると便利かも。

参考

UITextView - iPhoneアプリ開発の虎の巻
textfieldの青い棒を消したい

参考にさせていただきました。ありがとうございました。