Cách tạo nút radio và hộp kiểm trong nhanh (iOS)?

Tôi đang phát triển một ứng dụng cho phép thực hiện khảo sát. Bố cục của tôi được tạo từ các câu hỏi dựa trên XML.

Tôi cần tạo các nút radio (một lựa chọn) và hộp kiểm (nhiều câu trả lời). Tôi không tìm thấy bất cứ điều gì hữu ích cho nhanh chóng.

Có ai có ý tưởng gì không?

Đối với Radio Buttons và CheckBoxes, không có gì được tích hợp sẵn.

Bạn có thể tự mình triển khai Hộp kiểm một cách dễ dàng. Bạn có thể đặt một Hình ảnh không được kiểm tra cho nút của mình cho UIControlStateNormal và một Hình ảnh đã kiểm tra cho UIControlStateSelected của bạn. Bây giờ khi nhấn, nút sẽ thay đổi hình ảnh của nó và xen kẽ giữa hình ảnh đã chọn và chưa chọn.

Để sử dụng các nút radio, bạn phải giữ Arraycho tất cả các nút mà bạn muốn hoạt động như các nút radio. Bất cứ khi nào một nút được nhấn, bạn cần bỏ chọn tất cả các nút khác trong mảng.

Đối với các nút radio, bạn có thể sử dụng SSRadioButtonsController Bạn có thể tạo một đối tượng bộ điều khiển và thêm mảng nút vào nó như

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

Nguyên tắc chính là một cái gì đó như thế này ở đây .

Hộp kiểm

Bạn có thể tạo điều khiển CheckBox của riêng mình mở rộng UIButton với Swift:

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: UIControl.State.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
        }
    }
}

Và sau đó thêm nó vào chế độ xem của bạn bằng Trình tạo giao diện:

Các nút radio

Radio Buttons có thể được giải quyết theo cách tương tự.

Ví dụ, lựa chọn giới tính cổ điển Phụ nữ - Đàn ông :

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
            }
        }
    }
}

Bạn có thể cài đặt các nút radio của mình như sau:

    override func awakeFromNib() {
        self.view.layoutIfNeeded()
        
        womanRadioButton.selected = true
        manRadioButton.selected = false
    }
    
    override func viewDidLoad() {
        womanRadioButton?.alternateButton = [manRadioButton!]
        manRadioButton?.alternateButton = [womanRadioButton!]
    }

Hy vọng nó giúp.

Kiểm tra DLRadioButton . Bạn có thể thêm và tùy chỉnh các nút radio trực tiếp từ Trình tạo giao diện. Cũng hoạt động với Swifthoàn hảo.

Cập nhật: phiên bản 1.3.2thêm các nút vuông, hiệu suất cũng được cải thiện.

Cập nhật: phiên bản 1.4.4được thêm nhiều tùy chọn lựa chọn, cũng có thể được sử dụng làm hộp kiểm.

Cập nhật: phiên bản 1.4.7thêm hỗ trợ ngôn ngữ RTL.

Swift 5, Hộp kiểm có hoạt ảnh

Tạo một lối thoát của nút

@IBOutlet weak var checkBoxOutlet:UIButton!{
        didSet{
            checkBoxOutlet.setImage(UIImage(named:"unchecked"), for: .normal)
            checkBoxOutlet.setImage(UIImage(named:"checked"), for: .selected)
        }
    }

Tạo tiện ích mở rộng UIButton

extension UIButton {
    //MARK:- Animate check mark
    func checkboxAnimation(closure: @escaping () -> Void){
        guard let image = self.imageView else {return}
        
        UIView.animate(withDuration: 0.1, delay: 0.1, options: .curveLinear, animations: {
            image.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
            
        }) { (success) in
            UIView.animate(withDuration: 0.1, delay: 0, options: .curveLinear, animations: {
                self.isSelected = !self.isSelected
                //to-do
                closure()
                image.transform = .identity
            }, completion: nil)
        }
        
    }
}

Cách sử dụng

 @IBAction func checkbox(_ sender: UIButton){
        sender.checkboxAnimation {
            print("I'm done")
            //here you can also track the Checked, UnChecked state with sender.isSelected
            print(sender.isSelected)
            
        }
}

Kiểm tra Ví dụ của tôi cho Hộp kiểm và nút Radio https://github.com/rashidlatif55/CheckBoxAndRadioButton

Có một thư viện thực sự tuyệt vời mà bạn có thể sử dụng cho việc này (bạn thực sự có thể sử dụng nó thay cho UISwitch): https://github.com/Boris-Em/BEMCheckBox

Thiết lập dễ dàng:

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

Nó cung cấp cho các hộp kiểm loại hình tròn và hình vuông

Và nó cũng có hoạt ảnh:

Một điều khiển hộp kiểm rất đơn giản.

 @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;
    }
}

phiên bản ios swift 4 ngắn hơn:

@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
    }

Giải pháp cho Nút radio trong Swift 4.2 mà không cần sử dụng thư viện của bên thứ ba

Tạo tệp RadioButtonController.swift và đặt mã sau vào đó:

import UIKit

class RadioButtonController: NSObject {
    var buttonsArray: [UIButton]! {
        didSet {
            for b in buttonsArray {
                b.setImage(UIImage(named: "radio_off"), for: .normal)
                b.setImage(UIImage(named: "radio_on"), for: .selected)
            }
        }
    }
    var selectedButton: UIButton?
    var defaultButton: UIButton = UIButton() {
        didSet {
            buttonArrayUpdated(buttonSelected: self.defaultButton)
        }
    }

    func buttonArrayUpdated(buttonSelected: UIButton) {
        for b in buttonsArray {
            if b == buttonSelected {
                selectedButton = b
                b.isSelected = true
            } else {
                b.isSelected = false
            }
        }
    }
}

Sử dụng nó như bên dưới trong tệp bộ điều khiển chế độ xem của bạn:

import UIKit

class CheckoutVC: UIViewController {

    @IBOutlet weak var btnPaytm: UIButton!
    @IBOutlet weak var btnOnline: UIButton!
    @IBOutlet weak var btnCOD: UIButton!

    let radioController: RadioButtonController = RadioButtonController()

    override func viewDidLoad() {
        super.viewDidLoad()

        radioController.buttonsArray = [btnPaytm,btnCOD,btnOnline]
        radioController.defaultButton = btnPaytm
    }

    @IBAction func btnPaytmAction(_ sender: UIButton) {
        radioController.buttonArrayUpdated(buttonSelected: sender)
    }

    @IBAction func btnOnlineAction(_ sender: UIButton) {
        radioController.buttonArrayUpdated(buttonSelected: sender)
    }

    @IBAction func btnCodAction(_ sender: UIButton) {
        radioController.buttonArrayUpdated(buttonSelected: sender)
    }
}

Đảm bảo thêm hình ảnh radio_off và radio_on trong Nội dung.

Kết quả:

Các bước tạo nút radio

Bước cơ bản: sử dụng hai nút. đặt hình ảnh cho cả giống như đã chọn và không được chọn. hơn là thêm hành động vào cả hai nút. bây giờ bắt đầu mã

1) Tạo biến:

var btnTag    : Int = 0

2) Trong ViewDidLoad, Xác định:

 btnTag = btnSelected.tag

3) Hiện đang ở trong hành động chạm đã chọn:

 @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) Làm mã cho Nút Bỏ kiểm tra

 @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
    }
}

Nút radio đã sẵn sàng cho bạn

Đối với hộp kiểm, bạn không cần phải phân lớp UIButton. Nó đã có isSelectedtài sản để xử lý việc này.

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)

Sau đó, trong phương thức hành động chuyển đổi isSelectedtrạng thái của nó .

@objc func toggleCheckboxSelection() {
    checkbox.isSelected = !checkbox.isSelected
}

Tôi đã tạo một lớp siêu đơn giản để xử lý vấn đề này trong ứng dụng Mac mà tôi đang làm việc. Hy vọng rằng, điều này là hữu ích cho ai đó

Lớp RadioButtonController:

class RadioButtonController: NSObject {

var buttonArray : [NSButton] = []
var currentleySelectedButton : NSButton?
var defaultButton : NSButton = NSButton() {
    didSet {
        buttonArrayUpdated(buttonSelected: self.defaultButton)
    }
}

func buttonArrayUpdated(buttonSelected : NSButton) {
    for button in buttonArray {
        if button == buttonSelected {
            currentleySelectedButton = button
            button.state = .on
        } else {
            button.state = .off
        }
    }
}

}

Thực hiện trong View Controller:

class OnboardingDefaultLaunchConfiguration: NSViewController {

let radioButtonController : RadioButtonController = RadioButtonController()
@IBOutlet weak var firstRadioButton: NSButton!
@IBOutlet weak var secondRadioButton: NSButton!

@IBAction func folderRadioButtonSelected(_ sender: Any) {
    radioButtonController.buttonArrayUpdated(buttonSelected: folderGroupRadioButton)
}

@IBAction func fileListRadioButtonSelected(_ sender: Any) {
    radioButtonController.buttonArrayUpdated(buttonSelected: fileListRadioButton)
}

override func viewDidLoad() {
    super.viewDidLoad()
    radioButtonController.buttonArray = [firstRadioButton, secondRadioButton]
    radioButtonController.defaultButton = firstRadioButton
}

}

Bạn có thể chỉ cần phân lớp UIButton và viết mã bản vẽ của riêng bạn để phù hợp với nhu cầu của bạn. Tôi đã triển khai một nút radio giống như của android bằng cách sử dụng mã sau. Nó cũng có thể được sử dụng trong bảng phân cảnh. Xem ví dụ trong repo 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()
    }
}
}

1. Tạo 2 nút một là "CÓ" và nút khác là "KHÔNG".
2. Tạo thuộc tính BOOL Ví dụ: isNRICitizen = false
3. Cung cấp kết nối nút giống nhau cho cả hai nút và đặt thẻ (Ví dụ: nút Có - thẻ 10 và nút Không - thẻ 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)
}

Đối với các hộp kiểm, thực sự có một giải pháp tích hợp ở dạng phụ kiện UITableViewCell. Bạn có thể thiết lập biểu mẫu của mình dưới dạng UITableView trong đó mỗi ô như một tùy chọn có thể chọn và sử dụng accessoryTypeđể đặt dấu kiểm cho các mục đã chọn.

Đây là một ví dụ về mã giả:

    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()
    }

Tuy nhiên, các nút radio yêu cầu triển khai tùy chỉnh, hãy xem các câu trả lời khác.

Quyết định chọn hoặc bỏ chọn nút hộp kiểm là một cái gì đó nằm ngoài phạm vi của chế độ xem. View chính nó chỉ nên quan tâm đến việc vẽ các phần tử, không quyết định về trạng thái bên trong của nó. Cách triển khai đề xuất của tôi như sau:

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
    }
}

Nó có thể được sử dụng với Trình tạo giao diện hoặc theo chương trình. Việc sử dụng chế độ xem có thể là ví dụ sau:

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)
}

Swift 5.0 Cập nhật RadioButton Đơn giản cho Swift (Không có Thư viện)

Đầu tiên, đặt hình ảnh thành nút Một được kiểm tra và Bỏ chọn lần thứ hai.

Sau đó Cung cấp 2 Outlet Of RadioButton.

@IBOutlet weak var radioMale: UIButton!
@IBOutlet weak var radioFemale: UIButton!

Tạo IBAction với cả hai hành động nút trong một phương pháp.

 @IBAction func btnRadioTapped(_ sender: UIButton) {

    radioMale.setImage(UIImage(named: "Unchecked"), for: .normal)
    radioFemale.setImage(UIImage(named: "Unchecked"), for: .normal)

    if sender.currentImage == UIImage(named: "Unchecked"){

        sender.setImage(UIImage(named: "Checked"), for: .normal)

    }else{

        sender.setImage(UIImage(named: "Unchecked"), for: .normal)
    }

}

Tôi không có đủ danh tiếng để bình luận, vì vậy tôi sẽ để lại phiên bản Salil Dwahan của tôi của tôi ở đây. Hoạt động cho Swift 5, XCode 11.3.

Đầu tiên, hãy đặt nút của bạn trên IB, chọn loại "Tùy chỉnh" và tạo một lối thoát và một hành động với Bố cục Trợ lý ( Ctrl+ Kéo). Bao gồm mã sau và nó sẽ kết thúc như thế này:

class YourViewController: UIViewController {
    @IBOutlet weak var checkbox: UIButton!
    @IBAction func checkboxTapped(_ sender: UIButton) {
        checkbox.isSelected = !checkbox.isSelected
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        checkbox.setImage(UIImage.init(named: "checkMark"), for: .selected)
    }
}

Đừng quên thêm hình ảnh vào Tài sản và đổi tên cho phù hợp!

checkbox.isSelected là cách để kiểm tra

Mặc dù một số câu trả lời đã đề cập đúng rằng chúng ta có thể sử dụng Trạng thái đã chọn để đặt hình ảnh cho trạng thái Đã chọn của nút, nhưng nó sẽ không hoạt động thanh lịch khi nút phải có cả hình ảnh và văn bản.

Giống như nhiều người, tôi đã kết thúc bằng cách phân lớp UIButton; tuy nhiên, hỗ trợ thêm cho việc thiết lập hình ảnh từ Trình tạo giao diện.

Dưới đây là mã của tôi:

import UIKit

class CustomCheckbox: UIButton {

    @IBInspectable var defaultStateImage: UIImage? = nil {
        didSet{
            self.setNeedsDisplay()
        }
    }

    @IBInspectable var selectedStateImage: UIImage? = nil {
        didSet{
            self.setNeedsDisplay()
        }
    }

    @IBInspectable var gapPadding: CGFloat = 0 {
        didSet{
            self.setNeedsDisplay()
        }
    }

    @IBInspectable var isChecked: Bool = false {
        didSet{
            self.setNeedsDisplay()
        }
    }

    var defaultImageView: UIImageView? = nil
    var selectedImageView: UIImageView? = nil

    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }
    required public init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        setup()
    }

    func setup() {
        if(defaultStateImage != nil) {
            defaultImageView = UIImageView(image: defaultStateImage)
            defaultImageView?.translatesAutoresizingMaskIntoConstraints = false

            addSubview(defaultImageView!)

            let length = CGFloat(16)
            titleEdgeInsets.left += length

            NSLayoutConstraint.activate([
                defaultImageView!.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: -gapPadding),
                defaultImageView!.centerYAnchor.constraint(equalTo: self.titleLabel!.centerYAnchor, constant: 0),
                defaultImageView!.widthAnchor.constraint(equalToConstant: length),
                defaultImageView!.heightAnchor.constraint(equalToConstant: length)
            ])
        }

        if(selectedStateImage != nil) {
            selectedImageView = UIImageView(image: selectedStateImage)
            selectedImageView!.translatesAutoresizingMaskIntoConstraints = false

            addSubview(selectedImageView!)

            let length = CGFloat(16)
            titleEdgeInsets.left += length

            NSLayoutConstraint.activate([
                selectedImageView!.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: -gapPadding),
                selectedImageView!.centerYAnchor.constraint(equalTo: self.titleLabel!.centerYAnchor, constant: 0),
                selectedImageView!.widthAnchor.constraint(equalToConstant: length),
                selectedImageView!.heightAnchor.constraint(equalToConstant: length)
            ])
        }

        if defaultImageView != nil {
            defaultImageView!.isHidden = isChecked
        }

        if selectedImageView != nil  {
            selectedImageView!.isHidden = !isChecked
        }

        self.addTarget(self, action: #selector(checkChanged(_:)), for: .touchUpInside)
    }

    @objc func checkChanged(_ btn : UIButton){
        self.isChecked = !self.isChecked

        if defaultImageView != nil {
            defaultImageView!.isHidden = isChecked
        }

        if selectedImageView != nil  {
            selectedImageView!.isHidden = !isChecked
        }
    }
}