Πλαίσιο ελέγχου στην εφαρμογή iOS

Αυτό έχει οδήγηση τρελλό πάρα πολύ και βρήκα μια διαφορετική λύση που λειτουργεί καλά για μένα και αποφεύγει να χρειάζεται να χρησιμοποιήσετε τις εικόνες.

1. Προσθέστε ένα νέο αντικείμενο ετικέτα Interface Builder.
2. Δημιουργήστε ένα ακίνητο IBOutlet στο Xcode και να τη συνδέσετε σε αυτό. Στον παρακάτω κώδικα έχω ονομάζεται «fullyPaid», όπως θέλω να ξέρω αν κάποιος έχει πλήρως καταβληθεί ένα χρηματικό ποσό.
3. Προσθέστε τις παρακάτω 2 λειτουργίες. ελέγχων της λειτουργίας του «touchesBegan» εάν αγγίξει κάπου μέσα αντικείμενο την ετικέτα του «fullyPaid» και, εάν ναι, ζητεί η λειτουργία του «togglePaidStatus». Η λειτουργία «togglePaidStatus» δημιουργεί δύο σειρές που έχουν τους χαρακτήρες Unicode που αντιπροσωπεύει ένα άδειο κουτί (\ u2610) και ελέγχεται κουτί (\ u2611) αντίστοιχα. Στη συνέχεια, συγκρίνει αυτό που είναι σήμερα αντικείμενο του «fullyPaid» και εναλλάσσεται με την άλλη κορδόνι.

Μπορεί να θέλετε να καλέσετε τη λειτουργία 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];
}

Σε γενικές γραμμές, θα πρέπει να χρησιμοποιήσετε το UISwitch για τη λειτουργικότητα πλαίσιο ελέγχου-όπως.

Θα μπορούσατε να κατασκευάζουν τα δικά σας, αν και με τη χρήση ενός στοιχείου ελέγχου εικόνας με δύο εικόνες (έλεγχος / ανεξέλεγκτη) και την εναλλαγή των εικόνων όταν αγγίζουν τον έλεγχο /

Αν δείχνει μια ομάδα επιλογών και ο χρήστης μπορεί να επιλέξει ένα από αυτά, χρησιμοποιήστε ένα TableView με ένα σημάδι αξεσουάρ και ένα διαφορετικό χρώμα κειμένου στην επιλεγμένη σειρά.

Αν έχετε μια μόνο επιλογή, το καλύτερο στοίχημά σας είναι να χρησιμοποιήσετε ένα διακόπτη. Αν δεν μπορείτε ή δεν θέλετε να, χρησιμοποιήστε ένα κουμπί, θέτοντας την κανονική εικόνα σε ένα άδειο κουτί και την επιλεγμένη εικόνα σε ένα επιλεγμένο πλαίσιο. Θα πρέπει να κάνουν οι δύο αυτές εικόνες εαυτό σας ή να βρείτε απόθεμα γραφικά να χρησιμοποιήσετε για αυτούς.

Η επέκταση στην ιδέα Adrean του , έχω επιτύχει αυτό χρησιμοποιώντας μια πολύ απλή προσέγγιση.
Η ιδέα μου είναι το κουμπί για να αλλάξετε (ας πούμε 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
    }
}

Εδώ είναι η δική μου εκδοχή του πλαισίου ελέγχου για το 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.

Για να προσθέσετε CheckBoxButton στο storyboard ή ΧΙβ, απλή add UIButton και να ορίσετε προσαρμοσμένες κατηγορίας, όπως στην επόμενη εικόνα.

Button θα στείλει UIControlEventValueChanged περίπτωση, κάθε φορά που isChecked κατάσταση έχει αλλάξει.

Ήθελα να το κάνετε αυτό μέσω προγραμματισμού, αλλά και να λύσει το πρόβλημα που η περιοχή χτύπημα ήταν πραγματικά πολύ μικρό. Αυτό έχει προσαρμοστεί από διάφορες πηγές, μεταξύ των οποίων ο Mike και σχολιαστή του Mike Αγά.

Στην κεφαλίδα σας

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

}

Κωδικός everyones εδώ είναι πολύ μεγάλη, λίγο βρώμικο, και θα μπορούσε να γίνει πολύ πιο απλή. Έχω ένα σχέδιο για GitHub που υποκατηγορία UIControl ότι μπορείτε να κατεβάσετε και να δείτε και να σας δίνει μια σχεδόν μητρική στοιχείο πλαίσιο ελέγχου UI:

https://github.com/Brayden/UICheckbox

Υποκατηγορία UIButton, ρίχνετε ένα κουμπί για να δείτε ελέγχου, επιλέξτε το και αλλάξτε το όνομα της κλάσης σε πλαίσιο ελέγχου στη επιθεωρητή ταυτότητα.

#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

Το έκανα με UITextField την αποφυγή της χάραξης τίποτα περίεργο, αλλά μου άρεσε βάζοντας μέσα το κείμενο το unicode κρότωνα (Unicode χαρακτήρων «σημάδι ελέγχου» (U + 2713)) για την NSString: @ «\ u2713».

Με αυτό τον τρόπο, σε .h αρχείο μου (την εφαρμογή του πρωτοκόλλου για την «UITextFieldDelegate» του UITextField):

UITextField * myCheckBox;

Σε viewDidLoad μου ή τη λειτουργία για να προετοιμάσει το UI:

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

Στη συνέχεια, προσθέστε ένα επιλογέα εκδήλωση για reating σε επαφή εκδήλωση και καλεί εκδήλωση «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» σημάδι ελέγχου. Για να αποφευχθεί δείχνει το πληκτρολόγιο όταν έχει επιλεγεί το πεδίο κειμένου χρησιμοποιήστε την εκδήλωση της «textFieldShouldBeginEditing» του UITextField και προσθέστε τον επιλογέα εκδήλωση για τη διαχείριση του επιλογή:

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

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

σε .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"];   
    }
}

Αυτό θα κάνει το κόλπο ...

Μου αρέσει η ιδέα του Adrian να χρησιμοποιήσετε τους χαρακτήρες και όχι εικόνες. Αλλά δεν μου αρέσει το πλαίσιο, θα χρειάζεται μόνο το ίδιο το σημάδι (@ «\ u2713»). Θα ήθελα να επιστήσω ένα κουτί (ένα στρογγυλεμένο κουτί) με προγραμματισμό και τοποθετήστε ένα UILabel περιέχει το σημάδι επιλογής μέσα σε αυτό. Αυτός ο τρόπος εφαρμογής καθιστά εύκολο να χρησιμοποιήσετε την προσαρμοσμένη προβολή σε οποιαδήποτε εφαρμογή, χωρίς να νοιάζονται για κάθε εξαρτώμενο πόρων. Μπορείτε επίσης να προσαρμόσετε το χρώμα του τικ, το στρογγυλό κουτί και το φόντο με ευκολία. Εδώ είναι ο πλήρης κώδικας:

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

Έκανα ένα πρόσφατα. Δωρεάν για να αποκτήσει από το GitHub. Δείτε αν αυτό θα βοηθήσει. Το αποτέλεσμα είναι, όπως

χρήστη Αρούνα Lakmal? FYI, όταν προσθέτετε αυτόν τον κώδικα για να IB όπως την περιγράψατε initWithFrame δεν λέγεται, initWithCoder είναι. Εφαρμογή initWithCoder και θα λειτουργήσει όπως την περιγράψατε.