I have a UIViewController with a UITableView. The sits inside the view controller's view with some padding on all sides. I am trying to draw a drop shadow from the table view as well as rounded corners, but I am unable to achieve both at the same time. I have tried with the following code and turned masksToBounds on and off, but setting it to NO create a really weird effect with the shadow scrolling and the calls are not clipping inside the table.
[self.tableView.layer setShadowColor:[UIColor blackColor].CGColor];
[self.tableView.layer setShadowOffset:CGSizeMake(0, 3)];
[self.tableView.layer setShadowOpacity:0.4];
[self.tableView.layer setShadowRadius:3.0f];
[self.tableView.layer setCornerRadius:5.0f];
[self.tableView.layer setShadowPath:[[UIBezierPath bezierPathWithRoundedRect:self.tableView.bounds cornerRadius:5.0f] CGPath]];
I am just drawing a UITableView with plain style too. The effect I am trying to achieve can be seen in the free app Transit App and here's a movie where you can see the shadow stays and the table even has a mask that scrolls up and down.
I have searched and searched and haven't been able to put together a solution based on other SO answers or online articles. Help appreciated.
Try the below links, some of them are old but you can get some pointer.
Custom Table Effects
Dropshadow 2
Cool Table Views
DropShadow
Okay!! I attempted once again and got an effect, it is again a work around only (instead of using images), the below is what i tried
Create a CALayer, with the same frame as your tableview, give the same curve and all, add the table view on top of this layer, thats it.
CALayer *sublayer = [CALayer layer];
sublayer.backgroundColor = [UIColor blueColor].CGColor; // If you dont give this, shadow will not come, dont know why
sublayer.shadowOffset = CGSizeMake(0, 3);
sublayer.shadowRadius = 5.0;
sublayer.shadowColor = [UIColor blackColor].CGColor;
sublayer.shadowOpacity = 1.0;
sublayer.cornerRadius = 5.0;
sublayer.frame = CGRectMake(myTable.frame.origin.x, myTable.frame.origin.y, myTable.frame.size.width, myTable.frame.size.height);
[self.view.layer addSublayer:sublayer];
[self.view.layer addSublayer:myTable.layer];
Ah!! due to some reason I am unable to upload the screenshot from my machine, firewall ;-). I will try from my home.
-anoop
It is recommended to use images for drop shadows with large tableviews, all that drawing has the ability to slow down performance, which can result in bad user experience, just a word of advice
I know this is a rather old question, but I recently had the same problem and the solutions here were good examples, but not full enough. So here it is the method I'm using to create shadow of a table view. It can be used also for any other view.
-(void)makeShadowToView:(UIView*) view withHeight:(CGFloat)shadowHeight
{
CGRect bounds = view.frame;
bounds.size.height = shadowHeight;
view.clipsToBounds = NO; // Without this row it doesn't display any shadow, at least for a table view
view.layer.shadowColor = [UIColor blackColor].CGColor;
view.layer.shadowOpacity = 0.9f;
view.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
view.layer.shadowRadius = 5.0f;
view.layer.shadowPath = [UIBezierPath bezierPathWithRect:bounds].CGPath;
}
Example usage: [self makeShadowToView:self.view withHeight:height];
where height is added in case you want to recalculate the shadow's height according to the table content's height.
(void)shadowForView{
CALayer *layer = self.viewActionMenu.layer;
layer.shadowOffset = CGSizeMake(-2, 0);
layer.shadowColor = [[UIColor blackColor] CGColor];
layer.shadowRadius = 2.0f;
layer.shadowOpacity = 0.80f;
// [self.view bringSubviewToFront:self.actionView];
}
And Call:
[self shadowForView];
Try this
UITableView * objTableview=[[UITableView alloc]initWithFrame:CGRectMake(x, y, w, h)];
UIView * objViewShadow=[[UIView alloc]initWithFrame:objTableview.bounds];
objTableview.layer.cornerRadius=5;
// add shadow
objViewShadow.layer.shadowOffset = CGSizeMake(0, 3);
objViewShadow.layer.shadowRadius = 5.0;
objViewShadow.layer.shadowColor = [UIColor blackColor].CGColor;
objViewShadow.layer.shadowOpacity = 0.8;
[objViewShadow addSubview:objTableview];
[self.view addSubview:objViewShadow];
You need to set this two properties
self.tableView.clipsToBounds = NO;
self.tableView.layer.masksToBounds = NO;
Related
I need to set the length size of a UIButton border. I tried using this
[[jb layer] setBorderLength:2.2f];
but got a error saying "setBorderLength is not a method".
Here's my code for my UIButton border:
[[jb layer] setBorderWidth:2.2f];
[[jb layer] setBorderColor:[UIColor blackColor].CGColor];
setting a layer border parameters :
jb.layer.borderColor = [UIColor blackColor].CGColor;
jb.layer.borderWidth = 1;
jb.layer.cornerRadius = jb.bounds.size.width * 0.1;
There is no border length. The border width determines how thick your border is.
The border is around your frame. If you mean your border to be appear wider around your button consider changing the frame.
You would have to create layers and add it to the button to handle this scenario
CALayer * layer = [CALayer layer];
layer.bounds = CGRectMake(0, 0, buttonWidth, 1.0);
layer.backgroundColor = [UIColor blackColor].CGColor;
layer.opacity = 0.1f;
[self.button.layer addSublayer:layer];
This will add border on only the top border of button.
Change the frame and add 3 more layers to cover left right and bottom
As can be seen in the image above there is a black shadow at the bottom of the image. I want similar effect in table view.( I want shadow for every line or the seperator between the table view cells.) The shadow effect should be more on the center as can be seen above and it should fade at its extremes.. Kindly help..
You can add a shadow by adding it to the view's layer (change the values to get your desired effect):
view.layer.shadowColor = [UIColor blackColor].CGColor;
view.layer.shadowOffset = CGSizeMake(0.0f, 2.0f);
view.layer.shadowOpacity = 0.5f;
view.layer.shadowRadius = 4.0f;
As you mentioned, you want to use it inside a UITableView, then you should provide a shadowPath as well for the best performance:
- (void)layoutSubviews
{
[super layoutSubviews];
view.layer.shadowPath = [UIBezierPath bezierPathWithRect:view.bounds].CGPath;
}
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:-
I can add shadow to imageView layer using the following code.
self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"test.png"]];
self.imageView.center = self.view.center;
CALayer *containerLayer= [CALayer layer];
containerLayer.shadowColor = [UIColor blackColor].CGColor;
containerLayer.shadowRadius = 10.0f;
containerLayer.shadowOffset = CGSizeMake(10.0f, 5.0f);
containerLayer.shadowOpacity = .8f;
[containerLayer addSublayer:self.imageView.layer];
[self.view.layer addSublayer:containerLayer];
1 . The problem is that I don't know why I have to add imageView.layer to containerLayer to get the imageView shadow effect. However, if I add containerLayer to imageView.layer, there's no shadow in imageView, why?
The error code is:
self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"test.png"]];
self.imageView.center = self.view.center;
CALayer *containerLayer= [CALayer layer];
/*same as before*/
[self.imageView.layer addSublayer:containerLayer];
[self.view.layer addSublayer:self.imageView.layer];
Question2: the containerLayer's(used to provide shadow to imageView) frame = {{0, 0}, {0, 0}}, but the final position is in the center of screen. why?
A layer needs something opaque inside it to create a shadow around (unless you've specified a shadowPath explicitly). So your first version of the code works because the containerLayer has the imageView's layer as a sublayer. But, as you noticed from Question #2, the containerLayer's frame indicates that it is actually located in the upper left corner with a size of (0,0). The reason you can still see the image is that containerLayer is not masking to its bounds. Add this line to your first version, and the image disappears:
[containerLayer setMasksToBounds: YES]; // kitten (and shadow) is gone
Your version #2 of the code does not display a shadow because, in part, the containerLayer does not "contain" anything. If you use version #2 but give the containerLayer a new frame and an opaque background color, a shadow appears. (But this obviously isn't a solution, because the image is covered up...) Also note that there is no shadow when the layer's background is [UIColor clearColor].
[self.imageView.layer addSublayer:containerLayer];
containerLayer.frame = self.imageView.layer.bounds;
containerLayer.backgroundColor = [UIColor yellowColor].CGColor; // yellow box w/shadow
// containerLayer.backgroundColor = [UIColor clearColor].CGColor; // no shadow here
If you wanted to have a container with a shadow that houses the UIImageView, you could do something like this:
UIView * shadowView = [[UIView alloc] initWithFrame: self.imageView.frame];
shadowView.layer.shadowColor = [UIColor blackColor].CGColor;
shadowView.layer.shadowRadius = 10.0f;
shadowView.layer.shadowOffset = CGSizeMake(10.0f, 5.0f);
shadowView.layer.shadowOpacity = .8f;
[self.view addSubview: shadowView];
self.imageView.frame = (CGRect) { CGPointZero, self.imageView.frame.size };
[shadowView addSubview: self.imageView];
A CALayer could be used instead of a UIView in a similar way. Or you could apply shadow attributes to the imageView's layer directly, making sure that neither the view nor the layer is clipping/masking to bounds.
If you want to add a shadow over the imageview just change the alpha value (0.0 min - 1.0 max) of that imageview. This will give you the shadow effect and whenever you want to remove the shadow just restore the alpha value to 1.0.
For ex:
self.imageview.alpha = 0.5 // shadow state
self.imageview.alpha = 1.0 // original state
I know I can change a border's object with
item.layer.cornerRadius = floatValue;
item.layer.borderWidth = intValue;
item.layer.borderColor = colorValue;
But how can I only change top, left and right borders ?
Thank you for your advices.
I don't think you can do that directly.
There are a couple of responses to this question that might help, including one that links to some open source code that solves the problem.
You could use another layer to mask away the corners that you don't want to see. This has the downside that you:
can't have a shadow
can't have another mask (if you don't do them together)
will loose half the border width since the border is stroked on the center of your border
If that is okay with you, here is a sample code that should get you started
CGFloat borderWidth = 4.0;
[[myView layer] setBorderWidth:borderWidth];
CALayer *mask = [CALayer layer];
// The mask needs to be filled to mask
[mask setBackgroundColor:[[UIColor blackColor] CGColor]];
// Make the masks frame smaller in height
CGRect maskFrame = CGRectInset([myView bounds], 0, borderWidth);
// Move the maskFrame to the top
maskFrame.origin.y = 0;
[mask setFrame:maskFrame];
[[myView layer] setMask:mask];