Created
March 2, 2015 22:21
-
-
Save RyanBertrand/0fc7201b991778160b17 to your computer and use it in GitHub Desktop.
UIControl > UIButton for more flexibility
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@interface HWQuestionControl : UIControl{ | |
} | |
@property(nonatomic, strong)UILabel *titleLabel; | |
@property(nonatomic, strong)UIImageView *imageView; | |
@end | |
@interface HWQuestionControl (){ | |
} | |
@property(nonatomic, strong)UIView *fillView; | |
@end | |
@implementation HWQuestionControl | |
-(id)initWithCoder:(NSCoder *)aDecoder{ | |
self = [super initWithCoder:aDecoder]; | |
if(self){ | |
[self initUI]; | |
} | |
return self; | |
} | |
-(instancetype)initWithFrame:(CGRect)frame{ | |
self = [super initWithFrame:frame]; | |
if(self){ | |
[self initUI]; | |
} | |
return self; | |
} | |
#pragma mark - UI | |
-(void)initUI{ | |
UIColor *highlightColor = [AppStyle buttonHighlightColor]; | |
self.layer.cornerRadius = (self.frame.size.height / 2); | |
self.clipsToBounds = YES; | |
[self setBackgroundColor:[UIColor whiteColor]]; | |
self.titleLabel.textAlignment = NSTextAlignmentLeft; | |
//Border | |
self.layer.borderWidth = 0; | |
self.layer.borderColor = highlightColor.CGColor; | |
//Pressed state | |
[self addTarget:self action:@selector(touchUpInside:) forControlEvents:UIControlEventTouchUpInside]; | |
[self addTarget:self action:@selector(wasPressed:) forControlEvents:UIControlEventTouchUpInside]; | |
[self addTarget:self action:@selector(wasPressed:) forControlEvents:UIControlEventTouchDown]; | |
//Unpressed state | |
[self addTarget:self action:@selector(wasUnpressed:) forControlEvents:UIControlEventTouchDragExit]; | |
[self addTarget:self action:@selector(wasUnpressed:) forControlEvents:UIControlEventTouchCancel]; | |
//Label | |
self.titleLabel = [[UILabel alloc] initWithFrame:self.bounds]; | |
self.titleLabel.translatesAutoresizingMaskIntoConstraints = NO; | |
self.titleLabel.textColor = highlightColor; | |
self.titleLabel.text = @"A difference maker"; | |
self.titleLabel.textAlignment = NSTextAlignmentLeft; | |
[self addSubview:self.titleLabel]; | |
//Image | |
self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"smiley"]]; | |
self.imageView.translatesAutoresizingMaskIntoConstraints = NO; | |
[self addSubview:self.imageView]; | |
//Fill view | |
self.fillView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, self.frame.size.height)]; | |
self.fillView.translatesAutoresizingMaskIntoConstraints = NO; | |
self.fillView.backgroundColor = [AppStyle buttonFillColor]; | |
self.fillView.userInteractionEnabled = NO; | |
[self addSubview:self.fillView]; | |
[self sendSubviewToBack:self.fillView]; | |
//Layout | |
[self setUpAutoLayout]; | |
} | |
#pragma mark - Autolayout | |
-(void)setUpAutoLayout{ | |
//Verbose autolayout. A library or categories should help with this but for simplicity I kept it... | |
NSDictionary *viewsDictionary = @{@"fillView":self.fillView, | |
@"imageView":self.imageView, | |
@"titleLabel":self.titleLabel, | |
@"hSpacing": @(20)}; | |
//Image | |
NSArray *constraint_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageView(30)]" | |
options:0 | |
metrics:nil | |
views:viewsDictionary]; | |
NSArray *constraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[imageView(30)]" | |
options:0 | |
metrics:nil | |
views:viewsDictionary]; | |
[self.imageView addConstraints:constraint_H]; | |
[self.imageView addConstraints:constraint_V]; | |
NSLayoutConstraint *centerYConstraint = [NSLayoutConstraint constraintWithItem:self.imageView | |
attribute:NSLayoutAttributeCenterY | |
relatedBy:NSLayoutRelationEqual | |
toItem:self | |
attribute:NSLayoutAttributeCenterY | |
multiplier:1.0 | |
constant:0.0]; | |
[self addConstraint:centerYConstraint]; | |
NSArray *constraint_POS_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[imageView]" | |
options:0 | |
metrics:nil | |
views:viewsDictionary]; | |
[self addConstraints:constraint_POS_H]; | |
//Label | |
constraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[titleLabel(30)]" | |
options:0 | |
metrics:nil | |
views:viewsDictionary]; | |
[self.titleLabel addConstraints:constraint_V]; | |
constraint_POS_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[imageView]-15-[titleLabel]" | |
options:0 | |
metrics:nil | |
views:viewsDictionary]; | |
[self addConstraints:constraint_POS_H]; | |
centerYConstraint = [NSLayoutConstraint constraintWithItem:self.titleLabel | |
attribute:NSLayoutAttributeCenterY | |
relatedBy:NSLayoutRelationEqual | |
toItem:self | |
attribute:NSLayoutAttributeCenterY | |
multiplier:1.0 | |
constant:0.0]; | |
[self addConstraint:centerYConstraint]; | |
} | |
#pragma mark - Actions | |
-(void)touchUpInside:(id)sender{ | |
[self animateFillBarWithPercentage:0.25f]; | |
} | |
-(void)wasPressed:(id)sender{ | |
self.layer.borderWidth = 2; | |
} | |
-(void)wasUnpressed:(id)sender{ | |
self.layer.borderWidth = 0; | |
} | |
#pragma mark - Animation | |
-(void)animateFillBarWithPercentage:(CGFloat)fillPercenatage{ | |
__weak typeof(self)weakSelf = self; | |
CGFloat fillWidth = self.frame.size.width * fillPercenatage; | |
[UIView animateWithDuration:0.25 delay:0.05 options:UIViewAnimationOptionAllowUserInteraction animations:^{ | |
weakSelf.fillView.frame = CGRectMake(0, 0, fillWidth, weakSelf.fillView.frame.size.height); | |
} completion:^(BOOL finished) { | |
NSLog(@"Hurray"); | |
}]; | |
} | |
@end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment