I am trying to draw a red button programmatically and want look and feel exactly that for an iOS6 button (including gradient effect).
I am doing this to support one of my application on iOS 6. I tried with custom button but no able to reach the milestone. Appreciate any quick help.
Here is what I have done in my custom 'UITableViewCell' class:
UIButton *myRedButton = [[UIButton alloc] initWithFrame:CGRectMake(CGRectGetMaxX(self.contentView.bounds) - 100, 0.0, 100, 35)];
myRedButton.titleLabel.font = [UIFont systemFontOfSize:12];
myRedButton.backgroundColor = [UIColor colorWithRed:194.0/255.0 green:21.0/255.0 blue:35.0/255.0 alpha:1.0];
myRedButton.layer.cornerRadius = 8.0;
myRedButton.clipsToBounds = YES;
[self.contentView addSubview:myRedButton];
For the benefit of others (in case some one is looking around for similar context) here is how I achieved it:
UIButton *myRedButton = [[UIButton alloc] initWithFrame:autoReverseButtonFrame];
myRedButton.titleLabel.font = [UIFont boldSystemFontOfSize:14];
myRedButton.layer.cornerRadius = 8.0;
myRedButton.clipsToBounds = YES;
myRedButton.layer.borderColor = [UIColor blackColor].CGColor;
self.autoReverseButton.layer.borderWidth = 1.0;
CGColorRef topColor = [UIColor colorWithRed:240.0/255.0 green:127.0/255.0 blue:133.0/255.0 alpha:1.0].CGColor;
CGColorRef bottomColor = [UIColor colorWithRed:194.0/255.0 green:21.0/255.0 blue:35.0/255.0 alpha:1.0].CGColor;
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = myRedButton.bounds;
gradient.cornerRadius = myRedButton.layer.cornerRadius;
gradient.colors = #[(__bridge id)topColor, (__bridge id)bottomColor];
[myRedButton.layer insertSublayer:gradient atIndex:0];
Related
How to set a gradient color to UITextField cursor? The effect is just like the picture below:
here is the picture
you can ask disigner for an one pix picture ,then do like as follows:
UIColor *collor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"one"]];
self.textfield.tintColor = collor;
To change UITextField Cursor color, you have set it as Tint Color of Type UIColor.
textField.tintColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"gradient"]];
Do this for all text fields in your app using the UITextField appearance proxy:
[[UITextField appearance] setTintColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"gradient"]]];
BONUS:
If you need to set gradient color for UIView:
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view.bounds;
gradient.colors = #[(id)[UIColor whiteColor].CGColor, (id)[UIColor blackColor].CGColor];
[view.layer insertSublayer:gradient atIndex:0];
I need to create some UIView in circular shape and showing text below that. I have created circle successfully. But is there any way that I should add label below that circle. I need to display many circle with text. Below is my code of circle and attach is the screen shot which I need to create.
- (UIView*)createCircleViewWithRadius
{
// circle view
UIView *circle = [[UIView alloc] initWithFrame:CGRectZero];
circle.translatesAutoresizingMaskIntoConstraints = NO;
circle.layer.cornerRadius = 50;
circle.layer.masksToBounds = YES;
// border
circle.layer.borderColor = [UIColor lightGrayColor].CGColor;
circle.layer.borderWidth = 1;
// gradient background color
CAGradientLayer *gradientBg = [CAGradientLayer layer];
gradientBg.frame = circle.frame;
gradientBg.colors = [NSArray arrayWithObjects:
(id)[UIColor clearColor].CGColor,
(id)[UIColor clearColor].CGColor,
nil];
// vertical gradient
gradientBg.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:1.0f],
nil];
// gradient background
CALayer *layer = circle.layer;
layer.masksToBounds = YES;
[layer insertSublayer:gradientBg atIndex:0];
return circle;
}
do like
UILabel *yourItemlabel = [[UILabel alloc]initWithFrame:CGRectMake(yourView.frame.origin.x + 10, yourView.frame.origin.y + yourView.frame.size.height + 10 , yourView.frame.size.width, 30)]; // customize the height
yourItemlabel.text = #"Request funds";
yourItemlabel.textAlignment = NSTextAlignmentCenter;
[sel.view addSubview:yourItemlabel];
You can do something like,
UIView *containerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 170, 200)];
UIView *circle = [[UIView alloc]initWithFrame:CGRectMake(10, 10, 150, 150)];
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(10, 170, 150, 30)];
label.text = #"Request funds";
label.textAlignment = NSTextAlignmentCenter;
circle.layer.borderColor = [UIColor lightGrayColor].CGColor;
circle.layer.borderWidth = 1.0;
circle.layer.cornerRadius = 75; // width or height / 2 and width = height (must for proper round shape)
circle.layer.masksToBounds = YES;
[containerView addSubview:circle];
[containerView addSubview:label];
[self.view addSubview: containerView];
You can modify size and origins according your need. this is demonstration that how you can achieve this.
Hope this helps!
I am new to iOS development and I am working with the UIStackView.
When I use StoryBoard to create two UILabels as child objects of UIStackView the following code to make gradient backround color of each UILabel works fine.
UILabel *label;
for (int ii = 1; ii < 3; ii++) {
label = [self.view viewWithTag:ii];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = label.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor yellowColor]CGColor], (id)[[UIColor grayColor]CGColor], nil];
[label.layer insertSublayer:gradient atIndex:0];
UILabel *newLabel = [[UILabel alloc] initWithFrame:label.bounds];
newLabel.backgroundColor = [UIColor clearColor];
newLabel.text = label.text;
[label addSubview:newLabel];
}
But when I create two UILabels programatically with using the code bellow,
my code above for making gradient background of each UILabel doesn't work and backround color stays white.
Can someone help me with this?
UILabel *myLabel;
myLabel = [[UILabel alloc] init];
[myLabel setText:#"text1"];
[myLabel setTag:1];
[stackView addArrangedSubview:myLabel];
myLabel = [[UILabel alloc] init];
[myLabel setText:#"text2"];
[myLabel setTag:2];
[stackView addArrangedSubview:myLabel];
The problem seems to be with the label bounds. The following code adds a UIStackView and adds several UILabels with gradients.
const int STACK_WIDTH = 200;
const int NUM_LABELS = 3;
const int LABEL_WIDTH = STACK_WIDTH / NUM_LABELS;
UIStackView* stack = [[UIStackView alloc] initWithFrame:CGRectMake(0, 0, STACK_WIDTH, 100)];
stack.axis = UILayoutConstraintAxisHorizontal;
stack.distribution = UIStackViewDistributionFillProportionally;
stack.alignment = UIStackViewAlignmentLeading;
stack.spacing = LABEL_WIDTH;
stack.backgroundColor = [UIColor greenColor];
[self.view addSubview:stack];
for(int i = 0; i < NUM_LABELS; i++){
UIView* myLabelView = [[UIView alloc] initWithFrame:CGRectMake(i * LABEL_WIDTH, 0, LABEL_WIDTH, stack.frame.size.height)];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = myLabelView.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor yellowColor]CGColor], (id)[[UIColor grayColor]CGColor], nil];
gradient.startPoint = CGPointMake(0, 0);
gradient.endPoint = CGPointMake(1, 0);
[myLabelView.layer addSublayer:gradient];
UILabel* myLabel = [[UILabel alloc] initWithFrame:myLabelView.bounds];
myLabel.text = [NSString stringWithFormat:#"label: %d", i];
[myLabelView addSubview:myLabel];
[stack addArrangedSubview:myLabelView];
}
I am trying to put transparency (or a color gradient) on the title of an UIButton. I don't know how do that. I have tried to simply put a clearColor on the titleColor but we only see the background color.
So i hope that there is someone here who will be an amazing idea for my problem.
My solution
self.loginButton = [UIButton buttonWithType:UIButtonTypeCustom];
self.loginButton.backgroundColor= [UIColor whiteColor];
self.loginButton.frame = CGRectMake(self.signUpButton.left,
0,
self.signUpButton.frame.size.width,
self.signUpButton.frame.size.height);
[self.loginButton.layer setBackgroundColor:[[UIColor blackColor] CGColor]];
self.loginButton.layer.borderColor = [[UIColor whiteColor] CGColor];
self.loginButton.layer.borderWidth = 1.0f;
self.loginButton.layer.cornerRadius = 3.0f;
[self.loginButton addTarget:self action:#selector(loginButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
self.loginButtonLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
self.loginButtonLabel.font = [UIFont fontWithName:#"OpenSans-Light" size:16.0f];
self.loginButtonLabel.textColor = [UIColor whiteColor];
self.loginButtonLabel.text = #"Connexion";
[self.loginButtonLabel sizeToFit];
UIColor *topColor = [UIColor blueColor];
UIColor *bottomColor = [UIColor orangeColor];
self.gradientView = [[UIView alloc] initWithFrame:self.loginButtonLabel.frame];
[self.loginButton addSubview:self.gradientView];
[self.loginButton sendSubviewToBack:self.gradientView];
[self.loginButton addSubview:self.loginButtonLabel];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.gradientView.frame;
gradient.colors = [NSArray arrayWithObjects:(id)topColor.CGColor, (id)bottomColor.CGColor, nil];
gradient.startPoint = CGPointMake(0, 0.5);
gradient.endPoint = CGPointMake(1, 0.5);
[self.gradientView.layer addSublayer:gradient];
self.gradientView.layer.mask = self.loginButtonLabel.layer;
self.gradientView.layer.masksToBounds = YES;
self.gradientView.center = CGPointMake(self.loginButton.width / 2, self.loginButton.height / 2);
[self.view addSubview:self.loginButton];
But Now i need to put the gradient on the border. Any idea ?
So my solution is to create a custom button with an UILabel. I will use an UIView with a gradient for color the text.
The solution :
self.loginButton = [UIButton buttonWithType:UIButtonTypeCustom];
self.loginButton.backgroundColor= [UIColor whiteColor];
self.loginButton.frame = CGRectMake(self.signUpButton.left,
0,
self.signUpButton.frame.size.width,
self.signUpButton.frame.size.height);
[self.loginButton.layer setBackgroundColor:[[UIColor blackColor] CGColor]];
self.loginButton.layer.borderColor = [[UIColor whiteColor] CGColor];
self.loginButton.layer.borderWidth = 1.0f;
self.loginButton.layer.cornerRadius = 3.0f;
[self.loginButton addTarget:self action:#selector(loginButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
self.loginButtonLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
self.loginButtonLabel.font = [UIFont fontWithName:#"OpenSans-Light" size:16.0f];
self.loginButtonLabel.textColor = [UIColor whiteColor];
self.loginButtonLabel.text = #"Connexion";
[self.loginButtonLabel sizeToFit];
UIColor *topColor = [UIColor blueColor];
UIColor *bottomColor = [UIColor orangeColor];
self.gradientView = [[UIView alloc] initWithFrame:self.loginButtonLabel.frame];
[self.loginButton addSubview:self.gradientView];
[self.loginButton sendSubviewToBack:self.gradientView];
[self.loginButton addSubview:self.loginButtonLabel];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.gradientView.frame;
gradient.colors = [NSArray arrayWithObjects:(id)topColor.CGColor, (id)bottomColor.CGColor, nil];
gradient.startPoint = CGPointMake(0, 0.5);
gradient.endPoint = CGPointMake(1, 0.5);
[self.gradientView.layer addSublayer:gradient];
self.gradientView.layer.mask = self.loginButtonLabel.layer;
self.gradientView.layer.masksToBounds = YES;
self.gradientView.center = CGPointMake(self.loginButton.width / 2, self.loginButton.height / 2);
[self.view addSubview:self.loginButton];
I am trying to add a gradient behind a transparent image. I do this on the map leftCallOutAccessoryView however no matter what I try the gradient layer always shows above the imageView and want it to appear behind it
heres my code for MKAnnotationView which is an ivar called pinView
pinView.rightCalloutAccessoryView = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
UIImageView *profileIconView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Profile.png"]];
pinView.leftCalloutAccessoryView = profileIconView;
CAGradientLayer *backgroundLayer = [CAGradientLayer layer];
backgroundLayer.frame = CGRectMake(0, 0, 30, 30);
backgroundLayer.cornerRadius = 2;
backgroundLayer.borderWidth = 1;
backgroundLayer.borderColor = [UIColor whiteColor].CGColor;
backgroundLayer.colors = [NSArray arrayWithObjects:(id)[[sharedManager cellGradientEnd] CGColor], (id)[[sharedManager cellGradientStart] CGColor], nil];
[profileIconView.layer insertSublayer:backgroundLayer atIndex:0];
I managed to figure it out using the below, in short I create a empty view then add the imageView as a subview to the view and now its all sweet!:
UIView *view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 30, 30)];
UIImageView *profileIconView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Profile.png"]];
pinView.leftCalloutAccessoryView = view;
CAGradientLayer *backgroundLayer = [CAGradientLayer layer];
backgroundLayer.frame = view.bounds;
backgroundLayer.cornerRadius = 2;
backgroundLayer.borderWidth = 1;
backgroundLayer.borderColor = [UIColor whiteColor].CGColor;
backgroundLayer.colors = [NSArray arrayWithObjects:(id)[[sharedManager cellGradientEnd] CGColor], (id)[[sharedManager cellGradientStart] CGColor], nil];
[pinView.leftCalloutAccessoryView.layer insertSublayer:backgroundLayer atIndex:0];
[view addSubview:profileIconView];