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

<img width="372" alt="EF0DBB08-CC7D-4ECF-9C09-4C1DB01CE7BD.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296645/0a6e735f-046e-c571-1e0f-52905869a67b.jpeg">
↑みたいにくるくる回転させて選択するボタンを作ろうとしたら、一筋縄ではいかなかった（ライブラリみたいなものがなかった）ので作り方をシェアします。

#完成イメージ(GIF)
GIFをクリックで拡大して見れます。
<img height="500" width="表示幅" alt="ezgif.com-video-to-gif.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296645/9be5e27c-a2f6-748d-08c1-6f96848f040e.gif">

#動作環境
Xcode 11.3
iOS 13.3
iPhone 11 Pro Max (シミュレーター)

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

**ViewController.swift**

```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アプリ開発の虎の巻](https://iphone-tora.sakura.ne.jp/uitextview.html)
[textfieldの青い棒を消したい](https://ja.stackoverflow.com/questions/28246/textfieldの青い棒を消したい)

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