Checkbox in iOS applicatie

dit is het rijden me gek ook en ik vond een andere oplossing die goed werkt voor mij en voorkom je dat afbeeldingen.

1. Voeg een nieuw label object Interface Builder.
2. Maak een IBOutlet woning in Xcode en sluit deze tot het. In de onderstaande code ik heb het wel 'fullyPaid' als ik wil weten of iemand volledig een som geld heeft betaald.
3. Voeg onder de 2 functies. De 'touchesBegan' functie controleert of u raakte ergens in de 'fullyPaid' label object en zo ja, roept de 'togglePaidStatus' functie. De 'togglePaidStatus' functie stelt twee strengen die de Unicode tekens die een leeg vak (\ u2610) en een vinkje respectievelijk (\ u2611) hebben. Vervolgens vergelijkt wat er momenteel in de 'fullyPaid' object en schakelt het met de andere string.

U wilt misschien de togglePaidStatus functie aan te roepen in de viewDidLoad functie om het in eerste instantie ingesteld op een lege tekenreeks.

Uiteraard kunt u extra controles om gebruikers schakelen deze optie als het label niet is ingeschakeld te voorkomen toe te voegen, maar dat is niet hieronder weergegeven.

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

Over het algemeen zou je de UISwitch voor checkbox-achtige functionaliteit gebruiken.

Je kon al rollen uw eigen met behulp van een afbeelding controle met twee beelden (gecontroleerd / ongecontroleerd) en het schakelen van de foto's toen ze de controle aanraken /

Als je een groep van opties zijn zichtbaar is en de gebruiker kan een van hen te selecteren, gebruik dan een Tableview met een vinkje accessoire en een andere tekst kleur op de geselecteerde rij.

Als u één optie, uw beste inzet is om een ​​switch te gebruiken. Als u niet of niet kan doen wilt, gebruik maken van een knop, het instellen van de normale afbeelding om een ​​lege doos en de geselecteerde afbeelding naar een vakje te markeren. Je moet die twee zelf afbeeldingen te maken of vind voorraad graphics te gebruiken voor hen.

Uit te breiden tot Adrean idee , ik heb dit bereikt met behulp van een zeer eenvoudige aanpak.
Mijn idee is om de knop te veranderen (laten we zeggen checkBtn) tekst, afhankelijk van de staat, en wijzig de staat knop in zijn IBAction.
Hieronder is de code hoe ik dit deed:

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

Hier is mijn versie van checkbox voor de iPhone.

Het is enkele klasse die UIButton uitstrekt. Het is eenvoudig, zodat ik het hier zal plakken.

CheckBoxButton.h bestand inhoud

#import <UIKit/UIKit.h>

@interface CheckBoxButton : UIButton

@property(nonatomic,assign)IBInspectable BOOL isChecked;

@end

CheckBoxButton.m bestand inhoud

#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

U kunt foto's instellen voor gecontroleerd / ongecontroleerd evenals isChecked eigenschap in het attribuut inspecteur van Visual Studio.

Om CheckBoxButton in storyboard of xib, eenvoudige add UIButton en stel aangepaste klasse toevoegen, zoals op de volgende afbeelding.

Button zal UIControlEventValueChanged evenement, elke keer wanneer isChecked toestand wordt veranderd te sturen.

Ik wilde dit programmatisch doen, en ook het probleem dat de getroffen gebied was echt te klein te lossen. Dit is een bewerking van verschillende bronnen, waaronder Mike en Mike's commenter Agha.

In de header

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

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

-(void)toggleButton:(id)sender;

En in uw implementatie

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

En zet deze methode ook:

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

}

Everyones code hier is erg lang, een beetje rommelig, en kan worden gedaan een stuk eenvoudiger. Ik heb een project op GitHub dat UIControl subklasse die u kunt downloaden en check-out en geeft je een bijna volledige checkbox UI-element:

https://github.com/Brayden/UICheckbox

Subklasse UIButton, drop een knop om de controller te bekijken, te selecteren en te veranderen klasse naam CheckBox in de identiteit inspecteur.

#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

Ik maakte het met een UITextField om te voorkomen dat iets vreemds tekenen, maar ik vond het zetten binnen als tekst de teek unicode (Unicode Character 'VINKJE' (U + 2713)) voor de NSString: @ "\ u2713".

Op deze manier, in mijn .h bestand (de uitvoering van het protocol voor de UITextField 'UITextFieldDelegate'):

UITextField * myCheckBox;

In mijn viewDidLoad of de functie om de UI te bereiden:

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

Dan, voeg een evenement selector voor reating in het touch gebeurtenis en bellen 'responseSelected' evenement:

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

Tot slot reageren op dat selector

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

De functie 'isChecked' alleen controleert of de tekst is de @ "\ u2713" vinkje. Om te voorkomen dat de toetsenbord als het tekstveld is geselecteerd gebruik maken van de gebeurtenis van het UITextField 'textFieldShouldBeginEditing' en voeg het evenement selector om de selectie te beheren:

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

    // Hide both keyboard and blinking cursor.
    return NO;
}

in .h file

#import <UIKit/UIKit.h>

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

En .m file

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

Dit zal het lukken ...

Ik hou van het idee van Adrian om de karakters te gebruiken in plaats van foto's. Maar ik hou niet van de box, hoeft alleen maar het vinkje zelf (@ "\ u2713"). Ik geef dmv de muis (een ronde doos) programmatisch en plaats een UILabel bevat het vinkje erin. Deze manier van implementatie maakt het gemakkelijk om de aangepaste weergave in alle andere toepassingen zonder zorg over afhankelijke bron. U kunt ook de kleur van het vinkje, de afgeronde doos en de achtergrond met gemak. Hier is de volledige code:

#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];
        }
    }
}

Ik maakte een onlangs. Vrij om te nemen van GitHub. Kijk of dit zal helpen. Het effect is vergelijkbaar met

user Aruna Lakmal; FYI, als je deze code toe te voegen aan IB als u beschrijft initWithFrame wordt niet genoemd, initWithCoder is. Implementeer initWithCoder en het zal werken als u beschrijft.