En application iOS Checkbox

voix
34

Je dois ajouter des contrôles de cases à cocher à ma forme. Je sais qu'il n'y a pas un tel contrôle dans iOS SDK. Comment pourrais-je faire cela?

Créé 16/03/2009 à 13:05
source utilisateur
Dans d'autres langues...                            


13 réponses

voix
31

cela a été me rend fou aussi, et je l'ai trouvé une autre solution qui fonctionne bien pour moi et évite d'avoir à utiliser des images.

  1. Ajouter un nouvel objet étiquette Interface Builder.
  2. Créer une propriété IBOutlet dans Xcode et connectez-le à la hauteur. Dans le code ci-dessous, je l'ai appelé « fullyPaid » que je veux savoir si quelqu'un a payé entièrement une somme d'argent.
  3. Ajoutez les 2 fonctions ci-dessous. Les contrôles de la fonction « touchesBegan » si vous avez touché quelque part à l'intérieur de l'objet de l'étiquette « fullyPaid » et si oui, il appelle la fonction 'togglePaidStatus de. La fonction « togglePaidStatus » met en place deux chaînes qui ont les caractères unicode représentant une boîte vide (\ u2610 de) et une case cochée (\ u2611), respectivement. Ensuite, il compare ce qui est actuellement l'objet « fullyPaid » et permet de basculer de l'autre chaîne.

Vous pouvez appeler la fonction togglePaidStatus dans la fonction viewDidLoad pour le mettre à une chaîne vide au départ.

Il est évident que vous pouvez ajouter des contrôles supplémentaires pour empêcher les utilisateurs affin de la case à cocher si l'étiquette n'est pas activé, mais ce n'est pas indiqué ci-dessous.

-(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];
}
Créé 10/04/2010 à 22:23
source utilisateur

voix
26

En règle générale, vous devez utiliser la UISwitch pour la fonctionnalité comme case à cocher.

Vous pouvez rouler votre propre bien en utilisant un contrôle d'image avec deux images (cochée / décochée) et la commutation des images quand elles touchent le contrôle /

Créé 16/03/2009 à 13:12
source utilisateur

voix
10

Si vous montrant un groupe d'options et l'utilisateur peut sélectionner l'un d'entre eux, utilisez un tableview avec un accessoire et une coche couleur différente de la ligne sélectionnée.

Si vous avez une seule option, votre meilleur pari est d'utiliser un commutateur. Si vous ne pouvez pas ou ne voulez pas, utilisez un bouton, réglage de l'image normale à une boîte vide et l'image sélectionnée dans une case cochée. Vous devrez faire ces deux images vous-même ou trouver actions graphiques à utiliser pour eux.

Créé 16/03/2009 à 13:33
source utilisateur

voix
8

L' extension à l'idée de Adrean , j'ai réalisé grâce à une approche très simple.
Mon idée est de changer le bouton (permet de dire checkBtn) texte en fonction de son état, puis changer l'état du bouton dans son IBAction.
Voici le code comment je l'ai fait:

- (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
    }
}
Créé 19/03/2014 à 05:17
source utilisateur

voix
6

Voici ma version de case à cocher pour iPhone.

Il est classe unique qui étend UIButton. Il est simple, donc je vais le coller ici.

le contenu du fichier CheckBoxButton.h

#import <UIKit/UIKit.h>

@interface CheckBoxButton : UIButton

@property(nonatomic,assign)IBInspectable BOOL isChecked;

@end

le contenu du fichier 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

Vous pouvez définir des images pour la propriété cochée / décochée ainsi que isChecked dans l'inspecteur d'attributs de Visual Studio.

entrez la description d'image ici

Pour ajouter CheckBoxButton en story-board ou xib, UIButton simple ajouter et configurer classe personnalisée comme sur l'image suivante.

entrez la description d'image ici

Bouton envoyer un événement UIControlEventValueChanged, chaque fois que l'état isChecked est changé.

Créé 31/12/2014 à 13:44
source utilisateur

voix
6

Je voulais faire ce programme, et aussi résoudre le problème que la zone touchée était vraiment trop petite. Ceci est adapté à partir de diverses sources, y compris Mike et le commentateur de Mike Agha.

Dans votre tête

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

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

-(void)toggleButton:(id)sender;

Et dans votre mise en œuvre

// 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];

Et de mettre cette méthode aussi:

- (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];

}
Créé 21/05/2010 à 17:46
source utilisateur

voix
4

Everyones code ici est très long, un peu en désordre, et pourrait être fait beaucoup plus simple. J'ai un projet sur GitHub que la sous-classe UIControl que vous pouvez télécharger et vérifier et vous donne un élément de l'interface utilisateur de case à cocher presque native:

https://github.com/Brayden/UICheckbox

Créé 18/07/2012 à 08:03
source utilisateur

voix
1

UIButton sous-classe, laissez tomber un bouton pour afficher le contrôleur, sélectionnez-le et changer le nom de classe CheckBox dans l'inspecteur d'identité.

#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
Créé 13/05/2015 à 11:59
source utilisateur

voix
1

Je l'ai fait avec un UITextField pour éviter de tirer quelque chose d'étrange, mais je l'ai aimé mettre l'intérieur sous forme de texte unicode tick (caractères Unicode « Coche » (U + 2713)) pour le NSString: @ « \ u2713 ».

De cette façon, dans mon fichier .h (mise en œuvre du protocole pour 'UITextFieldDelegate du UITextField):

UITextField * myCheckBox;

Dans mon viewDidLoad ou la fonction de préparer l'interface utilisateur:

...
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!
...

Ensuite, ajoutez un sélecteur d'événement pour réer en cas toucher et appeler événement « responseSelected »:

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

Enfin répondre à ce sélecteur

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

La fonction « isChecked » vérifie uniquement si le texte est le @ « \ u2713 » coche. Pour éviter montrant le clavier lorsque le champ de texte est sélectionné, utilisez l'événement du UITextField « textFieldShouldBeginEditing » et ajouter le sélecteur d'événement pour gérer la sélection:

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

    // Hide both keyboard and blinking cursor.
    return NO;
}
Créé 07/10/2014 à 12:13
source utilisateur

voix
1

dans le fichier .h

#import <UIKit/UIKit.h>

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

Et fichier .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"];   
    }
}

Ça fera l'affaire...

Créé 14/06/2013 à 11:12
source utilisateur

voix
1

J'aime l'idée d'Adrien d'utiliser les caractères plutôt que des images. Mais je n'aime pas la boîte, il suffit de la coche lui-même (@ « \ u2713 »). Je dessine une boîte (boîte arrondie) par programme et placer un UILabel contient le crochet à l'intérieur. De cette façon, la mise en œuvre, il est facile d'utiliser la vue personnalisée dans une application sans se soucier de toute ressource dépendante. Vous pouvez également personnaliser la couleur de la case, la boîte arrondie et l'arrière-plan avec facilité. Voici le code complet:

#import <UIKit/UIKit.h>

@class CheckBoxView;

@protocol CheckBoxViewDelegate
- (void) checkBoxValueChanged:(CheckBoxView *) cview;
@end

@interface CheckBoxView : UIView {
    UILabel *checkMark;
    bool isOn;
    UIColor *color;
    NSObject<CheckBoxViewDelegate> *delegate;
}
@property(readonly) bool isOn;
@property(assign) NSObject<CheckBoxViewDelegate> *delegate;

- (void) drawRoundedRect:(CGRect) rect inContext:(CGContextRef) context;
@end



#import "CheckBoxView.h"

#define SIZE 30.0
#define STROKE_WIDTH 2.0
#define ALPHA .6
#define RADIUS 5.0

@implementation CheckBoxView
@synthesize isOn, delegate;

- (id)initWithFrame:(CGRect)frame {
    if ((self = [super initWithFrame:CGRectMake(frame.origin.x, frame.origin.y, SIZE, SIZE)])) {
        // Initialization code
    }
    //UIColor *color = [UIColor blackColor];
    color = [[UIColor alloc] initWithWhite:.0 alpha:ALPHA];

    self.backgroundColor = [UIColor clearColor];
    checkMark = [[UILabel alloc] initWithFrame:CGRectMake(STROKE_WIDTH, STROKE_WIDTH, SIZE - 2 * STROKE_WIDTH, SIZE - 2*STROKE_WIDTH)];
    checkMark.font = [UIFont systemFontOfSize:25.];
    checkMark.text = @"\u2713";
    checkMark.backgroundColor = [UIColor clearColor];
    checkMark.textAlignment = UITextAlignmentCenter;
    //checkMark.textColor = [UIColor redColor];
    [self addSubview:checkMark];
    [checkMark setHidden:TRUE];
    isOn = FALSE;
    return self;
}


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
    CGRect _rect = CGRectMake(STROKE_WIDTH, STROKE_WIDTH, SIZE - 2 * STROKE_WIDTH, SIZE - 2*STROKE_WIDTH);
    [self drawRoundedRect:_rect inContext:UIGraphicsGetCurrentContext()];
    [checkMark setHidden:!isOn];
}


- (void)dealloc {
    [checkMark release];
    [color release];
    [super dealloc];
}

- (void) drawRoundedRect:(CGRect) rect inContext:(CGContextRef) context{
    CGContextBeginPath(context);
    CGContextSetLineWidth(context, STROKE_WIDTH);
    CGContextSetStrokeColorWithColor(context, [color CGColor]);
    CGContextMoveToPoint(context, CGRectGetMinX(rect) + RADIUS, CGRectGetMinY(rect));
    CGContextAddArc(context, CGRectGetMaxX(rect) - RADIUS, CGRectGetMinY(rect) + RADIUS, RADIUS, 3 * M_PI / 2, 0, 0);
    CGContextAddArc(context, CGRectGetMaxX(rect) - RADIUS, CGRectGetMaxY(rect) - RADIUS, RADIUS, 0, M_PI / 2, 0);
    CGContextAddArc(context, CGRectGetMinX(rect) + RADIUS, CGRectGetMaxY(rect) - RADIUS, RADIUS, M_PI / 2, M_PI, 0);
    CGContextAddArc(context, CGRectGetMinX(rect) + RADIUS, CGRectGetMinY(rect) + RADIUS, RADIUS, M_PI, 3 * M_PI / 2, 0);
    CGContextClosePath(context);
    CGContextStrokePath(context);
}

#pragma mark Touch
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint loc = [touch locationInView:self];
    if(CGRectContainsPoint(self.bounds, loc)){
        isOn = !isOn;
        //[self setNeedsDisplay];
        [checkMark setHidden:!isOn];
        if([delegate respondsToSelector:@selector(checkBoxValueChanged:)]){
            [delegate checkBoxValueChanged:self];
        }
    }
}
Créé 23/07/2010 à 10:41
source utilisateur

voix
0

Je fait un récemment. Libre d'acquérir de GitHub. Voir si cela vous aidera. L'effet est comme

entrez la description d'image ici

Créé 01/04/2019 à 20:36
source utilisateur

voix
0

utilisateur Aruna Lakmal; Pour votre information, lorsque vous ajoutez ce code à IB que vous décrivez initWithFrame n'est pas appelé, est initWithCoder. Mettre en œuvre initWithCoder et il fonctionnera comme vous décrivez.

Créé 20/01/2013 à 04:15
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more