web-dev-qa-db-ja.com

Swift(iOS)でラジオボタンとチェックボックスを作成するにはどうすればいいですか?

調査ができるアプリを開発しています。私のレイアウトはXMLベースの質問から生成されています。

ラジオボタン(単一選択)とチェックボックス(複数回答)を作成する必要があります。 Swiftに役立つものは何も見つかりませんでした。

誰か考えがありますか?

63
Vannian

ラジオボタンとチェックボックスには、組み込まれているものは何もありません。

自分でチェックボックスを簡単に実装できます。あなたのUIControlStateNormalのためのあなたのボタンのためのuncheckedImageとあなたのUIControlStateSelectedのためのcheckedImageをセットすることができます。タップするとボタンの画像が変わり、チェック画像と未チェック画像が切り替わります。

ラジオボタンを使用するには、ラジオボタンとして振る舞うすべてのボタンにArrayを付けておく必要があります。ボタンが押されるたびに、配列内の他のすべてのボタンのチェックを外す必要があります。

ラジオボタンの場合は、 SSRadioButtonsController を使用できます。==コントローラオブジェクトを作成し、それにボタン配列を追加できます。

var radioButtonController = SSRadioButtonsController()
radioButtonController.setButtonsArray([button1!,button2!,button3!])

主な原則は これはここ のようなものです。

35
S Shahid

チェックボックス

SwiftでUIButtonを拡張する独自のCheckBoxコントロールを作成できます。

import UIKit

class CheckBox: UIButton {
    // Images
    let checkedImage = UIImage(named: "ic_check_box")! as UIImage
    let uncheckedImage = UIImage(named: "ic_check_box_outline_blank")! as UIImage

    // Bool property
    var isChecked: Bool = false {
        didSet{
            if isChecked == true {
                self.setImage(checkedImage, for: UIControl.State.normal)
            } else {
                self.setImage(uncheckedImage, for: UIControlState.normal)
            }
        }
    }

    override func awakeFromNib() {
        self.addTarget(self, action:#selector(buttonClicked(sender:)), for: UIControl.Event.touchUpInside)
        self.isChecked = false
    }

    @objc func buttonClicked(sender: UIButton) {
        if sender == self {
            isChecked = !isChecked
        }
    }
}

そしてそれをInterface Builderであなたのビューに追加します。

enter image description here

ラジオボタン

ラジオボタンも同様に解決できます。

例えば、古典的な性別選択女性 -

enter image description here

import UIKit

class RadioButton: UIButton {
    var alternateButton:Array<RadioButton>?

    override func awakeFromNib() {
        self.layer.cornerRadius = 5
        self.layer.borderWidth = 2.0
        self.layer.masksToBounds = true
    }

    func unselectAlternateButtons(){
        if alternateButton != nil {
            self.isSelected = true

            for aButton:RadioButton in alternateButton! {
                aButton.isSelected = false
            }
        }else{
            toggleButton()
        }
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        unselectAlternateButtons()
        super.touchesBegan(touches, with: event)
    }

    func toggleButton(){
        self.isSelected = !isSelected
    }

    override var isSelected: Bool {
        didSet {
            if isSelected {
                self.layer.borderColor = Color.turquoise.cgColor
            } else {
                self.layer.borderColor = Color.grey_99.cgColor
            }
        }
    }
}

あなたはこのようにラジオボタンを初期化することができます:

    override func awakeFromNib() {
        self.view.layoutIfNeeded()

        womanRadioButton.selected = true
        manRadioButton.selected = false
    }

    override func viewDidLoad() {
        womanRadioButton?.alternateButton = [manRadioButton!]
        manRadioButton?.alternateButton = [womanRadioButton!]
    }

それが役に立てば幸い。

122
crubio

DLRadioButton をチェックしてください。 Interface Builderから直接ラジオボタンを追加およびカスタマイズできます。 Swiftでも完璧に動作します。

Swift Radio Button for iOS

更新:バージョン1.3.2は四角形のボタンを追加し、パフォーマンスも改善しました。

更新:バージョン1.4.4に複数選択オプションが追加されました。チェックボックスとしても使用できます。

更新:バージョン1.4.7はRTL言語サポートを追加しました。

22
David Liu

これに使うことができる本当に素晴らしいライブラリがあります(あなたは実際にこれをUISwitchの代わりに使うことができます): https://github.com/Boris-Em/BEMCheckBox

設定は簡単です。

BEMCheckBox *myCheckBox = [[BEMCheckBox alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
[self.view addSubview:myCheckBox];

それは円形および正方形のタイプのチェックボックスを提供します

enter image description here

そしてそれはアニメーションも行います。

enter image description here

8
Calvin Alvin

非常にシンプルなチェックボックスコントロール。

 @IBAction func btn_box(sender: UIButton) {
    if (btn_box.selected == true)
    {
        btn_box.setBackgroundImage(UIImage(named: "box"), forState: UIControlState.Normal)

            btn_box.selected = false;
    }
    else
    {
        btn_box.setBackgroundImage(UIImage(named: "checkBox"), forState: UIControlState.Normal)

        btn_box.selected = true;
    }
}
3

ラジオボタンを作成する手順

BasicStep:Two Buttonを取ります。選択されたものと選択されていないものの両方に画像を設定します。両方のボタンにアクションを追加するよりも。今すぐ開始コード

1)変数を作成します。

var btnTag    : Int = 0

2)ViewDidLoadで次のことを定義します。

 btnTag = btnSelected.tag

3)今選択したタップアクションで:

 @IBAction func btnSelectedTapped(sender: AnyObject) {
    btnTag = 1
    if btnTag == 1 {
      btnSelected.setImage(UIImage(named: "icon_radioSelected"), forState: .Normal)
      btnUnSelected.setImage(UIImage(named: "icon_radioUnSelected"), forState: .Normal)
     btnTag = 0
    }
}

4)ボタンのチェックを外します

 @IBAction func btnUnSelectedTapped(sender: AnyObject) {
    btnTag = 1
    if btnTag == 1 {
        btnUnSelected.setImage(UIImage(named: "icon_radioSelected"), forState: .Normal)
        btnSelected.setImage(UIImage(named: "icon_radioUnSelected"), forState: .Normal)
        btnTag = 0
    }
}

ラジオボタンはあなたのために準備ができています

2
Krutarth Patel

短いIOS Swift 4バージョン:

@IBAction func checkBoxBtnTapped(_ sender: UIButton) {
        if checkBoxBtn.isSelected {
            checkBoxBtn.setBackgroundImage(#imageLiteral(resourceName: "ic_signup_unchecked"), for: .normal)
        } else {
            checkBoxBtn.setBackgroundImage(#imageLiteral(resourceName: "ic_signup_checked"), for:.normal)
        }
        checkBoxBtn.isSelected = !checkBoxBtn.isSelected
    }
2
Gulz

チェックボックスの場合は、UIButtonをサブクラス化する必要はありません。これを処理するためのisSelectedプロパティがすでにあります。

checkbox = UIButton.init(type: .custom)
checkbox.setImage(UIImage.init(named: "iconCheckboxOutlined"), for: .normal)
checkbox.setImage(UIImage.init(named: "iconCheckboxFilled"), for: .selected)
checkbox.addTarget(self, action: #selector(self.toggleCheckboxSelection), for: .touchUpInside)

そしてアクションメソッドのトグルではisSelectedの状態になります。

@objc func toggleCheckboxSelection() {
    checkbox.isSelected = !checkbox.isSelected
}
1
Salil Dhawan
  1. 2つのボタンを「YES」と「NO」として作成します。
  2. BOOLプロパティを作成します。例:isNRICitizen = false
  3. 両方のボタンに同じボタンを接続してタグを設定します(例:はいボタン - タグ10といいえボタン - タグ20)
@IBAction func btnAction(_ sender:UIButton) {

isNRICitizen = sender.tag == 10 ? true : false
isNRICitizen ? self.nriCitizenBtnYes.setImage(#imageLiteral(resourceName: "radioChecked"), for: .normal) : self.nriCitizenBtnYes.setImage(#imageLiteral(resourceName: "radioUnchecked"), for: .normal)
        isNRICitizen ? self.nriCitizenBtnNo.setImage(#imageLiteral(resourceName: "radioUnchecked"), for: .normal) : self.nriCitizenBtnNo.setImage(#imageLiteral(resourceName: "radioChecked"), for: .normal)
}
0
Ravindra Kishan

チェックボックスボタンをチェックするかどうかの決定は、ビューの範囲外です。ビュー自体は、その内部状態について決定するのではなく、要素を描画することだけに注意を払うべきです。私の提案する実装​​は以下の通りです。

import UIKit

class Checkbox: UIButton {

    let checkedImage = UIImage(named: "checked")
    let uncheckedImage = UIImage(named: "uncheked")
    var action: ((Bool) -> Void)? = nil

    private(set) var isChecked: Bool = false {
        didSet{
            self.setImage(
                self.isChecked ? self.checkedImage : self.uncheckedImage,
                for: .normal
            )
        }
    }

    override func awakeFromNib() {
        self.addTarget(
            self,
            action:#selector(buttonClicked(sender:)),
            for: .touchUpInside
        )
        self.isChecked = false
    }

    @objc func buttonClicked(sender: UIButton) {
        if sender == self {
            self.action?(!self.isChecked)
        }
    }

    func update(checked: Bool) {
        self.isChecked = checked
    }
}

Interface Builderまたはプログラムで使用できます。ビューの使い方は次のようになります。

let checkbox_field = Checkbox(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
checkbox_field.action = { [weak checkbox_field] checked in
    // any further checks and business logic could be done here
    checkbox_field?.update(checked: checked)
}
0

チェックボックスの場合、実際には組み込みの解決策があります UITableViewCellアクセサリの形式で。フォームをUITableViewとして設定し、各セルを選択可能なオプションとして選択し、accessoryTypeを使用して選択した項目にチェックマークを付けることができます。

これは疑似コードの例です。

    let items = [SelectableItem]

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {


        // Get the item for the current row
        let item = self.items[indexPath.row]

        // ...dequeue and set up the `cell` as you wish...

        // Use accessoryType property to mark the row as checked or not...
        cell.accessoryType = item.selected ? .checkmark : .none
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

        // Unselect row
        tableView.deselectRow(at: indexPath, animated: false)

        // Toggle selection
        let item = self.items[indexPath.row]
        item.selected = !item.selected
        tableView.reloadData()
    }

しかしながらラジオボタンはカスタム実装を必要とします、他の答えを見てください。

0
Aron

あなたは単にUIButtonをサブクラス化してあなたのニーズに合うようにあなた自身の描画コードを書くことができます。次のコードを使用して、Androidのようなラジオボタンを実装しました。ストーリーボードでも使用できます。 Githubリポジトリの例を参照

import UIKit

@IBDesignable
class SPRadioButton: UIButton {

@IBInspectable
var gap:CGFloat = 8 {
    didSet {
        self.setNeedsDisplay()
    }
}

@IBInspectable
var btnColor: UIColor = UIColor.green{
    didSet{
        self.setNeedsDisplay()
    }
}

@IBInspectable
var isOn: Bool = true{
    didSet{
        self.setNeedsDisplay()
    }
}

override func draw(_ rect: CGRect) {
    self.contentMode = .scaleAspectFill
    drawCircles(rect: rect)
}


//MARK:- Draw inner and outer circles
func drawCircles(rect: CGRect){
    var path = UIBezierPath()
    path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: rect.width, height: rect.height))

    let circleLayer = CAShapeLayer()
    circleLayer.path = path.cgPath
    circleLayer.lineWidth = 3
    circleLayer.strokeColor = btnColor.cgColor
    circleLayer.fillColor = UIColor.white.cgColor
    layer.addSublayer(circleLayer)

    if isOn {
        let innerCircleLayer = CAShapeLayer()
        let rectForInnerCircle = CGRect(x: gap, y: gap, width: rect.width - 2 * gap, height: rect.height - 2 * gap)
        innerCircleLayer.path = UIBezierPath(ovalIn: rectForInnerCircle).cgPath
        innerCircleLayer.fillColor = btnColor.cgColor
        layer.addSublayer(innerCircleLayer)
    }
    self.layer.shouldRasterize =  true
    self.layer.rasterizationScale = UIScreen.main.nativeScale
}

/*
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    isOn = !isOn
    self.setNeedsDisplay()
}
*/    

override func awakeFromNib() {
    super.awakeFromNib()
    addTarget(self, action: #selector(buttonClicked(sender:)), for: UIControl.Event.touchUpInside)
    isOn = false
}

@objc func buttonClicked(sender: UIButton) {
    if sender == self {
        isOn = !isOn
        setNeedsDisplay()
    }
}
}
0
Nikesh Jha