Swift (iOS)에서 라디오 버튼과 체크 박스를 만드는 방법은 무엇입니까?
설문 조사를 할 수있는 앱을 개발 중입니다. 내 레이아웃은 XML 기반 질문에서 생성됩니다.
라디오 버튼 (단일 선택)과 확인란 (복수 답변)을 만들어야합니다. 나는 신속하게 유용한 것을 찾지 못했습니다.
누구나 아이디어가 있습니까?
라디오 버튼 및 체크 박스의 경우 기본 제공되는 항목이 없습니다.
체크 박스를 쉽게 구현할 수 있습니다. 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;
}
}
더 짧은 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
}
라디오 버튼을 만드는 단계
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) UnCheck 버튼에 대한 코드 수행
@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
}
}
라디오 버튼이 준비되었습니다.
확인란의 경우 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
}
UIButton을 하위 클래스로 만들고 필요에 맞게 자체 그리기 코드를 작성할 수 있습니다. 다음 코드를 사용하여 Android와 같은 라디오 버튼을 구현했습니다. 스토리 보드에서도 사용할 수 있습니다. Github repo의 예제보기
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()
}
}
}
- 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)
}
For checkboxes there is actually a built-in solution in the form of UITableViewCell accessories. You can set up your form as a UITableView in which each cell as a selectable option and use accessoryType to set a check mark for selected items.
Here is a pseudo-code example:
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()
}
Radio buttons however do require a custom implementation, see the other answers.
The decision of checking or unchecking the checkbox button is something out of the scope of the view. View itself should only take care of drawing the elements, not deciding about the internal state of that. My suggested implementation is as follows:
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
}
}
It can be used with Interface Builder or programmatically. The usage of the view could be as the following example:
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)
}
참고 URL : https://stackoverflow.com/questions/29117759/how-to-create-radio-buttons-and-checkbox-in-swift-ios
'IT박스' 카테고리의 다른 글
| ASP.NET C #에서 foreach를 사용하여 CheckBoxList에서 선택한 항목의 값을 얻는 방법은 무엇입니까? (0) | 2020.11.03 |
|---|---|
| 내 application.properties 파일의 Spring Boot 앱에서 HikariCP를 어떻게 구성합니까? (0) | 2020.11.03 |
| SQL Server : 테이블의 최대 행 수 (0) | 2020.11.03 |
| 문자열에서 클래스 유형 가져 오기 (0) | 2020.11.03 |
| Android Word-Wrap EditText 텍스트 (0) | 2020.11.03 |