Флажок в приложении iOS - PullRequest
35 голосов
/ 16 марта 2009

Мне нужно добавить элементы управления флажками в мою форму. Я знаю, что в iOS SDK такого контроля нет. Как я мог это сделать?

Ответы [ 13 ]

32 голосов
/ 11 апреля 2010

это тоже меня бесит, и я нашел другое решение, которое подходит мне и не требует использования изображений.

  1. Добавление нового объекта метки в Interface Builder.
  2. Создайте свойство IBOutlet в Xcode и подключите его к нему. В приведенном ниже коде я назвал его «полностью оплаченным», поскольку я хочу знать, полностью ли кто-то заплатил сумму денег.
  3. Добавьте 2 функции ниже. Функция «touchesBegan» проверяет, коснулся ли вы где-нибудь внутри объекта метки «fullPaid» и, если это так, вызывает функцию «togglePaidStatus». Функция 'togglePaidStatus' устанавливает две строки, которые имеют символы Юникода, представляющие пустое поле (\ u2610) и отмеченный флажок (\ u2611) соответственно. Затем он сравнивает то, что в данный момент находится в объекте «fullPaid», и переключает его с другой строкой.

Возможно, вы захотите вызвать функцию togglePaidStatus в функции viewDidLoad, чтобы изначально установить для нее пустую строку.

Очевидно, что вы можете добавить дополнительные проверки, чтобы пользователи не переключали флажок, если метка не включена, но это не показано ниже.

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];   
    if (CGRectContainsPoint([fullyPaid frame], [touch locationInView:self.view]))
    {
        [self togglePaidStatus];
    }
}
-(void) togglePaidStatus
{
    NSString *untickedBoxStr = [[NSString alloc] initWithString:@"\u2610"];
    NSString *tickedBoxStr = [[NSString alloc] initWithString:@"\u2611"];   

    if ([fullyPaid.text isEqualToString:tickedBoxStr])
    {
        fullyPaid.text = untickedBoxStr;
    }
    else
    {
        fullyPaid.text = tickedBoxStr;
    }

    [tickedBoxStr release];
    [untickedBoxStr release];
}
25 голосов
/ 16 марта 2009

Как правило, вы будете использовать UISwitch для функциональности, подобной флажкам.

Вы можете свернуть свой собственный, хотя, используя элемент управления изображением с двумя изображениями (отмечено / не отмечено) и переключая изображения, когда они касаются элемента управления /

11 голосов
/ 16 марта 2009

Если вы показываете группу параметров, и пользователь может выбрать один из них, используйте табличное представление с дополнительным флажком и другим цветом текста в выбранной строке.

Если у вас есть один вариант, лучше всего использовать переключатель. Если вы не можете или не хотите, используйте кнопку, устанавливая обычное изображение в пустое поле, а выбранное изображение - в отмеченное поле. Вам придется сделать эти два изображения самостоятельно или найти для них стоковую графику.

8 голосов
/ 19 марта 2014

Расширяясь до Идея Адриана , я достиг этого, используя очень простой подход.
Моя идея состоит в том, чтобы изменить текст кнопки (скажем, checkBtn) в зависимости от ее состояния, а затем изменить состояние кнопки в ее IBAction.
Ниже приведен код, как я это сделал:

- (void)viewDidLoad
{
    [super viewDidLoad];

    [checkBtn setTitle:@"\u2610" forState:UIControlStateNormal];    // uncheck the button in normal state
    [checkBtn setTitle:@"\u2611" forState:UIControlStateSelected];  // check the button in selected state
}

- (IBAction)checkButtonTapped:(UIButton*)sender {
    sender.selected = !sender.selected;    // toggle button's selected state  

    if (sender.state == UIControlStateSelected) {    
        // do something when button is checked 
    } else {
        // do something when button is unchecked
    }
}
6 голосов
/ 31 декабря 2014

Вот моя версия флажка для iphone.

Это единственный класс, который расширяет UIButton. Это просто, поэтому я вставлю это сюда.

Содержимое файла CheckBoxButton.h

#import <UIKit/UIKit.h>

@interface CheckBoxButton : UIButton

@property(nonatomic,assign)IBInspectable BOOL isChecked;

@end

Содержимое файла CheckBoxButton.m

#import "CheckBoxButton.h"

@interface CheckBoxButton()

@property(nonatomic,strong)IBInspectable UIImage* checkedStateImage;
@property(nonatomic,strong)IBInspectable UIImage* uncheckedStateImage;

@end

@implementation CheckBoxButton

-(id)init
{
    self = [super init];

    if(self)
    {
        [self addTarget:self action:@selector(switchState) forControlEvents:UIControlEventTouchUpInside];
    }

    return self;
}

-(id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];

    if(self)
    {
        [self addTarget:self action:@selector(switchState) forControlEvents:UIControlEventTouchUpInside];
    }

    return self;
}

-(id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];

    if(self)
    {
        [self addTarget:self action:@selector(switchState) forControlEvents:UIControlEventTouchUpInside];
    }

    return self;
}

-(void)setIsChecked:(BOOL)isChecked
{
    _isChecked = isChecked;

    if(isChecked)
    {
        [self setImage:self.checkedStateImage forState:UIControlStateNormal];
    }
    else
    {
        [self setImage:self.uncheckedStateImage forState:UIControlStateNormal];
    }
}

-(void)switchState
{
    self.isChecked = !self.isChecked;
    [self sendActionsForControlEvents:UIControlEventValueChanged];
}

@end

Вы можете установить изображения для отмеченных / не отмеченных, а также для свойства isChecked в инспекторе атрибутов Visual Studio.

enter image description here

Чтобы добавить CheckBoxButton в раскадровку или XIB, просто добавьте UIButton и установите пользовательский класс, как на следующем изображении.

enter image description here

Кнопка будет отправлять событие UIControlEventValueChanged каждый раз, когда изменяется состояние isChecked.

6 голосов
/ 21 мая 2010

Я хотел сделать это программно, а также решить проблему, заключающуюся в том, что область попадания была слишком мала. Это адаптировано из различных источников, включая комментатора Майка и Майка Ага.

В вашем заголовке

@interface YourViewController : UIViewController {
    BOOL checkboxSelected;
    UIButton *checkboxButton;
}

@property BOOL checkboxSelected;;
@property (nonatomic, retain) UIButton *checkboxButton;

-(void)toggleButton:(id)sender;

А в твоей реализации

// put this in your viewDidLoad method. if you put it somewhere else, you'll probably have to change the self.view to something else
// create the checkbox. the width and height are larger than actual image, because we are creating the hit area which also covers the label
UIButton* checkBox = [[UIButton alloc] initWithFrame:CGRectMake(100, 60,120, 44)];  
[checkBox setImage:[UIImage imageNamed:@"checkbox.png"] forState:UIControlStateNormal];
// uncomment below to see the hit area
// [checkBox setBackgroundColor:[UIColor redColor]];
[checkBox addTarget:self action:@selector(toggleButton:) forControlEvents: UIControlEventTouchUpInside];
// make the button's image flush left, and then push the image 20px left
[checkBox setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];
[checkBox setImageEdgeInsets:UIEdgeInsetsMake(0.0, 20.0, 0.0, 0.0)];
[self.view addSubview:checkBox];

// add checkbox text text
UILabel *checkBoxLabel = [[UILabel alloc] initWithFrame:CGRectMake(140, 74,200, 16)];
[checkBoxLabel setFont:[UIFont boldSystemFontOfSize:14]];
[checkBoxLabel setTextColor:[UIColor whiteColor]];
[checkBoxLabel setBackgroundColor:[UIColor clearColor]];
[checkBoxLabel setText:@"Checkbox"];
[self.view addSubview:checkBox];

// release the buttons
[checkBox release];
[checkBoxLabel release];

И введите этот метод тоже:

- (void)toggleButton: (id) sender
{
    checkboxSelected = !checkboxSelected;
    UIButton* check = (UIButton*) sender;
    if (checkboxSelected == NO)
        [check setImage:[UIImage imageNamed:@"checkbox.png"] forState:UIControlStateNormal];
    else
        [check setImage:[UIImage imageNamed:@"checkbox-checked.png"] forState:UIControlStateNormal];

}
4 голосов
/ 18 июля 2012

Каждый код здесь очень длинный, немного грязный, и его можно было бы сделать намного проще. У меня есть проект на GitHub, который подкласс UIControl, который вы можете скачать и проверить и дает вам почти собственный элемент пользовательского интерфейса флажок:

https://github.com/Brayden/UICheckbox

1 голос
/ 13 мая 2015

Подкласс UIButton, перетащите кнопку для просмотра контроллера, выберите его и измените имя класса на CheckBox в инспекторе идентичности.

#import "CheckBox.h"

@implementation CheckBox

#define checked_icon @"checked_box_icon.png"
#define empty_icon @"empty_box_icon.png"

- (id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self)
    {
        [self setImage:[UIImage imageNamed:empty_icon] forState:UIControlStateNormal];
        [self addTarget:self action:@selector(didTouchButton) forControlEvents:UIControlEventTouchUpInside];
    }
    return self;
}

- (void)didTouchButton {
    selected = !selected;
    if (selected)
        [self setImage:[UIImage imageNamed:checked_icon] forState:UIControlStateNormal];
    else
        [self setImage:[UIImage imageNamed:empty_icon] forState:UIControlStateNormal];
}

@end
1 голос
/ 07 октября 2014

Я сделал это с помощью UITextField, чтобы избежать рисования чего-либо странного, но мне понравилось помещать в текст в виде галочки Unicode (Unicode Character 'CHECK MARK' (U + 2713)) для NSString: @ "\ u2713".

Таким образом, в моем файле .h (реализует протокол для UITextField 'UITextFieldDelegate'):

UITextField * myCheckBox;

В моем viewDidLoad или функции для подготовки пользовательского интерфейса:

...
myCheckBox = [[UITextField alloc] initWithFrame:aFrame];
myCheckBox.borderStyle = UITextBorderStyleRoundedRect; // System look like
myCheckBox.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
myCheckBox.textAlignment = NSTextAlignmentLeft;
myCheckBox.delegate = self;
myCheckBox.text = @" -"; // Initial text of the checkbox... editable!
...

Затем добавьте селектор событий для повторения в событии касания и вызова события responseSelected:

...
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(checkboxSelected)];
[myCheckBox addGestureRecognizer:tapGesture];
...

Наконец, ответьте на этот селектор

-(void) checkboxSelected
{
    if ([self isChecked])
    {
        // Uncheck the selection
        myCheckBox.text = @" -";
    }else{
       //Check the selection
       myCheckBox.text = @"\u2713";
    }
}

Функция 'isChecked' только проверяет, является ли текст галочкой @ "\ u2713". Чтобы не показывать клавиатуру, когда текстовое поле выделено, используйте событие UITextField 'textFieldShouldBeginEditing' и добавьте селектор событий для управления выделением:

-(BOOL)textFieldShouldBeginEditing:(UITextField *)textField
{
    // Question selected form the checkbox
    [self checkboxSelected];

    // Hide both keyboard and blinking cursor.
    return NO;
}
1 голос
/ 14 июня 2013

в .h файле

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    BOOL isChecked;
    UIImageView * checkBoxIV;
}
@end

И .m файл

- (void)viewDidLoad
{
    [super viewDidLoad];
    isChecked = NO;

    //change this property according to your need
    checkBoxIV = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 15, 15)]; 
    checkBoxIV.image =[UIImage imageNamed:@"checkbox_unchecked.png"]; 

    checkBoxIV.userInteractionEnabled = YES;
    UITapGestureRecognizer *checkBoxIVTapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handlecheckBoxIVTapGestureTap:)];
    checkBoxIVTapGesture.numberOfTapsRequired = 1;
    [checkBoxIV addGestureRecognizer:checkBoxIVTapGesture];
}

- (void)handlecheckBoxIVTapGestureTap:(UITapGestureRecognizer *)recognizer {
    if (isChecked) {
        isChecked = NO;
        checkBoxIV.image =[UIImage imageNamed:@"checkbox_unchecked.png"];
    }else{
        isChecked = YES;
        checkBoxIV.image =[UIImage imageNamed:@"checkbox_checked.png"];   
    }
}

Это поможет ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...