I am looking at how to make a label appear to have a rounded glossy look, similar to this:
I know I can use the CALayer in the app for different things like borders, and rounded corners, but I'm unsure about a glossy look. Right now I am using:
CALayer* l = [myCounterLabel layer];
CALayer* m = [myhiddenlabel layer];
[l setMasksToBounds:YES];
[l setCornerRadius:11];
[l setBorderWidth:2.0];
[l setBorderColor:[[UIColor blackColor] CGColor]];
This gives me a label that looks like this (I know font and everything else doesn't match...right now just looking for a glossy look:
There's a few ways you could do this but a CAGradientLayer is likely your best bet. Assume you have CAGradientLayer* property:
self.gradient = [CAGradientLayer layer];
self.gradient.frame = CGRectMake(100, 100, 100, 100);
self.gradient.cornerRadius = 11;
self.gradient.borderWidth = 2.0;
// Set the colors you want in the gradient
self.gradient.colors = #[(id)[UIColor grayColor].CGColor, (id)[UIColor grayColor].CGColor, (id)[UIColor blackColor].CGColor, (id)[UIColor blackColor].CGColor];
// if you want to control as to the distribution of the gradient you can set the control points for the gradient here (make sure you have as many as you have colors)
self.gradient.locations = #[#0.0f, #0.5f, #0.5f, #1.0f];
You could try to add another sub-layer to your original layer with background color to fill the second half part:
CALayer *sublayer = [CALayer layer];
sublayer.backgroundColor = [UIColor blueColor].CGColor; //your color
sublayer.frame = CGRectMake(0, 50, 50, 50); //parent layer (height 100, width 50)
[yourLayer addSublayer:sublayer];
Related
I would like to draw an outline around a column. here is how my app actually looks like: https://gyazo.com/80dffe6a153e82565a610222a43e0c11
So the white column represent the day on where we are actually. But I don't really want to do that.
Actually I'm doing this:
if(column == _intOfTheDay){ //intOfTheDay represent the day one where we are actually
cell.backgroundColor = [[UIColor whiteColor]colorWithAlphaComponent:0.95];
}
I've tried something like this to get closer of the result that I want:
if(column == _intOfTheDay){
cell.layer.borderWidth = 5.0f;
cell.layer.borderColor = [UIColor redColor].CGColor;
}
But the problem here (without all the bugs due to the UICollectionView) is that it draw a rectangle around each cell. And what I would like is to draw only one rectangle but around all the column.
How could I process?
Every help will be appreciated, thanks in advance.
If you don't want to subclass the UICollectionViewCell then use this :
float borderWidth = 5.0;
CALayer *leftBorder = [CALayer new];
leftBorder.frame = CGRectMake(0.0, 0.0, borderWidth, cell.frame.size.height);
leftBorder.backgroundColor = [UIColor redColor].CGColor;
[cell.layer addSublayer:leftBorder];
CALayer *rightBorder = [CALayer new];
rightBorder.frame = CGRectMake(cell.frame.size.width - borderWidth, 0.0, borderWidth, cell.frame.size.height);
rightBorder.backgroundColor = [UIColor redColor].CGColor;
[cell.layer addSublayer:rightBorder];
You can do something like this, set three border to first cell of column- left,right and top and for last cell of column left,right and bottom and for all middle cell left and right. you can use CALayer to set one side border like below example,
CALayer *TopBorder = [CALayer layer];
TopBorder.frame = CGRectMake(0.0f, 0.0f, self.myImageView.frame.size.width, 3.0f);
TopBorder.backgroundColor = [UIColor redColor].CGColor;
[cell.layer addSublayer:TopBorder];
I'm not sure if this is a duplicate question, but feel free to flag if it it is.
I'm trying to add a shadow to the outside of a CALayer. I currently have a UIImageView within a CALayer that I've made with rounder corners as shown:
CALayer * l = [ImageView layer];
[l setMasksToBounds:YES];
[l setCornerRadius:10.0];
I've tried to add the additional code:
[l setShadowOffset:CGSizeMake(0, 3)];
[l setShadowOpacity:0.4];
[l setShadowRadius:3.0f];
[l setShouldRasterize:YES];
The results are shown in RED where the shadow is applied within the CALayer instead of outside it, and that's what I'd like to achieve in green along the edges:
How can I achieve this while still maintain the rounded corners? Thanks
You can use UIBazierPath to achieve this:
UIBezierPath *shadow = [UIBezierPath bezierPathWithRect:imageview.bounds];
imageview.layer.masksToBounds = NO;
imageview.layer.shadowColor = [UIColor redColor].CGColor;
imageview.layer.shadowOffset = CGSizeMake(0.0f, 5.0f);
imageview.layer.shadowOpacity = 0.5f;
imageview.layer.shadowPath = shadowPath.CGPath;
Here masksToBounds = NO so sublayer of layer can extend boundry of view for shadow effect.
I have the following code:
- (void)setupLayer {
self.faucetShape = [CAShapeLayer layer];
self.faucetShape.strokeColor = [[UIColor blackColor] CGColor];
self.faucetShape.lineWidth = 2;
self.faucetShape.fillColor = nil;
self.faucetShape.path = [self faucetPath].CGPath; // faucetPath returns a 4 point diamond shaped UIBezierPath*
self.faucet = [CAGradientLayer layer];
self.faucet.mask = self.faucetShape;
self.faucet.colors = #[(id)[UIColor redColor].CGColor, (id)[UIColor redColor].CGColor];
[self.layer addSublayer: self.faucet];
}
But it shows nothing. Not sure what I'm missing (other than my graphic).
(faucet and faucetPath are both properties)
UPDATE
OK, I guess a CAGradientLayer has to have a meaningful frame. I assume a CAShapeLayer's frame isn't as meaningful, since the path can go outside the frame. Adding the following line made it show up:
self.faucet.frame = CGRectMake(0, 0, 64, 64);
So NOW my question is, is there a way to avoid having to do that? I'd just like the frame of the layer to implicitly be that of the containing View/Layer.
You need to set the frame of the layers. The following code will draw a red circle:
- (void)setupLayer
{
CAShapeLayer *faucetShape = [CAShapeLayer layer];
faucetShape.frame = CGRectMake(0, 0, 100, 100);
faucetShape.strokeColor = [[UIColor blackColor] CGColor];
faucetShape.lineWidth = 2;
faucetShape.fillColor = nil;
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, nil, CGRectMake(0, 0, 100, 100));
faucetShape.path = path;
CGPathRelease(path);
CAGradientLayer *faucet = [CAGradientLayer layer];
faucet.frame = CGRectMake(10, 10, 100, 100);
faucet.mask = faucetShape;
faucet.colors = #[(id)[UIColor redColor].CGColor, (id)[UIColor redColor].CGColor];
[self.view.layer addSublayer: faucet];
}
I want to achieve the text appearance like in the pictures below:
Now I'm working on shadow around the letters and I can't figure out how to do that.
What I've tried so far:
- The solution with:
label.shadowColor = [UIColor blackColor];
label.shadowOffset = CGSizeMake(1, 2);
gives a nice sharp shadow, but it doesn't fit my needs by two reasons:
It gives a shadow only from one side, set up by shadowOffset, whereas I need a "wrapping" shadow;
This solution doesn't give the soft part of the shadow (gradient) as there is in the pictures;
-The solution with:
label.layer.shadowOffset = CGSizeMake(0, 0);
label.layer.shadowRadius = 5.0;
label.layer.shouldRasterize = YES;
label.layer.shadowOpacity = 1;
label.layer.shadowColor = [UIColor blackColor].CGColor;
label.layer.masksToBounds = NO;
Works great, but it gives too soft shadow even though the shadowOpacity is set to 1 and the shadowColor is set to black:
Obviously it's not enough and I already think about drawing in labels' context. But it is not clear to me how would I achieve the goal even through context drawing.
Any idea would be much appreciated.
Try this
Create a Custom UILabel SubClass and Override the following method
- (void)drawTextInRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextSetShadow(context, CGSizeMake(0.0, 0.0), 10);
CGContextSetShadowWithColor(context, CGSizeMake(0.0, 0.0), 10, [UIColor blackColor].CGColor);
[super drawTextInRect:rect];
CGContextRestoreGState(context);
}
and this bottomColorLayer to the Label
CALayer *bottomColorLayer = [CALayer layer];
bottomColorLayer.frame = CGRectMake(0, labelRect.size.height/2, labelRect.size.width, labelRect.size.height/2);
bottomColorLayer.backgroundColor = [[UIColor colorWithWhite:0 alpha:.5] CGColor];
[label.layer insertSublayer:bottomColorLayer above:(CALayer *)label.layer];
or If you want Gradient
CAGradientLayer *bottomGradient = [CAGradientLayer layer];
bottomGradient.frame = CGRectMake(0, labelRect.size.height/2, labelRect.size.width, labelRect.size.height/2);
bottomGradient.cornerRadius = 0.0f;
bottomGradient.colors = #[(id)[[UIColor colorWithWhite:1 alpha:.5] CGColor], (id)[[UIColor colorWithWhite:0 alpha:.5] CGColor]];
[label.layer insertSublayer:bottomGradient above:(CALayer *)label.layer];
Use an explicit shadow path that's the shape you want. It sounds like you want a shadow the same shape as your text, but larger, with each shadow-letter centered on its corresponding letter. Once you have that, use the shadow radius to soften the edges of the shadow to whatever degree you want.
The code you have relies on the shadow radius alone to make the shadow larger than the text, which removes your ability to control the softness.
Try with the code below :-
[_testLable setText:#"TION ERRO"];
[_testLable setTextColor:[UIColor whiteColor]];
[_testLable setFont:[UIFont boldSystemFontOfSize:22] ];
_testLable.layer.shadowOffset = CGSizeMake(0, 0);
_testLable.layer.shadowRadius = 10.0;
_testLable.layer.shouldRasterize = YES;
_testLable.layer.shadowOpacity = 1;
_testLable.layer.shadowColor = [UIColor blackColor].CGColor;
_testLable.layer.masksToBounds = NO;
CGPathRef shadowPath = CGPathCreateWithRect(_testLable.bounds, NULL);
_testLable.layer.shadowPath = shadowPath;
CGPathRelease(shadowPath);
Its output is like this:-
Take a look at the following image:
As you can see the edges are sharp rectangle and they are coming out of the rounded corner button. How can I not show the edges and only show the round button?
UPDATE (Solution):
I used the following code to achieve the round corners:
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.stopButton.bounds
byRoundingCorners:UIRectCornerAllCorners
cornerRadii:CGSizeMake(12.0, 12.0)];
// Create the shape layer and set its path
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = self.stopButton.bounds;
maskLayer.path = maskPath.CGPath;
// Set the newly created shape layer as the mask for the image view's layer
self.stopButton.layer.mask = maskLayer;
NEW PROBLEM:
This code gives me the error on the startButtonRound.layer.cornerRadius line.
UIButton *roundStartButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
roundStartButton.frame = CGRectMake(10, 10, 100, 20);
[roundStartButton setBackgroundImage:[UIImage imageNamed:#"green_gradient.jpg"] forState:UIControlStateNormal];
roundStartButton.layer.cornerRadius = 12.0;
UIBarButtonItem *startButton = [[UIBarButtonItem alloc] initWithCustomView:roundStartButton];
You could do this with CALayer alone:
CALayer *myLayer = [CALayer layer];
[myLayer setMasksToBounds:YES];
[myLayer setCornerRadius:5.0f];
[myLayer setBorderWidth:1.0f];
[myLayer setBorderColor: [[UIColor blackColor] CGColor]];
[myLayer setBackgroundColor: [[UIColor whiteColor] CGColor]];
You'll also want to include the QuartzCore framework and include the frameworks header in your own.
#include <QuartzCore/QuartzCore.h>
Hope this helps
Tim
I think all that can be accomplished with:
self.stopButton.layer.cornerRadius = 12.0;
But did you try
self.stopButton.opaque = NO;
self.stopButton.backgroundColor = [UIColor clearColor];
?
form the look of the image you have set your UIButton bckground color to 'White'. Make it 'Clear Color'.