I have the following code to create gradient button:
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = btnSignUp.layer.bounds;
gradientLayer.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithWhite:1.0f alpha:0.1f].CGColor,
(id)[UIColor colorWithWhite:0.4f alpha:0.5f].CGColor,
nil];
gradientLayer.cornerRadius = btnSignUp.layer.cornerRadius;
[btnSignUp.layer addSublayer:gradientLayer];
However, the bottom rounded corners are painted over too. I can't figure out why this happens. Any ideas?
Here is the picture: http://imageshack.us/a/img546/509/btnw.png
If you're targeting iOS 5.0 or higher, you may want to create a PNG file of the gradient and stretch it to fill the button's background instead of messing with a layer. I believe the performance impact of using a PNG is better.
So something like:
static UIEdgeInsets insets = {15, 15, 15, 15}; (or whatever your insets are)
UIImage* image = [[UIImage imageNamed:#"myImage"] resizableImageWithCapInsets:insets];
[_button setBackgroundImage:image forState:UIControlStateNormal];
I think what you want is _button.layer.masksToBounds = YES;
Related
I am trying to add gradient layer behind the UILabel's text which resides in a custom UITableViewCell. Problem is that gradient is hiding my label's text. I have already visited this link, but it is not working for me.So how can I add it behind the text layer?
What I have done so far is:
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = CGRectMake(0, 0, buyPrice_port.frame.size.width, buyPrice_port.frame.size.height);
gradient.colors = [NSArray arrayWithObjects:(id)gainBackgroundColor1, (id)gainBackgroundColor2, nil];
gradient.locations = [NSArray arrayWithObjects: [NSNumber numberWithFloat:0.00], [NSNumber numberWithFloat:0.70] , nil];
[buyPrice_port.layer insertSublayer:gradient atIndex:0];
buyPrice_port.textColor = [UIColor blackColor];
You can simply add a view behind the UILabel (i.e. add the label as a subview of the gradient view) and keep the label transparent.
I want to create a view which should have a glass like effect. It should look shining as well.
On that i want to add a UITextView which should appear transparent. I'm new to IPhone and not getting how to do this.
I don't want to add image. Wanna do programmatically. The view should look like as if it is a mobile screen.
Thanks
You'll have to do things if you don't want to use the image.
Add one UIView Use this code. And set gradient background color to it. Which will give you shiny glass like effect.
Here is the code:
.h file :
UIColor *pinkDarkOp;
UIColor *pinkLightOp;
CAGradientLayer *gradient;
.m file :
img_TopBarView = [[UIView alloc]initWithFrame:CGRectMake(0.0,0.0,1024.0,50.0)];
img_TopBarView.userInteractionEnabled = YES;
pinkDarkOp = [UIColor colorWithRed:15.0f/255.0 green:138.0f/255.0 blue:216.0f/255.0 alpha:1.0];
pinkLightOp = [UIColor colorWithRed:12.0f/255.0 green:91.0f/255.0 blue:183.0f/255.0 alpha:1.0];
gradient = [CAGradientLayer layer];
gradient.frame = [[img_TopBarView layer] bounds];
gradient.colors = [NSArray arrayWithObjects:(id)pinkDarkOp.CGColor,(id)pinkLightOp.CGColor,nil];
gradient.locations = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0f],[NSNumber numberWithFloat:0.7],nil];
[[img_TopBarView layer] insertSublayer:gradient atIndex:0];
[self.view addSubview:img_TopBarView];
[img_TopBarView release];
You have to take the values of pinkDarkOp and pinkLightOp as per your need. You can get this color code anywhere on google.
For eg : http://gradients.glrzad.com
For Creating the transparent UITextView you can use the alpha property of the UITextView.
I hope this helps.
I added a CAGradientLayer on my UIImageView. I've set the autoresizing mask on the UIImageView to be flexible all across border (flexible height, width..etc). However the gradient layer that I added on top of my imageView doesnt resize when the UIImageView resizes. Why is this? Here's the code:
CAGradientLayer *imgOverlay = [CAGradientLayer layer];
CGColorRef startBlueColor = [UIColor colorWithRed:23/255.f green:171/255.f
blue:219/255.f alpha:0.8].CGColor;
CGColorRef endBlueColor = [UIColor colorWithRed:23/255.f green:171/255.f
blue:219/255.f alpha:0.5].CGColor;
imgOverlay.colors = [NSArray arrayWithObjects:
(id) startBlueColor,
(id) endBlueColor,
nil];
imgOverlay.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:1.0],
nil];
imgOverlay.startPoint = startPoint;
imgOverlay.frame = self.backgroundImageView_.bounds;
imgOverlay.endPoint = endPoint;
self.imageOverlay = imgOverlay;
[self.backgroundImageView_.layer addSublayer:self.imageOverlay];
CALayer does not support auto resizing on iOS. You must implement your resizing manually in layoutSubviews or wherever appropriate.
how would you go about overlaying a mask image of sorts on top of a UIScrollView?
For example, I have an image with black on the left and right fading to white in the center. I'd like to use this so that the items in my scroll view gradually fade out to the sides and the center item is completely opaque.
Also, the background of the view the scrollview is placed on is an image (not a solid color) which is dynamic and can change.
Any ideas?
Your question wound up being the best source I could find on the basic problem, so I decided to post my solution here.
If you add the mask directly to the scroll view, you wind up applying the mask to the content itself for some reason -- i. e. the transparency doesn't shift as you scroll. As per the suggestions of other posts, I put the gradient in a view over (or rather, containing) the scroll view. As a result, scrollContainer is a UIViewObject whose sole subview is the scroll view in question.
This mask is configured for left-to-right scrolling. You could change it to top to bottom by manipulating the start and end point properties of the gradient.
The one down side is that this also clips the scroll position bar indicator of the scroll view. Since my scenario doesn't need one, that's acceptable, but your mileage may vary.
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = scrollView.bounds;
gradient.colors = [NSArray arrayWithObjects:
(id)[[UIColor colorWithWhite:0 alpha:0] CGColor],
(id)[[UIColor colorWithWhite:0 alpha:1] CGColor],
(id)[[UIColor colorWithWhite:0 alpha:1] CGColor],
(id)[[UIColor colorWithWhite:0 alpha:0] CGColor], nil];
gradient.locations=[NSArray arrayWithObjects:
[NSNumber numberWithFloat:0],
[NSNumber numberWithFloat:.1],
[NSNumber numberWithFloat:.9],
[NSNumber numberWithFloat:1], nil];
gradient.startPoint=CGPointMake(0, .5);
gradient.endPoint=CGPointMake(1, .5);
[scrollContainer.layer setMask:gradient];
If you have a solid color background behind the scrollview, you'll get better performance by just overlaying an image on top of the scroll view rather than trying to perform a mask within it.
Try something along these lines:
// I assume you are in a UIViewController and self.view is set to some kind of view
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 420)];
scrollView.backgroundColor = [UIColor redColor];
[self.view addSubview: scrollView];
[scrollView release];
// add img with gradient
UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"my-gradient.png"];
imgView.frame = CGRectMake(0, 0, 160, 420);
[self.view addSubview: imgView];
[imgView release];
This would give you a gradient that begins on the left and goes all the way to the center for the entire height, assuming that "my-gradient.png" is an image that actually contains a gradient.
These kind of manipulations are big ressources consumers. The best approach would be (if your case allows it) to put a mask image OVER your UIScrollView. This image's background shoud be transparent (ex. png32) and the image should be an alpha-gradient.
Use insertView:yourView atIndex:0
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Manually drawing a gradient in iPhone apps?
My application needs to display text in either a UIView or UILabel but the back ground must be a gradient as opposed to a true UIColor. Using a graphics program to create desired look is no good as the text may vary depending on data returned from a server.
Does anyone know the quickest way to tackle this?
Your thoughts are greatly appreciated.
I realize this is an older thread, but for future reference:
As of iPhone SDK 3.0, custom gradients can be implemented very easily, without subclassing or images, by using the new CAGradientLayer:
UIView *view = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 100)] autorelease];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor whiteColor] CGColor], nil];
[view.layer insertSublayer:gradient atIndex:0];
Take a look at the CAGradientLayer docs. You can optionally specify start and end points (in case you don't want a linear gradient that goes straight from the top to the bottom), or even specific locations that map to each of the colors.
You can use Core Graphics to draw the gradient, as pointed to in Mike's response. As a more detailed example, you could create a UIView subclass to use as a background for your UILabel. In that UIView subclass, override the drawRect: method and insert code similar to the following:
- (void)drawRect:(CGRect)rect
{
CGContextRef currentContext = UIGraphicsGetCurrentContext();
CGGradientRef glossGradient;
CGColorSpaceRef rgbColorspace;
size_t num_locations = 2;
CGFloat locations[2] = { 0.0, 1.0 };
CGFloat components[8] = { 1.0, 1.0, 1.0, 0.35, // Start color
1.0, 1.0, 1.0, 0.06 }; // End color
rgbColorspace = CGColorSpaceCreateDeviceRGB();
glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);
CGRect currentBounds = self.bounds;
CGPoint topCenter = CGPointMake(CGRectGetMidX(currentBounds), 0.0f);
CGPoint midCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetMidY(currentBounds));
CGContextDrawLinearGradient(currentContext, glossGradient, topCenter, midCenter, 0);
CGGradientRelease(glossGradient);
CGColorSpaceRelease(rgbColorspace);
}
This particular example creates a white, glossy-style gradient that is drawn from the top of the UIView to its vertical center. You can set the UIView's backgroundColor to whatever you like and this gloss will be drawn on top of that color. You can also draw a radial gradient using the CGContextDrawRadialGradient function.
You just need to size this UIView appropriately and add your UILabel as a subview of it to get the effect you desire.
EDIT (4/23/2009): Per St3fan's suggestion, I have replaced the view's frame with its bounds in the code. This corrects for the case when the view's origin is not (0,0).
Note: The results below apply to older versions of iOS, but when testing on iOS 13 the stepping doesn't occur. I don't know for which version of iOS the stepping was removed.
When using CAGradientLayer, as opposed to CGGradient, the gradient is not smooth, but has noticeable stepping to it. See :
To get more attractive results it is better to use CGGradient.
You could also use a graphic image one pixel wide as the gradient, and set the view property to expand the graphic to fill the view (assuming you are thinking of a simple linear gradient and not some kind of radial graphic).
Mirko Froehlich's answer worked for me, except when i wanted to use custom colors. The trick is to specify UI color with Hue, saturation and brightness instead of RGB.
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = myView.bounds;
UIColor *startColour = [UIColor colorWithHue:.580555 saturation:0.31 brightness:0.90 alpha:1.0];
UIColor *endColour = [UIColor colorWithHue:.58333 saturation:0.50 brightness:0.62 alpha:1.0];
gradient.colors = [NSArray arrayWithObjects:(id)[startColour CGColor], (id)[endColour CGColor], nil];
[myView.layer insertSublayer:gradient atIndex:0];
To get the Hue, Saturation and Brightness of a color, use the in built xcode color picker and go to the HSB tab. Hue is measured in degrees in this view, so divide the value by 360 to get the value you will want to enter in code.
This is what I got working- set UIButton in xCode's IB to transparent/clear, and no bg image.
UIColor *pinkDarkOp = [UIColor colorWithRed:0.9f green:0.53f blue:0.69f alpha:1.0];
UIColor *pinkLightOp = [UIColor colorWithRed:0.79f green:0.45f blue:0.57f alpha:1.0];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = [[shareWordButton layer] bounds];
gradient.cornerRadius = 7;
gradient.colors = [NSArray arrayWithObjects:
(id)pinkDarkOp.CGColor,
(id)pinkLightOp.CGColor,
nil];
gradient.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:0.7],
nil];
[[recordButton layer] insertSublayer:gradient atIndex:0];
I achieve this in a view with a subview that is an UIImageView. The image the ImageView is pointing to is a gradient. Then I set a background color in the UIView, and I have a colored gradient view. Next I use the view as I need to and everything I draw will be under this gradient view. By adding a second view on top of the ImageView, you can have some options whether your drawing will be below or above the gradient...