Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UIBarButtonItem with rounded corners and shadow

I want to have rounded corners and shadow on a UIBarButtonItem.

UIButton *useButton = [UIButton buttonWithType:UIButtonTypeCustom];

Then I try to set shadow and rounded corners:

useButton.layer.masksToBounds = NO;
useButton.layer.cornerRadius = 4;
useButton.layer.shadowOffset = CGSizeMake(0, 1.5);
useButton.layer.shadowRadius = 0.5;
useButton.layer.shadowOpacity = 1.0;
useButton.layer.shadowColor = [BSTCMColorUtility colorFromHexString:@"#AFAFAF"].CGColor;

Finally I make the UIBarButtonItem:

UIBarButtonItem *useItem = [[UIBarButtonItem alloc] initWithCustomView:useButton];
[self.navigationItem setRightBarButtonItems:@[useItem]];

I get no rounded corners, but I do get the shadow.

If I add:

useButton.clipsToBounds = YES;

And/or:

useButton.layer.masksToBounds = YES;

I get rounded corners, but no shadow. So I thought that I would try to add a sublayer.

CALayer *useButtonShadowLayer = [CALayer new];
useButtonShadowLayer.frame = useButton.frame;
useButtonShadowLayer.cornerRadius = 4;
useButtonShadowLayer.backgroundColor = [UIColor whiteColor].CGColor;
useButtonShadowLayer.shadowOffset = CGSizeMake(0, 1.5);
useButtonShadowLayer.shadowRadius = 0.5;
useButtonShadowLayer.shadowOpacity = 1.0;
useButtonShadowLayer.shadowColor = [BSTCMColorUtility colorFromHexString:@"#AFAFAF"].CGColor;

useButton.layer.cornerRadius = 4;
useButton.layer.masksToBounds = YES;

UIView *parent = useButton.superview;
[parent.layer insertSublayer:useButtonShadowLayer below:useButton.layer];

It doesn't seem to work, I see no shadow. I get rounded corners tho.

Isn't possible to have rounded corners AND shadow on a UIBarButtonItem/UIButton?

like image 575
Johannes Avatar asked May 27 '14 10:05

Johannes


People also ask

How do I add inner shadow to UIView with rounded corners?

Add subview with the same color which will be centered on the parent and will be with several pixels smaller. Like this you will have space from each side of the parent. On the parent turn on clipping subviews and add shadow to the inner view. Like this, you can have an inner shadow.

How to add shadow to UICollectionViewCell?

Shadows on a UICollectionViewCell Adding a drop shadow to a UICollectionViewCell follows the same method as adding a drop shadow to a UIView . Configure the shadowRadius , shadowOpacity , shadowColor , and shadowOffset of the view's layer property to the desired shadow design.

How to make rounded corners in swift?

Make UIImageView Corners RoundedSetting the corner radius to 100 will make the image view completely rounded. Try different corner radius like 10, 20, 30, 40 to get image corners of different radius. To make the image border and visible I will set the borderWidth and the borderColor.


2 Answers

Try this Updated code :

UIButton *useButton = [UIButton buttonWithType:UIButtonTypeCustom];
useButton.frame = CGRectMake(100, 430, 100, 40);
useButton.layer.masksToBounds = NO;
useButton.layer.cornerRadius = 10;
useButton.layer.shadowOffset = CGSizeMake(1.5, 1.5);
useButton.layer.shadowRadius = 0.5;
useButton.layer.shadowOpacity = 1.0;
useButton.layer.shadowColor = [UIColor blackColor].CGColor;
useButton.backgroundColor = [UIColor redColor];

UIBarButtonItem *useItem = [[UIBarButtonItem alloc] initWithCustomView:useButton];
[self.navigationItem setRightBarButtonItems:@[useItem]];
like image 152
Mayur Avatar answered Sep 21 '22 08:09

Mayur


    UIButton *useButton = [UIButton buttonWithType:UIButtonTypeCustom];
    useButton.frame = CGRectMake(0, 0, 60, 30);
    useButton.backgroundColor = [UIColor redColor];
    useButton.layer.masksToBounds = NO;
    useButton.layer.cornerRadius = 4;
    useButton.layer.shadowOffset = CGSizeMake(0, 1.5);
    useButton.layer.shadowRadius = 5;
    useButton.layer.shadowOpacity = 1.0;
//    useButton.layer.shadowColor = [UIColor blackColor].CGColor;
    useButton.layer.borderColor = [UIColor blackColor].CGColor;
    [self.view addSubview:useButton];

    UIBarButtonItem *useItem = [[UIBarButtonItem alloc] initWithCustomView:useButton];
    [self.navigationItem setRightBarButtonItems:@[useItem]];
like image 34
Ashwinkumar Mangrulkar Avatar answered Sep 22 '22 08:09

Ashwinkumar Mangrulkar