I am trying to display a UIView with round corners and with a drop shadow. But the problem is that maskToBounds property only works for either of the case.
If maskToBounds is YES then round corners show up and when NO then shadow shows up. Here is the implementation but it only displays round corners with no shadow:
[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"blue_gradient.jpeg"]]];
self.view.layer.masksToBounds = YES;
self.view.layer.opaque = NO;
self.view.layer.cornerRadius = 15.0f;
self.view.layer.shadowColor = [UIColor blackColor].CGColor;
self.view.layer.shadowRadius = 5.0;
self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
self.view.layer.shadowOpacity = 0.9f;
ideas!
NOTE: I have read and implemented the code in the following thread but it does not work:
UIView with rounded corners and drop shadow?
UPDATE 1:
I tried to create two separate views. One will represent the radius and one will represent the shadow. The problem is that is creates the shadow on top of the radius view as shown in the screenshot below:
H
ere is the code:
self.view.layer.masksToBounds = YES;
self.view.layer.opaque = NO;
self.view.layer.cornerRadius = 15.0f;
// self.view.backgroundColor = [UIColor clearColor];
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"blue_gradient.jpeg"]];
//
UIView *shadowView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
shadowView.layer.shadowColor = [UIColor blackColor].CGColor;
shadowView.layer.shadowRadius = 2.0;
shadowView.backgroundColor = [UIColor clearColor];
shadowView.layer.shadowOffset = CGSizeMake(3.0, 3.0);
shadowView.layer.shadowOpacity = 0.9f;
shadowView.layer.shadowPath = [UIBezierPath
bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;
[self.view addSubview:shadowView];
UPDATE 2:
Inverted still does not work. No round corners are created.
UIView *roundCornerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
roundCornerView.layer.masksToBounds = YES;
roundCornerView.layer.opaque = NO;
roundCornerView.layer.cornerRadius = 15.0f;
self.view.layer.shadowColor = [UIColor blackColor].CGColor;
self.view.layer.shadowRadius = 2.0;
//self.view.backgroundColor = [UIColor clearColor];
self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
self.view.layer.shadowOpacity = 0.9f;
self.view.layer.shadowPath = [UIBezierPath
bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;
[self.view addSubview:roundCornerView];
SOLUTION:
UIView *roundCornerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
roundCornerView.layer.masksToBounds = YES;
roundCornerView.layer.opaque = NO;
roundCornerView.layer.cornerRadius = 15.0f;
roundCornerView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"blue_gradient.jpeg"]];
self.view.layer.shadowColor = [UIColor blackColor].CGColor;
self.view.layer.shadowRadius = 2.0;
self.view.backgroundColor = [UIColor clearColor];
self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
self.view.layer.shadowOpacity = 0.9f;
//self.view.layer.shadowPath = [UIBezierPath
// bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;
[self.view addSubview:roundCornerView];
Create two views.
one with the drop shadow (and don't forget to set the shadowPath)
in which you add a subview with cornerRadius and maskToBounds.
The accepted answer didn't include any code, so here is an example in Swift (See the original question for the OP's solution in Obj-C).
Like the accepted answer, this solution uses separate views for the shadow and the corner radius.
// add the shadow to the base view
baseView.backgroundColor = UIColor.clear
baseView.layer.shadowColor = UIColor.black.cgColor
baseView.layer.shadowOffset = CGSize(width: 3, height: 3)
baseView.layer.shadowOpacity = 0.7
baseView.layer.shadowRadius = 4.0
// improve performance
baseView.layer.shadowPath = UIBezierPath(roundedRect: baseView.bounds, cornerRadius: 10).cgPath
baseView.layer.shouldRasterize = true
baseView.layer.rasterizationScale = UIScreen.main.scale
// add the border to subview
let borderView = UIView()
borderView.frame = baseView.bounds
borderView.layer.cornerRadius = 10
borderView.layer.borderColor = UIColor.black.cgColor
borderView.layer.borderWidth = 1.0
borderView.layer.masksToBounds = true
baseView.addSubview(borderView)
// add any other subcontent that you want clipped
let otherSubContent = UIImageView()
otherSubContent.image = UIImage(named: "lion")
otherSubContent.frame = borderView.bounds
borderView.addSubview(otherSubContent)
My full answer is here.
You can do it with a single view by applying following:
1. Firstly add a corner radius
yourview.layer.cornerRadius = 5.0
2. Call a function below
shadowToView(view : yourview)
func shadowToView(view : UIView){
view.layer.shadowOffset = CGSize(width: 0, height: 3)
view.layer.shadowOpacity = 0.6
view.layer.shadowRadius = 3.0
view.layer.shadowColor = UIColor.darkGray.cgColor
}
Related
I have this code so far, but I just want a shadow at the bottom of a myView
myView.layer.shadowColor = [UIColor grayColor].CGColor;
myView.layer.shadowOffset = CGSizeMake(5, 5);
myView.layer.shadowOpacity = 1;
myView.layer.shadowRadius = 1.0;
Change
myView.layer.shadowOffset = CGSizeMake(5, 5);
to
myView.layer.shadowOffset = CGSizeMake(0, 5);
see if that works for you.
I want circle the corner based on percentage.
For Example if rating is 3 out of 10 .I want to circle the corner radius with one color and remaining with other color.
Below is my code:
UIView *mainView = [[UIView alloc]initWithFrame:CGRectMake(170, 5, 50, 50)];
[mainView setBackgroundColor:[UIColor whiteColor]];
[viewAwesome addSubview:mainView];
mainView.layer.cornerRadius = mainView.frame.size.width / 2;
mainView.clipsToBounds = YES;
mainView.layer.rasterizationScale = [UIScreen mainScreen].scale;
mainView.layer.shouldRasterize = YES;
UILabel *lblRatingVal = [[UILabel alloc]initWithFrame:CGRectMake(170, 5, 50, 50)];
lblRatingVal.text = [NSString stringWithFormat:#" %#",[dictRelevance valueForKey:#"avg_rating"]];
lblRatingVal.textColor = [UIColor colorWithRed:59.0/255.0 green:59.0/255.0 blue:59.0/255.0 alpha:1.0f];
lblRatingVal.font = [UIFont fontWithName:#"HelveticaNeueLight" size:6.0] ;
lblRatingVal.textAlignment = NSTextAlignmentCenter;
[viewAwesome addSubview:lblRatingVal];
CAShapeLayer *circleLayerRating = [CAShapeLayer layer];
circleLayerRating.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 50, 50)].CGPath;
circleLayerRating.fillColor = nil;
circleLayerRating.strokeColor = [UIColor redColor].CGColor;
circleLayerRating.strokeEnd = val;
circleLayerRating.lineWidth = 5;
[mainView.layer addSublayer:circleLayerRating];
I want to circle remaining with blue color.Any Help?
Maybe you could use https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIBezierPath_class/index.html#//apple_ref/occ/clm/UIBezierPath/bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:
for drawing the circles. draw the blue circle first with 0-2π und the red on top.
I'm trying to add a shadow to a masked UIView (from a UIImage), but I believe because the view is masked to bounds, masksToBounds = YES the shadow isn't showing.
If this is indeed the case, how then can I accomplish drawing a shadow around a masked image?
-(UIView *)modifyViewWithMask:(UIView *)view
{
view.alpha = 0.5;
UIView *blackView = [[UIView alloc] initWithFrame:view.bounds];
blackView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
blackView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.3];
[view addSubview:blackView];
UIImage* bubbleImage = [UIImage imageNamed:#"Bubble"];
CALayer* mask = [CALayer layer];
mask.contents = (id)[bubbleImage CGImage];
mask.frame = CGRectMake(0, 0, view.frame.size.width, view.frame.size.height);
view.layer.mask = mask;
view.layer.masksToBounds = YES;
view.layer.shadowColor = [UIColor blackColor].CGColor;
view.layer.shadowOffset = CGSizeMake(10, 10);
view.layer.shadowRadius = 10;
view.layer.shadowOpacity = 1;
}
Is it possible to add a border just on top of a UIView, if so, how please?
I just Testing Bellow few line of Code and it works very nice, just test it in to your Project. hope you'll get your solution easily.
Why to create new View and adding it into your existing view..? For this task simply create one CALayer and add it into your existing UIView's Layer do as following:-
#import <QuartzCore/QuartzCore.h>
- (void)viewDidLoad
{
CALayer *TopBorder = [CALayer layer];
TopBorder.frame = CGRectMake(0.0f, 0.0f, myview.frame.size.width, 3.0f);
TopBorder.backgroundColor = [UIColor redColor].CGColor;
[myview.layer addSublayer:TopBorder];
[super viewDidLoad];
}
and It's Output is:-
i've find solution for me, here's the tricks :
CGSize mainViewSize = self.view.bounds.size;
CGFloat borderWidth = 1;
UIColor *borderColor = [UIColor colorWithRed:37.0/255 green:38.0/255 blue:39.0/255 alpha:1.0];
UIView *topView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, mainViewSize.width, borderWidth)];
topView.opaque = YES;
topView.backgroundColor = borderColor;
topView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin;
[self.view addSubview:topView];
GilbertOOI's answer in Swift 2:
let topBorder: CALayer = CALayer()
topBorder.frame = CGRectMake(0.0, 0.0, myView.frame.size.width, 3.0)
topBorder.backgroundColor = UIColor.redColor().CGColor
myView.layer.addSublayer(topBorder)
Here's a UIView category that lets you add a layer-back or view-backed border on any side of the UIView: UIView+Borders
GilbertOOI's answer in Swift 4:
let topBorder: CALayer = CALayer()
topBorder.frame = CGRect(x: 0, y: 0, width: myView.frame.size.width, height: 1)
topBorder.backgroundColor = UIColor.purple.cgColor
myView.layer.addSublayer(topBorder)
I created this simple UIView subclass so that it works in Interface Builder and works with constraints:
https://github.com/natrosoft/NAUIViewWithBorders
Here's my blog post about it:
http://natrosoft.com/?p=55
-- Basically just drop in a UIView in Interface Builder and change its class type to NAUIViewWithBorders.
-- Then in your VC's viewDidLoad do something like:
/* For a top border only ———————————————- */
self.myBorderView.borderColorTop = [UIColor redColor];
self.myBorderView..borderWidthsAll = 1.0f;
/* For borders with different colors and widths ————————— */
self.myBorderView.borderWidths = UIEdgeInsetsMake(2.0, 4.0, 6.0, 8.0);
self.myBorderView.borderColorTop = [UIColor blueColor];
self.myBorderView.borderColorRight = [UIColor redColor];
self.myBorderView.borderColorBottom = [UIColor greenColor];
self.myBorderView.borderColorLeft = [UIColor darkGrayColor];
Here's a direct link to the .m file so you can see the implementation: NAUIViewWithBorders.m
There is a demo project as well.
remus' answer in Obj-C:
CALayer *topBorder = [CALayer new];
topBorder.frame = CGRectMake(0.0, 0.0, self.frame.size.width, 3.0);
topBorder.backgroundColor = [UIColor redColor].CGColor;
[myView.layer addSublayer:topBorder];
Swift5:
We will write a separate method to add borders to this view. To add borders to this view we will create two layers with the desired thickness. We will set the frame of these two layers to the top and bottom of the view. We will set the desired background color of the borders on these layers and add these layers as subLayers to the view.
func addTopBorders() {
let thickness: CGFloat = 1.0
let topBorder = CALayer()
topBorder.frame = CGRect(x: 0.0, y: 0.0, width:
self.down_view_outlet.frame.size.width, height: thickness)
topBorder.backgroundColor = UIColor.white.cgColor
down_view_outlet.layer.addSublayer(topBorder)
}
May i know how do i add bottom border to UILable only with shadow?
No top, left, right border.
this is not working. Here is the code I've tried but it's not working.
CALayer* layer = [titleLabel layer];
layer.frame = CGRectMake(-1, -1, titleLabel.frame.size.width, 1.0f);
layer.borderWidth=1;
[layer setBorderWidth:2.0f];
[layer setBorderColor:[UIColor blackColor].CGColor];
[layer setShadowOffset:CGSizeMake(-3.0, 3.0)];
[layer setShadowRadius:5.0];
[layer setShadowOpacity:5.0];
Test in this way:
UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
[lbl setText:#"Testo di prova..."];
[lbl setBackgroundColor:[UIColor clearColor]];
[[self view] addSubview:lbl];
[lbl sizeToFit];
CALayer* layer = [lbl layer];
CALayer *bottomBorder = [CALayer layer];
bottomBorder.borderColor = [UIColor darkGrayColor].CGColor;
bottomBorder.borderWidth = 1;
bottomBorder.frame = CGRectMake(-1, layer.frame.size.height-1, layer.frame.size.width, 1);
[bottomBorder setBorderColor:[UIColor blackColor].CGColor];
[layer addSublayer:bottomBorder];
I hope this helps you
Just posting this answers for reference, since the user already got the answer,
Try this code in Swift and let me know how it goes..
func buttomBorder(label: UILabel) -> UILabel {
// For Buttom Border
let frame = label.frame
let bottomLayer = CALayer()
bottomLayer.frame = CGRect(x: 0, y: frame.height - 1, width: frame.width - 2, height: 1)
bottomLayer.backgroundColor = UIColor.lightGray.cgColor
label.layer.addSublayer(bottomLayer)
//For Shadow
label.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25).CGColor
label.layer.shadowOffset = CGSizeMake(0.0, 2.0)
label.layer.shadowOpacity = 1.0
label.layer.shadowRadius = 0.0
label.layer.masksToBounds = false
label.layer.cornerRadius = 4.0
return label
}
Function Call:
labelName = buttomBoder(label: labelName)