iOS7 Selected Effect on Button Border - ios

So I am new to iOS and I want some buttons with rounded boarders. I also want those borders to have the same effect as the text within the button when the button is selected.
Since roundRect buttons are no longer an object in iOS (or at least I couldn't find it and everywhere I read said that is was no more) I decided to write a custom class that extends UIButton. This is what I have:
- (void)drawRect:(CGRect)rect{
{
UIColor *blackColor = blackColor;
UIColor *transBlack = [blackColor colorWithAlphaComponent:(0.5)];
[self.layer setCornerRadius:10.0f];
[self.layer setBorderColor:[UIColor blackColor].CGColor];
[self.layer setBorderWidth:1.0];
if(self.isSelected){
[self.layer setBorderColor:(transBlack.CGColor)];
}
I'm not sure if I am using isSelected properly. I had an NSLog under it and it never seems to be executed no matter how many times I press the buttons.
Any help and suggestions of all kinds would be greatly appreciated. Thank you.

UIButton inherit from UIView, So you can use Layer's Methods...
Create new Object that Subclassing UIButton call it whatever you want, then implement the next Code:
In this sample i have UIButton subclass called PressedButton in the .m file:
#implementation PressedButton
- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
//When the button is pressed the border color change to red
self.layer.borderColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.5].CGColor;
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
//When the button is pressed the border color change back to black
self.layer.borderColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5].CGColor;
}
- (void)initialize{
self.layer.cornerRadius = 10.0f;
self.layer.borderColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5].CGColor;
self.layer.borderWidth = 2;
self.layer.masksToBounds = YES;
}
- (instancetype)initWithCoder:(NSCoder *)coder
{
self = [super initWithCoder:coder];
if (self) {
[self initialize];
}
return self;
}
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self initialize];
}
return self;
}
- (instancetype)init
{
self = [super init];
if (self) {
[self initialize];
}
return self;
}
#end
*** I implemented the all init methods to be sure no matter where i set the button (storyboard or via Code its get the same init).
After that just configure your button custom class to your "Pressed Button class" and that's it
If you need more help be free to ask :)

Related

Why does using [UIColor colorWithRed:gred:blue:alpha] lead to EXC_BAD_ACCESS?

I have create a custom UIView subclass which should draw a simple dashed line. To define the color of the line I have added an inspectable property lineColor
// LineView.h
#interface LineView : UIView
#property (nonatomic,assign) IBInspectable UIColor *lineColor;
#end
// LineView.m
- (id)initWithFrame:(CGRect)frame{
if((self = [super initWithFrame:frame])){
[self setupView];
}
return self;
}
- (id)initWithCoder:(NSCoder *)aDecoder{
if((self = [super initWithCoder:aDecoder])){
[self setupView];
}
return self;
}
- (void)setupView {
self.lineColor = [UIColor colorWithRed:0 green:0 blue:255.0 alpha:1.0];
//self.lineColor = [UIColor blueColor]; <-- No Problem
[self refreshLine];
}
- (void)layoutSubviews {
[super layoutSubviews];
[self refreshLine];
}
- (void)refreshLine {
CGColorRef cgLineColor = self.lineColor.CGColor; // <--CRASH
...
}
If a color is assigned in the Interface Builder everything works fine
If a default color like [UIColor blueColor] is assigned everything works fine
If a custom color like [UIColor colorWithRed:0 green:0 blue:255.0 alpha:1.0] the app crashes with EXC_BAD_ACCESS
[UIDeviceRGBColor respondsToSelector:]: message sent to deallocated instance 0x6000022d08c0
Why is this?
When you use [UIColor blueColor], you don't create the object; you get a reference to it and something else manages its life cycle.
When you init a new UIColor object, you're responsible for making sure it is still valid when used. "assign" doesn't increase the object's reference count; "strong" does.

In Objective-C, how can I change the property of an instance inside of class via UIControl?

This question is about the exercise 6.9 of iOS Programming 4th Edition.
I have a class that can draw concentric circles and respond to touches by changing its color randomly.
Here is the implementation of the view:
#implementation LTHypnosisView
- (instancetype) initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self){
self.backgroundColor = [UIColor clearColor];
self.circleColor = [UIColor lightGrayColor];
}
return self;
}
- (void)drawRect:(CGRect)rect {
//Draw the circles
}
- (void) touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
float red = (arc4random() % 100) /100.0;
float green = (arc4random() % 100) /100.0;
float blue = (arc4random() % 100) /100.0;
UIColor *randomColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
self.circleColor = randomColor;
}
- (void) setCircleColor:(UIColor *)circleColor{
_circleColor = circleColor;
[self setNeedsDisplay];
}
#end
Here is the implementation of the viewController:
#implementation LTHypnosisViewController
- (void) viewDidLoad{
CGRect screenRect = self.view.bounds;
LTHypnosisView *mainView = [[LTHypnosisView alloc] initWithFrame:screenRect];
[self addSubview:mainView]
NSArray *items = #[#"Red",#"Green",#"Blue"];
UISegmentedControl *segControl = [[UISegmentedControl alloc] initWithItems:items];
[segControl addTarget:self
action:#selector(change:)
forControlEvents:UIControlEventValueChanged];
segControl.frame = CGRectMake(10, 50, self.view.bounds.size.width-20, 60);
segControl.selectedSegmentIndex = 0;
segControl.backgroundColor = [UIColor whiteColor];
[self.view addSubview:segControl];
}
- (void) change:(UISegmentedControl*)sender{
switch (sender.selectedSegmentIndex) {
//How should I write here??
}
}
#end
I want to change the color of the concentric circles with the UISegmentedControl. Consequently I need a method within the viewController to change the _circleColor property of the LTHypnosisView instance. How can I do that?
A simple way, I'd make LTHypnosisView *mainView a property of the view controller, make setCircleColor public, and then in change: method call [self.mainView setCircleColor:myColor];
You could also do something more involved, like define a protocol on LTHypnosisView and set the view controller as the datasource. Whenever the change: method is called, call something like [mainView updateColor] and within updateColor have it read the color from it's datasource.

how to attributes for customer UIButon

I have a button that I am trying to add a border to like this:
.h
#interface MyButton : UIButton
.m
#implementation MyButton
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
}
self.layer.borderWidth=1.0f;
self.layer.cornerRadius = 4;
self.layer.borderColor=[[UIColor blueColor] CGColor];
return self;
}
The border is not set, what am I doing wrong?
UIButton is not meant to be subclassed, I recommend using a category if all you are trying to do is style buttons. Here is an example category to accomplish what you want... note that this has not been run through a compiler, but you get the idea:
UIButton+Styles.h
#import <UIKit/UIKit.h>
#interface UIButton (Styles)
-(void)styleWithBorderColor:(UIColor *)color;
#end
.m
#import "UIButton+Styles.h"
#import <QuartzCore/QuartzCore.h>
#implementation UIButton (CURStyles)
-(void)styleWithBorderColor:(UIColor *)color
{
self.layer.masksToBounds = YES;
self.layer.cornerRadius = 4.0f;
self.layer.borderWidth = 1.0f;
self.layer.borderColor = color.CGColor;
}
#end
Now when you want to style a button simply import the category and call it like so:
[myButton styleWithBorderColor:[UIColor whiteColor]];
EDIT:
Please see comments... these should be prefixed to avoid confusion with framework methods
Add
self.layer.masksToBounds = YES;
Also if you are creating your button via Nib or Storyboard file initWithFrame method will not be called. In such a case do not forget to place your additional code in awakeFromNib method
- (void)awakeFromNib
{
self.layer.masksToBounds = YES;
self.layer.borderWidth=1.0f;
self.layer.cornerRadius = 4;
self.layer.borderColor=[[UIColor blueColor] CGColor];
}
There is nothing wrong with subclassing UIButton at all.. I suggest maybe you need to set
self.backgroundColor = nil; // or [UIColor clearColor]
self.layer.backgroundColor = desiredBackgroundColor.CGColor;
The backgroundcolor in UIView covers the border on the layer, move the background color to the layer instead to put it behind (and clip it to) the border

Set Selected State of CAGradient UIButton in iOS

Hi I have made a custom button in code using corner radius CAGradientLayer and border colour in one of my view controllers like the below:
phoneButton = [CustomButton buttonWithType:UIButtonTypeCustom];
phoneButton.frame = CGRectMake(6, 363, 99, 48);
phoneButton.titleLabel.font = [UIFont fontWithName:#"Futura-Medium" size:14];
phoneButton.titleLabel.shadowColor = [UIColor colorWithWhite:0.0 alpha:1.0];
phoneButton.titleLabel.shadowOffset = CGSizeMake(0, 1);
[phoneButton setTitle:#"Phone" forState:UIControlStateNormal];
[phoneButton addTarget:self action:#selector(phone) forControlEvents:UIControlEventTouchUpInside];
gradient = [CAGradientLayer layer];
gradient.frame = phoneButton.bounds;
gradient.cornerRadius = 8;
gradient.borderColor = [[UIColor whiteColor]CGColor];
gradient.borderWidth = 2.0;
gradient.colors = [NSArray arrayWithObjects:(id)[[sharedManager cellGradientEnd] CGColor], (id)[[sharedManager cellGradientStart] CGColor], nil];
[phoneButton.layer insertSublayer:gradient atIndex:0];
[self.view addSubview:phoneButton];
Now I would like to set the selected/highlighted color of the button on selection. How do I do this. I read make a UIbutton subclass and override setSelected but I dont have a clue how to do it. Here is customButton subclass.m
#import "CustomButton.h"
#implementation CustomButton
#synthesize sharedManager;
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
sharedManager = [[MySingleton alloc]init];
}
return self;
}
-(void) setHighlighted:(BOOL)highlighted {
if(highlighted) {
NSLog(#"Highlighted");
} else {
NSLog(#"Not Highlighted");
}
[super setHighlighted:highlighted];
}
-(void) setSelected:(BOOL)selected {
if(selected) {
NSLog(#"Selected");
} else {
NSLog(#"Not Selected");
}
[super setSelected:selected];
}
#end
Or just dim the button on selection would be good? I should add that the button is not in a Xib.
I figured it out just by creating a selected Gradient and unselected Gradient state of the button in subclass.m now it is all working great!
- (CustomButton *)buttonWithType:(UIButtonType)type
{
return [self buttonWithType:UIButtonTypeCustom];
}
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
}
return self;
}
- (id)initWithCoder:(NSCoder *)coder
{
//Call the parent implementation of initWithCoder
self = [super initWithCoder:coder];
//Custom drawing methods
if (self)
{
[self drawBackgroundLayer];
[self drawHighlightBackgroundLayer];
highlightBackgroundLayer.hidden = YES;
}
return self;
}
-(void)loadSingleton{
sharedManager = [[MySingleton alloc]init];
}
- (void)layoutSubviews
{
// Set gradient frame (fill the whole button))
backgroundLayer.frame = self.bounds;
// Set inverted gradient frame
highlightBackgroundLayer.frame = self.bounds;
[super layoutSubviews];
}
- (void)drawBackgroundLayer
{
[self loadSingleton];
// Check if the property has been set already
if (!backgroundLayer)
{
backgroundLayer = [CAGradientLayer layer];
backgroundLayer.cornerRadius = 8;
backgroundLayer.borderWidth = 1.5;
backgroundLayer.borderColor = [UIColor whiteColor].CGColor;
backgroundLayer.colors = [NSArray arrayWithObjects:(id)[[sharedManager cellGradientEnd] CGColor], (id)[[sharedManager cellGradientStart] CGColor], nil];
// Add the gradient to the layer hierarchy
[self.layer insertSublayer:backgroundLayer atIndex:0];
}
}
- (void)drawHighlightBackgroundLayer
{
[self loadSingleton];
if (!highlightBackgroundLayer)
{
highlightBackgroundLayer = [CAGradientLayer layer];
highlightBackgroundLayer.cornerRadius = 8;
highlightBackgroundLayer.borderWidth = 1.5;
highlightBackgroundLayer.borderColor = [UIColor whiteColor].CGColor;
highlightBackgroundLayer.colors = [NSArray arrayWithObjects:(id)[[sharedManager cellSelectedGradientEnd] CGColor], (id)[[sharedManager cellSelectedGradientStart] CGColor], nil];
[self.layer insertSublayer:highlightBackgroundLayer atIndex:1];
}
}
and setting the selected state on or off
- (void)setHighlighted:(BOOL)highlighted
{
NSLog(#"Selected");
// Disable implicit animation
[CATransaction begin];
[CATransaction setDisableActions:YES];
// Hide/show inverted gradient
highlightBackgroundLayer.hidden = !highlighted;
[CATransaction commit];
[super setHighlighted:highlighted];
}
Have you tried invoking super and then invoking setNeedsDisplay on self?
It should cause your display functionality to be invoked at the appropriate time, and in that code you should be checking for selected/highlighted.
If I understand correctly what you are trying to do, I would suggest the following approach:
move the CAGradientLayer inside of your CustomButton implementation (so it would become a CustomGradientButton);
when you want to set the selected state for the custom button, change the CAGradientLayer gradientColors by changing their saturation and brightness.
By doing this, your button will change its appearance in the selected state.
A way to modify saturation and brightness could be through this UIColor category of mine:
#interface UIColor (LighterDarkerColor)
- (UIColor*)colorWithSaturation:(float)saturationFactor
brightness:(float)brightnessFactor;
#end
#implementation UIColor (LighterDarkerColor)
- (UIColor*)colorWithSaturation:(float)saturationFactor
brightness:(float)brightnessFactor {
float hue = 0.0;
float saturation = 0.0;
float brightness = 0.0;
float alpha = 0.0;
if ([self getHue:&hue saturation:&saturation brightness:&brightness alpha:&alpha])
return [UIColor colorWithHue:hue saturation:saturation*saturationFactor
brightness:brightness*brightnessFactor alpha:alpha];
return self;
}
#end
You could do, e.g.:
UIColor* selectedColorStart = [[sharedManager cellGradientStart] colorWithSaturation:0.65 brightness:1.2];
to get a less saturated, brighter version of your cellGradientStart color. Then in your setSelected method you would modify your CAGradientLayer:
gradient.colors = [NSArray arrayWithObjects:(id)[selectedColorEnd CGColor], (id)[selectedColorStart CGColor], nil];
This approach works for me, although you need to fine-tune your selection of saturation and brightness working for your case.

Exlusive touch in cameraoverlay view (of the camerapicker) in iOS?

In my application, I added a cameraOverlayView to the camerapicker. It contains three subviews, two UIButtons and one UIImageView. The image is draggable. The buttons are used to change the image to another one.
When I touch a button, or the image, the tap-to-focus rect of the camera will always be displayed beneath (and the actual focus will change). Setting exclusiveTouch to YES on all three subviews doesn't change the behaviour.
Any idea, how i can stop the camerapicker from getting the touches of my buttons / subviews of my overlayview (but still getting the touches for touch-to-focus, switching cameras etc.)?
To give some more information. I'm using the following code, to allow camera interaction while having an overlayview, which subviews still get the touches.
// CameraOverlayView.m
[...]
// ignore touches on this view, but not on the subviews
-(id)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
id hitView = [super hitTest:point withEvent:event];
if (hitView == self) return nil;
else return hitView;
}
There are a couple of ways to stop this that I found. None of the ways do exactly what I would like it to do. But tweaking it around should give you something usable.
1.) Disable camera control. cameraPickerController.showsCameraControls = NO; This will ultimately take down the touch to focus from the screen but it would take down other controls too.
2.) Control the hitTest in your overlayView and set those area to nil. This solution is very awkward but it works for me.
This is my overlayView that manages a face mask
- (id)initWithFrame:(CGRect)frame imagePicker: (UIImagePickerController *) imagepicker{
self = [super initWithFrame:frame];
if (self) {
faceMaskButton = [UIButton buttonWithType:UIButtonTypeCustom];
faceMaskButton.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:.2];
faceMaskButton.frame = CGRectMake(10, 10, 70, 35);
faceMaskButton.layer.borderColor = [[UIColor colorWithRed:0 green:0 blue:0 alpha:.6] CGColor];
faceMaskButton.layer.borderWidth = 1;
faceMaskButton.layer.cornerRadius = 17;
[faceMaskButton setImage:[UIImage imageNamed:#"Facemask button"] forState:UIControlStateNormal];
[faceMaskButton addTarget:self action:#selector(facemask) forControlEvents:UIControlEventTouchDown];
faceMaskButton.exclusiveTouch = YES;
faceMaskButton.autoresizingMask = UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleBottomMargin|UIViewAutoresizingFlexibleLeftMargin|UIViewAutoresizingFlexibleRightMargin;
[self addSubview:faceMaskButton];
loadingFacemask = NO;
overlayImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Camera Face Overlay"]];
overlayImage.frame = CGRectMake((self.bounds.size.width - 400)/2, (self.bounds.size.height - 400)/3, 400, 400);
overlayImage.autoresizingMask = UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleBottomMargin|UIViewAutoresizingFlexibleLeftMargin|UIViewAutoresizingFlexibleRightMargin;
overlayImage.alpha = 0.9f;
[self addSubview:overlayImage];
imagePickerController = imagepicker;
}
return self;
}
- (void) facemask{
if (!loadingFacemask) {
loadingFacemask = YES;
[UIView animateWithDuration:.3 animations:^{
overlayImage.alpha = overlayImage.alpha? 0:1;
faceMaskButton.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:1];
} completion:^(BOOL finished) {
faceMaskButton.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:.2];
loadingFacemask = NO;
}];
}
}
-(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
if ((self.bounds.size.height - 44)<point.y){
return imagePickerController.view;
}
if (point.x < faceMaskButton.bounds.origin.x + faceMaskButton.bounds.size.width +10 && point.y < faceMaskButton.bounds.origin.y + faceMaskButton.bounds.size.height + 10) {
[self facemask];
return nil;
}
return self;
}
So if you get tweaking, this will work for you. I am still looking for the magic wand that make this work without all the hacks. No sign of it still :(

Resources