I'm trying to make a button that looks like this:
The button has
transparent background color
non-transparent title
semi-transparent white border color
What's the best way to do this? I know how to achieve the first two items, but how do I get the semi-transparent white border color?
Use the button's layer's properties:
yourButton.layer.borderWidth = 3.0f;
yourButton.layer.borderColor = [UIColor colorWithRed:178/255.0 green:170/255.0 blue:156/255.0 alpha:0.4].CGColor;
(Change the values so it looks good, alpha makes it semi-transparent)
Also, you'll need this if you don't have the circle yet:
yourButton.layer.cornerRadius = yourButton.frame.size.width/2;
EDIT: As #holex suggested, a better way to calculate the cornerRadius is:
CGFloat radius = MIN(yourButton.frame.size.width, yourButton.frame.size.height) / 2.0
yourButton.layer.cornerRadius = radius;
Related
This question already has answers here:
Adding border with width to UIView show small background outside
(4 answers)
Closed 5 years ago.
I'm setting the background color to a white border and the border is seeping through the background.I'm looking to have the blue line gone. Can you please suggest a solution to this problem?
Here is my code below. And there is an image of what I'm talking about below.
[
self.imageView.layer.borderColor = UIColor.white.cgColor
self.imageView.layer.borderWidth = 3
self.imageView.backgroundColor = UIColor.blue
self.imageView.layer.cornerRadius = CGFloat(CircleDiameter/2)
I guess this is what iOS rendering do with a layer have positive cornerRadius, I have Tested add a white circle view overlap a blue circle view which has the same size, the same situation appears:
In fact, through borderWidth Document the border of layer is drawn inset from the receiver’s bounds, so it has the same kind of situation as I mentioned above:
When this value is greater than 0.0, the layer draws a border using the current borderColor value. The border is drawn inset from the receiver’s bounds by the value specified in this property. It is composited above the receiver’s contents and sublayers and includes the effects of the cornerRadius property.
So borders + roundness = sadness on iOS and I think you need another way to implement your design.
I wonder why setting the corner radius of a ImageView will results in gray unwanted sharp angle, like this
Noted there is sharp gray angle behind the rounded corner image.
I set up the corner radius like this:
self.previewImageView.image = videoStream.thumbImage;
self.previewImageView.layer.cornerRadius = 8.0;
self.previewImageView.clipsToBounds = YES;
self.previewImageView.layer.masksToBounds = YES;
I also make sure the background color of the image view is white, but it wouldn't help anyway.
Anyone has any idea how to get rid of the sharp gray angle while setting the rounded corner of the image view?
I know I might draw a path and set the layer's mask path, are there any alternative?
My background view is a collection view cell, which happens to be not the same size as the imageView, i can't just set the corner radius of my background view
Try setting the image view's background color to clear.
just do:-
self.yourBackgroundView.layer.cornerRadius=self.yourImageView.layer.cornerRadius
You can try below code --
self.previewImageView.layer.borderColor = (__bridge CGColorRef)([UIColor clearColor]);
Hope this one is helpful.
I'm using AVFoundation framework to scan a barcode, but that may be unrelevant for my problem.
What I want:
I would like that the square bordered in green be transparent (not with the darkened black).
Here is what I have done:
I have 2 views: backgroundView( which occupies the whole screen) and highlightView which is the square bordered with green, on top of backgroundView (I have used a XIB for dimensions and positions) :
self.highlightView.layer.borderColor = [UIColor greenColor].CGColor;
self.highlightView.layer.borderWidth = 3;
// this following line does not allow the square to be transparent
self.highlightView.layer.opacity = 0;
// relative to AVFoundation
_previewLayer.frame = _backgroundView.bounds;
[_backgroundView.layer addSublayer:_previewLayer];
_previewLayer.backgroundColor = [UIColor blackColor].CGColor;
_previewLayer.opacity = 0.3;
UPDATE : xib (here representing the square with a clear color background), the backgroundView has the property black color background).
As I mentioned, you were looking in the wrong direction. There are multiple posts with a problem similar to yours, which have pretty decent answers. (You will have to study and understand to make the most of them):
Cut Out Shape with Animation
Simply mask a UIView with a rectangle
To sum it up, you need to apply the semi-transparent color to the layer of backgroundView and then play around with the layer's mask property to get the work done.
You can find many tutorials to learn using the layer and mask together.
Hope this helps.
I have 3 UITextFields with border style none. I want to add borders in code. The effect I want to achieve is to have rounded top corners on first UITextField and to have rounded bottom corners on third text field. Code I am using for rounding edges is here Round top corners of a UIView and add border
But i get this - no right edge and corners are not rounded:
Note: I've set all constraints, that is not a problem. If i use UITextBorderStyleLine right edge is not rounded again.
Please help.
if you want to simplest way to do like on a screen look here>>>
Grey view with clip subviews mode on, and 3 labels/textfields inside, and 2 black view with 1 pixel height
in code..
self.viewCorner.layer.cornerRadius = 6;
self.viewCorner.layer.borderWidth = 1;
self.viewCorner.layer.borderColor = [UIColor blackColor].CGColor;
After you set constraints to grey view and 2 views with 1 pixel height like this
Grey view
1 pixel height view
and result on IPad simulator
Thats all, you can do this for 5 minutes
You need to create custom UItextField or method to change the top and bottom corner to oval shape. Here is a below sample code to top corner similarly you need to do it for bottom left and right corner.
CGRect rect = myTextField.bounds;
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect
byRoundingCorners:UIRectCornerTopLeft |UIRectCornerTopRight
cornerRadii:CGSizeMake(6.0, 6.0)];
CAShapeLayer *layers = [CAShapeLayer layer];
layers.frame = rect;
layers.path = path.CGPath;
myTextField.layer.mask = layers;
I know there have been many questions on this before however none seem to work in my scenario. Pretty much I am trying to make the top maybe 10 points below the top of the frame of my tableview somewhat darker so have a nicer effect than just the cells scrolling off the frame.
Pretty much I need to accomplish an effect where the alpha starts at 0 and ends at 1 of a gray color which is 10 points high. This way there is some sort of subtle area before the top of the frame so that it doesn't look like the cells are just moving out of the frame.
Is this possible?
Thanks!
You can set a shadow to the navigationBar layer, assuming you are using one.
self.navigationController.navigationBar.layer.shadowColor = [[UIColor blackColor] CGColor];
self.navigationController.navigationBar.layer.shadowOffset = CGSizeMake(0.0f,0.0f);
self.navigationController.navigationBar.layer.shadowOpacity = 1.0f;
self.navigationController.navigationBar.layer.shadowRadius = 4.0f;
If you are not using a navigation controller, then you can apply this same type of shadow to a UIView's layer.