Swift（iOS）でラジオボタンとチェックボックスを作成するにはどうすればいいですか？
調査ができるアプリを開発しています。私のレイアウトはXMLベースの質問から生成されています。
ラジオボタン（単一選択）とチェックボックス（複数回答）を作成する必要があります。 Swiftに役立つものは何も見つかりませんでした。
誰か考えがありますか？
ラジオボタンとチェックボックスには、組み込まれているものは何もありません。
自分でチェックボックスを簡単に実装できます。あなたのUIControlStateNormalのためのあなたのボタンのためのuncheckedImageとあなたのUIControlStateSelectedのためのcheckedImageをセットすることができます。タップするとボタンの画像が変わり、チェック画像と未チェック画像が切り替わります。
ラジオボタンを使用するには、ラジオボタンとして振る舞うすべてのボタンにArrayを付けておく必要があります。ボタンが押されるたびに、配列内の他のすべてのボタンのチェックを外す必要があります。
ラジオボタンの場合は、 SSRadioButtonsController を使用できます。==コントローラオブジェクトを作成し、それにボタン配列を追加できます。
var radioButtonController = SSRadioButtonsController()
radioButtonController.setButtonsArray([button1!,button2!,button3!])
主な原則は これはここ のようなものです。
チェックボックス
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であなたのビューに追加します。
ラジオボタン
ラジオボタンも同様に解決できます。
例えば、古典的な性別選択女性 - 男：
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!]
}
それが役に立てば幸い。
DLRadioButton をチェックしてください。 Interface Builderから直接ラジオボタンを追加およびカスタマイズできます。 Swiftでも完璧に動作します。
更新：バージョン1.3.2は四角形のボタンを追加し、パフォーマンスも改善しました。
更新：バージョン1.4.4に複数選択オプションが追加されました。チェックボックスとしても使用できます。
更新：バージョン1.4.7はRTL言語サポートを追加しました。
これに使うことができる本当に素晴らしいライブラリがあります（あなたは実際にこれをUISwitchの代わりに使うことができます）： https://github.com/Boris-Em/BEMCheckBox
設定は簡単です。
BEMCheckBox *myCheckBox = [[BEMCheckBox alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
[self.view addSubview:myCheckBox];
それは円形および正方形のタイプのチェックボックスを提供します
そしてそれはアニメーションも行います。
非常にシンプルなチェックボックスコントロール。
@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;
}
}
ラジオボタンを作成する手順
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
}
}
ラジオボタンはあなたのために準備ができています
短い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
}
チェックボックスの場合は、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
}
- 2つのボタンを「YES」と「NO」として作成します。
- BOOLプロパティを作成します。例：isNRICitizen = false
- 両方のボタンに同じボタンを接続してタグを設定します（例：はいボタン - タグ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)
}
チェックボックスボタンをチェックするかどうかの決定は、ビューの範囲外です。ビュー自体は、その内部状態について決定するのではなく、要素を描画することだけに注意を払うべきです。私の提案する実装は以下の通りです。
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)
}
チェックボックスの場合、実際には組み込みの解決策があります 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()
}
しかしながらラジオボタンはカスタム実装を必要とします、他の答えを見てください。
あなたは単に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()
}
}
}