↑같이 빙글빙글 회전시켜 선택하는 버튼을 만들려고 하면, 일근줄에서는 가지 않았다(라이브러리 같은 것이 없었다) 때문에 만드는 방법을 공유합니다.

완성 이미지(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의 파란색 막대를 지우고 싶습니다.

참고로 했습니다. 고마워요.