I want to add border to my UITextField like the this image
so I used this code
let rectShape = CAShapeLayer()
rectShape.bounds = self.userNameText.frame
rectShape.position = self.userNameText.center
rectShape.path = UIBezierPath(roundedRect: self.userNameText.bounds, byRoundingCorners: [ UIRectCorner.TopLeft , UIRectCorner.BottomRight ], cornerRadii: CGSize(width: 5.0 , height: 5.0)).CGPath
self.userNameText.layer.backgroundColor = UIColor.redColor().CGColor
//Here I'm masking the textView's layer with rectShape layer
self.userNameText.layer.mask = rectShape
but the result was like this
Did I miss something ??
Give the text field no border, and set its background however you like.
self.textField.borderStyle = .None
let path = UIBezierPath(roundedRect: self.textField.bounds, byRoundingCorners: [ UIRectCorner.TopLeft , UIRectCorner.BottomRight ], cornerRadii: CGSize(width: 8.0 , height: 8.0))
UIGraphicsBeginImageContextWithOptions(self.textField.bounds.size, false, 0)
path.stroke()
self.textField.background = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
Try changing the code from
rectShape.path = UIBezierPath(roundedRect: self.userNameText.bounds, byRoundingCorners: [ UIRectCorner.TopLeft , UIRectCorner.BottomRight ], cornerRadii: CGSize(width: 5.0 , height: 5.0)).CGPath
to
rectShape.path = UIBezierPath(roundedRect: self.userNameText.bounds, byRoundingCorners: [ UIRectCorner.BottomRight , UIRectCorner.TopLeft ], cornerRadii: CGSize(width: 5.0 , height: 5.0)).CGPath
and see if the bottom right corner rounds properly like the top left one is now and if the top left looks like the bottom right one is now. It's weird the all of the corners are rounding out like that except for the top left one.
A Recommendation: Try out textFieldEffects. It's a really cool open source project that allows you to create modern, visually appealing text fields in storyboard without any code! I just implemented it in my app and it looks great! The only complaint I have is that I can't get the didBeginEditing and didEndEditing functions to work (maybe a problem on my end).
This seems to get pretty close to what you are looking for:
let rectShape = CAShapeLayer()
rectShape.bounds = self.userNameText.frame
rectShape.position = self.userNameText.center
rectShape.path = UIBezierPath(roundedRect: self.usernameTextField.bounds, byRoundingCorners: [ UIRectCorner.TopLeft , UIRectCorner.BottomRight ], cornerRadii: CGSize(width: 5.0 , height: 5.0)).CGPath
rectShape.fillColor = nil
rectShape.strokeColor = UIColor.redColor().CGColor
self.userNameText.layer.addSublayer(rectShape)
self.userNameText.borderStyle = UITextBorderStyle.None
Here we turned off the border on the UITextField and added the shape as a sublayer.
My code will help you:
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.viewTable.bounds
byRoundingCorners:UIRectCornerBottomRight | UIRectCornerTopLeft
cornerRadii:CGSizeMake(13.0, 13.0)];
// Create the shape layer and set its path
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = txtFiled.bounds;
maskLayer.path = maskPath.CGPath;
maskLayer.strokeColor = [UIColor orangeColor].CGColor;
txtFiled.layer.mask = maskLayer;
CAShapeLayer *shape = [CAShapeLayer layer];
shape.frame = txtFiled.bounds;
shape.path = maskPath.CGPath;
shape.lineWidth = 1.0f;
shape.strokeColor = [UIColor orangeColor].CGColor;
shape.fillColor = [UIColor clearColor].CGColor;
[txtFiled.layer insertSublayer:shape above:maskLayer];
txtFiled.layer.masksToBounds = YES;
txtFiled.layer.shouldRasterize = YES;
txtFiled.layer.rasterizationScale = [[UIScreen mainScreen] scale];
Related
I created a rectangle using following code and now I need to rounded the corners of this rectangle. I set layer.cornerRadius also, can anyone help me?
My code as below,
private func setGradientBorder(_ ivUser:UIImageView) {
ivUser.layer.masksToBounds = true
ivUser.layer.cornerRadius = ivUser.frame.width / 2
let gradient = CAGradientLayer()
gradient.frame = CGRect(origin: CGPoint.zero, size: ivUser.frame.size)
gradient.colors = [UIColor.blue.cgColor, UIColor.green.cgColor]
let maskPath = UIBezierPath(roundedRect: ivUser.bounds,
byRoundingCorners: [.allCorners],
cornerRadii: CGSize(width: ivUser.frame.width/2, height: ivUser.frame.height/2)).cgPath
let shape = CAShapeLayer()
shape.lineWidth = 2
shape.path = maskPath
shape.strokeColor = UIColor.black.cgColor
shape.fillColor = UIColor.clear.cgColor
gradient.mask = shape
ivUser.layer.addSublayer(gradient)
}
output: gradient does not display properly rounded
This is how UIBezierPath works. Half of the line width will go on one side of the actual path, and half will go on another. Thats why it looks kinda cut out.
You will need to inset your paths rect by half of the line width, something like this:
let lineWidth: CGFloat = 2
let maskPath = UIBezierPath(roundedRect: ivUser.bounds.insetBy(dx: lineWidth/2, dy: lineWidth/2),
byRoundingCorners: [.allCorners],
cornerRadii: CGSize(width: ivUser.frame.width/2, height: ivUser.frame.height/2)).cgPath
Is there a way to set cornerRadius for only top-right and bottom-right corner of a UILabel?
I tried the following, but it is not working at all and I didn't get expected output using below code.So please can anyone make correction in my code if required?
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:lblCollectPaymentAmount.bounds
byRoundingCorners:(UIRectCornerTopRight | UIRectCornerBottomRight)
cornerRadii:CGSizeMake(5.0, 5.0)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = lblCollectPaymentAmount.bounds;
maskLayer.path = maskPath.CGPath;
lblCollectPaymentAmount.layer.mask = maskLayer;
lblCollectPaymentAmount.layer.masksToBounds = YES;
Apple has introduced maskedCorners property from iOS 11 and above which is very handy.
lbl.clipsToBounds = true
lbl.layer.cornerRadius = 10
lbl.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
//You can give an array for .layerMinXMinYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner and .layerMaxXMaxYCorner to give all corner a radius.
You can also declare an IBDesignable class for the label.
#IBDesignable
class CornerLable: UILabel {
#IBInspectable var cornerRadius:CGFloat = 10
override func layoutSubviews() {
layer.cornerRadius = cornerRadius
layer.maskedCorners = [.layerMinXMinYCorner,.layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMaxYCorner]
}
}
DON'T FORGET TO GIVE IT clipsToBounds = true in storyboard or in code.
Hope it helps.
#drashti:
it might help you :
let rectShape = CAShapeLayer()
rectShape.bounds = self.customView.frame
rectShape.position = self.customView.center
rectShape.path = UIBezierPath(roundedRect: self.customView.bounds, byRoundingCorners: [.bottomLeft , .bottomRight , .topLeft], cornerRadii: CGSize(width: 20, height: 20)).cgPath
self.customView.layer.backgroundColor = UIColor.green.cgColor
//Here I'm masking the textView's layer with rectShape layer
self.customView.layer.mask = rectShape
There is appeared maskedCorners property in IOS 11.
So I have an UIView (called myView) with some mask applied to it.
let maskPath = UIBezierPath(roundedRect: myView.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 12, height: 12))
let maskLayer = CAShapeLayer()
maskLayer.frame = myView.bounds
maskLayer.path = maskPath.cgPath
myView.layer.mask = maskLayer
Which layout this way:
What I am failing to do is add some shadow to myView. Since the view's layer have a mask, I am not able to add differents layers to it with shadow.
Does anyone ever had this problem?
set your image color to clear and to the following:
let maskPath = UIBezierPath(roundedRect: redView.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 12, height: 12))
let maskLayer = CAShapeLayer()[![enter image description here][1]][1]
maskLayer.fillColor = UIColor.red.cgColor // your color
maskLayer.frame = redView.bounds
maskLayer.path = maskPath.cgPath
redView.layer.addSublayer(maskLayer)
redView.layer.shadowOffset = CGSize(width: 10, height: 10)
redView.layer.shadowColor = UIColor.green.cgColor
redView.layer.shadowOpacity = 1
I'm trying to add a 6px radius to the bottom left and right corners of my view innerView, as well as a shadow to the whole of innerView. innerView is enclosed in a view called view2.
The only way I can get this to work is by using the following code:
let containerLayer = CALayer()
containerLayer.shadowColor = UIColor.blackColor().CGColor
containerLayer.shadowOffset = CGSizeMake(1, 2)
containerLayer.shadowOpacity = 0.2
containerLayer.shadowRadius = 2
let maskPath = UIBezierPath(roundedRect: innerView.bounds, byRoundingCorners: UIRectCorner.BottomLeft.union(.BottomRight), cornerRadii: CGSize(width: 6, height: 6)).CGPath
let maskLayer = CAShapeLayer()
maskLayer.path = maskPath
innerView.layer.mask = maskLayer
containerLayer.addSublayer(innerView.layer)
view2.layer.addSublayer(containerLayer)
However, since view2 is actually the contentView of a UITableViewCell, this code disables scrolling of the UITableView when dragging on containerLayer...
Swift 4 :
This Code Helped Me To Drop A Shadow To UIVIEW And Add CornerRadious Using UIBezierPath. Set Your View's Background Color As ClearColor
yourView.backgroundColor=UIColor.clear
let path1 = UIBezierPath(roundedRect:yourView.bounds,
byRoundingCorners:[.topRight, .bottomLeft],
cornerRadii: CGSize(width: 20, height: 20))
let maskLayer1 = CAShapeLayer()
maskLayer1.path = path1.cgPath
maskLayer1.fillColor = UIColor.white.cgColor
maskLayer1.shadowColor = UIColor.darkGray.cgColor
maskLayer1.shadowPath = maskLayer1.path
maskLayer1.shadowOffset = CGSize(width: 0.0, height: 2.0)
maskLayer1.shadowOpacity = 0.6
maskLayer1.shadowRadius = 2
yourView.layer.insertSublayer(maskLayer1, at: 0)
Solved it by embedding innerView in another view. I applied the shadow to the new view and the radius to the innerView:
func addShadowTo(shadowView: UIView, andRadiusTo radiusView: UIView) {
let maskPath = UIBezierPath(roundedRect: radiusView.bounds, byRoundingCorners: UIRectCorner.BottomLeft.union(.BottomRight), cornerRadii: CGSize(width: 6, height: 6)).CGPath
shadowView.layer.shadowPath = maskPath
shadowView.layer.shadowColor = UIColor.blackColor().CGColor
shadowView.layer.shadowOffset = CGSizeMake(1, 2)
shadowView.layer.shadowOpacity = 0.2
shadowView.layer.shadowRadius = 2
let maskLayer = CAShapeLayer()
maskLayer.path = maskPath
radiusView.layer.mask = maskLayer
}
If you are using Autolayout, then remove UIBezierPath. Try this code and custom one for yourself:
//This code custom a view with shadow and corner radius = 6
let shadowLayer: CALayer = shadowView.layer
shadowView.clipsToBounds = false
shadowLayer.shadowColor = 'your color'
shadowLayer.shadowOffset = CGSizeZero
shadowLayer.shadowOpacity = 1
shadowLayer.shadowRadius = 3
shadowLayer.shouldRasterize = true
let innerLayer: CALayer = innerView.layer
innerLayer.cornerRadius = 6
innerView.clipsToBounds = true
innerLayer.borderColor = 'your color'.CGColor
innerLayer.borderWidth = 1
The "innerView" is inside "shadowView" (on my xib file).
I want to make my TopLeft and TopRight corners with corner radius. It works with this code:
let rectShape = CAShapeLayer()
rectShape.bounds = self.name.frame
rectShape.position = self.name.center
rectShape.path = UIBezierPath(roundedRect: self.name.bounds, byRoundingCorners: .TopLeft | .TopRight, cornerRadii: CGSize(width: 20, height: 20)).CGPath
rectShape.backgroundColor = UIColor.blackColor().CGColor
self.name.layer.mask = rectShape
but it makes the corners transparent, like this:
How can I make them visible?
Bcs it's just a mask, your layer still square. There are many ways to do it, for example, you can paint your own layer and add it as sublayer. This properties should help you:
layer.fillColor = LAYER_COLOR.CGColor;
layer.strokeColor = LAYER_BORDER_COLOR.CGColor;
layer.lineWidth = LAYER_BORDER_WIDTH;
layer.opacity = LAYER_OPACITY;