I'm experiencing something very weird. I have a custom UICollectionViewCell that has a UIImageView. Now, I'm setting the cornerRadius of the UIImageView to be rounded and it works on some images, but for others, it produces results like this:
You can clearly see the top and the bottom of the image are not rounded and I'm not sure what causes this. I assume it has to do with the width/height of the image, but I cant figure it out.
I'm using this tiny extension on UIImageView to set the rounded images.
extension UIImageView {
func makeRounded() {
let radius = self.bounds.height / 2.0
self.layer.cornerRadius = radius
self.layer.masksToBounds = true
self.clipsToBounds = true
}
}
I tried changing the self.bounds.height to self.bounds.width, no change. I tried using self.frame.height, self.frame.size.height, self.frame.width, all produces the same result.
It has nothing to with cornerRadius, your code (makeRounded()) should make it rounded.
The issue is related to the contentMode of the image view. If you tried to add a background color to it, you should be able to understand exactly what's the issue, so let's say set the backgroundColor as .red, you should see a red circle containing the image in the middle.
To fix it, you should choose a content mode that will fill the whole image view, such as .scaleToFill or .scaleAspectFill:
extension UIImageView {
func makeRounded() {
let radius = self.bounds.height / 2.0
self.layer.cornerRadius = radius
self.layer.masksToBounds = true
self.clipsToBounds = true
// add this one:
self.contentMode = .scaleAspectFill
}
}
Related
I'm almost sure this question has been asked before, but I searched for almost an hour and didn't find anything
This is my code:
textField.font = UIFont.systemFont(ofSize: 12.0)
textField.layer.borderWidth = 0.9
textField.placeholder = "border is 0.9 clip is false"
textField.layer.borderColor = UIColor.black.cgColor
textField.borderStyle = UITextBorderStyle.roundedRect
textField.returnKeyType = UIReturnKeyType.done
Doesn't matter if set textField.clipsToBounds to true or false, the borders won't be rounded. However if I change the background color, it will fill it as it has a rounded border, see the image below.
if you zoom in, you'll see that the it doesn't fill the corners completely
If I set textField.layer.borderWidth = 0.1 then I would have a nice roundedRect, but they border would then have to be a thin line. See the image below:
again setting clipToBounds = true won't make any difference.
EDIT:
So the answer is to do textField.layer.cornerRadius = 5. But then I wonder what is the UITextBorderStyle.roundedRect doing then?!
Try textField.layer.cornerRadius = 5
cornerRadius - the radius to use when drawing rounded corners for the layer’s background. Animatable.
var cornerRadius: CGFloat { get set }
Setting the radius to a value greater than 0.0 causes the layer to
begin drawing rounded corners on its background. By default, the
corner radius does not apply to the image in the layer’s contents
property; it applies only to the background color and border of the
layer. However, setting the masksToBounds property to true causes the
content to be clipped to the rounded corners.
The default value of this property is 0.0.
Update:
But then I wonder what is the UITextBorderStyle.roundedRect doing then?
Basically the same thing but with default radius. Maybe it was overwritten somewhere. Check out your IB properties, in Attribute Inspector, Border Style property:
My view controller possesses a stack view with 3 buttons. One fixed in the center with a fixed width and the stackview set to fill proportionally such that the other two buttons will be symmetrical.
However I am also customizing the corner radius of the buttons and as soon as the application loads the button resizes in an undesired fashion.
Ive attempted numerous stackview distribution and fill settings. Removing the buttons from the stackview and simply trying to contraint them to edges on a normal UIView to no avail as it seems, but uncertain if, the constraints get deleted.
Visually the button will be located at the bottom right hand corner of the screen with 0 space between the edge and the button. Currently it gets laid out in a manner where there is no constraint it seems on multiple devices causing it to have a space on larger displays, and exit the screen on small displays within the simulator.
Attempted coding efforts to round the desired corners:
#IBOutlet fileprivate weak var button: UIButton! { didSet {
button.round(corners: [.topRight, .bottomLeft], radius: 50 , borderColor: UIColor.blue, borderWidth: 5.0)
button.setNeedsUpdateConstraints()
button.setNeedsLayout()
} }
override func viewDidLayoutSubviews() {
button.layoutIfNeeded()
}
ovverride func updateViewContraints() {
button.updateConstraintsIfNeeded()
super.updateViewConstraints()
}
The UIView extension that is being used can be found here:
https://stackoverflow.com/a/35621736/5434541
What solution is available to properly adjust the buttons corner radius' and allow the constraints to update the button to as it should be.
Without seeing your full code, I suspect you're getting this because it's drawing multiple layers with the border, and never removing any! If the buttons get resized, the old layers are still there. Here's a snip that shows removing the old layer on redraw that you should be able to adapt. I tested this inside a stack view, and it also behaves correctly on rotation:
class RoundedCorner: UIButton {
var lastBorderLayer:CAShapeLayer?
override func layoutSubviews() { setup() }
func setup() {
let r = self.bounds.size.height / 2
let path = UIBezierPath(roundedRect: self.bounds,
byRoundingCorners: [.topLeft, .bottomRight],
cornerRadii: CGSize(width: r, height: r))
let mask = CAShapeLayer()
mask.path = path.cgPath
addBorder(mask: mask, borderColor: UIColor.blue, borderWidth: 5)
self.layer.mask = mask
}
func addBorder(mask: CAShapeLayer, borderColor: UIColor, borderWidth: CGFloat) {
let borderLayer = CAShapeLayer()
borderLayer.path = mask.path
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.strokeColor = borderColor.cgColor
borderLayer.lineWidth = borderWidth
borderLayer.frame = bounds
if let last = self.lastBorderLayer, let index = layer.sublayers?.index(of: last) {
layer.sublayers?.remove(at: index)
}
layer.addSublayer(borderLayer)
self.lastBorderLayer = borderLayer
}
}
You also noted in your comment about the app lag. I'm not surprised, since layout can get called many times per update, and you're creating a new layer every single time. You can avoid this by saving the last dimensions of the botton frame and comparing. If it's identical, don't recreate the layer.
I want to give an imageView a shadow at the same time with rounded corners,but I failed.
Here is my solution
Basic idea :
Use an Extra view (say AView) as super view of image view (to those views on which you are willing to have shado) and assign that view class to DGShadoView
Pin Image view to AView (that super view)from left, right, top and bottom with constant 5
Set back ground color of the AView to clear color from storybosrd's Property inspector this is important
Inside idea: Here we are using a Bezier path on the Aview nearly on border and setting all rounded corner properties and shadow properties to that path and we are placing our target image view lie with in that path bound
#IBDesignable
class DGShadoView:UIView {
override func draw(_ rect: CGRect) {
self.rect = rect
decorate(rect: self.rect)
}
func decorate(rect:CGRect) {
//self.backgroundColor = UIColor.clear
//IMPORTANT: dont forgot to set bg color of your view to clear color from story board's property inspector
let ref = UIGraphicsGetCurrentContext()
let contentRect = rect.insetBy(dx: 5, dy: 5);
/*create the rounded oath and fill it*/
let roundedPath = UIBezierPath(roundedRect: contentRect, cornerRadius: 5)
ref!.setFillColor("your color for background".cgColor)
ref!.setShadow(offset: CGSize(width:0,height:0), blur: 5, color: "your color for shado".cgColor)
roundedPath.fill()
/*draw a subtle white line at the top of view*/
roundedPath.addClip()
ref!.setStrokeColor(UIColor.red.cgColor)
ref!.setBlendMode(CGBlendMode.overlay)
ref!.move(to: CGPoint(x:contentRect.minX,y:contentRect.minY+0.5))
ref!.addLine(to: CGPoint(x:contentRect.maxX,y:contentRect.minY+0.5))
}
}
Update
Extension Approach
There is another Approach. Just Make a class with empty and paste Following UIImageView Extension code, Assign this subclass to that ImageView on which you shadow.
import UIKit
class DGShadowView: UIImageView {
#IBInspectable var intensity:Float = 0.2{
didSet{
setShadow()
}
}
override func layoutSubviews()
{
super.layoutSubviews()
setShadow()
}
func setShadow(){
let shadowPath = UIBezierPath(rect: bounds)
layer.masksToBounds = false
layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: 0.0, height: 0.3)
layer.shadowOpacity = intensity
layer.shadowPath = shadowPath.cgPath
}
}
The solution is to create two separate views. One for the shadow and one for the image itself. On the imageView you clipToBounds the layer so that the corner radius is properly added.
Put the imageView on top of the shadowView and you've got your solution!
I've got a UILabel is using a border the same color as a background which it is half obscuring, to create a nice visual effect. However the problem is that there is still a tiny, yet noticeable, sliver of the label's background color on the OUTSIDE of the border.
The border is not covering the whole label!
Changing the border width doesn't change anything either, sadly.
Here's a picture of what's going on, enlarged so you can see it:
And my code follows:
iconLbl.frame = CGRectMake(theWidth/2-20, bottomView.frame.minY-20, 40, 40)
iconLbl.font = UIFont.fontAwesomeOfSize(23)
iconLbl.text = String.fontAwesomeIconWithName(.Info)
iconLbl.layer.masksToBounds = true
iconLbl.layer.cornerRadius = iconLbl.frame.size.width/2
iconLbl.layer.borderWidth = 5
iconLbl.layer.borderColor = topBackgroundColor.CGColor
iconLbl.backgroundColor = UIColor.cyanColor()
iconLbl.textColor = UIColor.whiteColor()
Is there something I'm missing?
Or am I going to have to figure out another to achieve this effect?
Thanks!
EDIT:
List of things I've tried so far!
Changing layer.borderWidth
Fussing around with clipsToBounds/MasksToBounds
Playing around the the layer.frame
Playing around with an integral frame
EDIT 2:
No fix was found! I used a workaround by extending this method on to my UIViewController
func makeFakeBorder(inputView:UIView,width:CGFloat,color:UIColor) -> UIView {
let fakeBorder = UIView()
fakeBorder.frame = CGRectMake(inputView.frame.origin.x-width, inputView.frame.origin.y-width, inputView.frame.size.width+width*2, inputView.frame.size.height+width*2)
fakeBorder.backgroundColor = color
fakeBorder.clipsToBounds = true
fakeBorder.layer.cornerRadius = fakeBorder.frame.size.width/2
fakeBorder.addSubview(inputView)
inputView.center = CGPointMake(fakeBorder.frame.size.width/2, fakeBorder.frame.size.height/2)
return fakeBorder
}
I believe this is the way a border is drawn to a layer in iOS. In the document it says:
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.
One way to fix this is to apply a mask to a view's layer, but I found out that even if so we still can see a teeny tiny line around the view when doing snapshot tests. So to fix it more, I put this code to layoutSubviews
class MyView: UIView {
override func layoutSubviews() {
super.layoutSubviews()
let maskInset: CGFloat = 1
// Extends the layer's frame.
layer.frame = layer.frame.inset(dx: -maskInset, dy: -maskInset)
// Increase the border width
layer.borderWidth = layer.borderWidth + maskInset
layer.cornerRadius = bounds.height / 2
layer.maskToBounds = true
// Create a circle shape layer with true bounds.
let mask = CAShapeLayer()
mask.path = UIBezierPath(ovalIn: bounds.inset(dx: maskInset, dy: maskInset)).cgPath
layer.mask = mask
}
}
CALayer's mask
I've been trying to change the size and rotation of a progress view to adopt the size of the screen. It would basically function have a filling glass effect on the screen of the phone.
I rotated it fairly harmlessly by using
self.masteryProgress.transform = CGAffineTransformMakeRotation((CGFloat(-90) / CGFloat(180.0) * CGFloat(M_PI)))
I got the size of the view encasing the screen using view.bounds trying to get the rect and the width x height. So I'm not stuck there.
I tried using .frame .drawRect but when I use those it either breaks them or does nothing.
The height attribute seems to be locked at a constant value of 2 in interfaceBuilder.
Any solutions before I build a custom animation?
I tried setting the height of the progress bar in interfaceBuilder like some other posts said, but I need to have the progress view fill the whole screen no matter what device it's running on so that solution won't work in my case.
I ended up using
CGAffineTransformScale(masteryProgress.transform, view.bounds.height / 1334, (view.bounds.width / 2))
Since I'm rotating the progressView vertically, I set the progress view to a width of 1334 (the height of the iPhone 6 Plus) and a height of 2. By dividing the height of the screen by these values it should resize to any phone perfectly.
You can scale it by set its transform like so:
Swift 2
masteryProgress.transform = CGAffineTransformScale(masteryProgress.transform, 1, 20)
Swift 3、4
masteryProgress.transform = masteryProgress.transform.scaledBy(x: 1, y: 20)
I faced problem while making the UIProgressView as round rect one. While using only the transform
masteryProgress.transform = CGAffineTransformMakeScale(1, 4)
I achieved which was not my final requirement.
while my final expectation was something like the following
I finally achieved it by following two steps
1. Set Height Constraint from Interface Builder:
2. Create a custom class of UIProgressView and override func layoutSubviews() to add a custom mask layer:
override func layoutSubviews() {
super.layoutSubviews()
let maskLayerPath = UIBezierPath(roundedRect: bounds, cornerRadius: 4.0)
let maskLayer = CAShapeLayer()
maskLayer.frame = self.bounds
maskLayer.path = maskLayerPath.cgPath
layer.mask = maskLayer
}
And here is the final result
Transform still seems to be the only way to accomplish this. Try adding it as an extension to UIProgressView like so.
extension UIProgressView {
#IBInspectable var barHeight : CGFloat {
get {
return transform.d * 2.0
}
set {
// 2.0 Refers to the default height of 2
let heightScale = newValue / 2.0
let c = center
transform = CGAffineTransformMakeScale(1.0, heightScale)
center = c
}
}
}
If you added UIProgressView using Interface Builder, just create height constraint and change to value what you need. That's it.
This will work:
masteryProgress.transform = CGAffineTransformMakeScale(1, 4)
Some modification of 'Sauvik Dolui' answer:
In UIBezierPath you should set cornerRadius: like (self.frame.height / 2).
This is more universal solution than use (4.0).
override func layoutSubviews() {
super.layoutSubviews()
let maskLayerPath = UIBezierPath(roundedRect: bounds, cornerRadius: self.frame.height / 2)
let maskLayer = CAShapeLayer()
maskLayer.frame = self.bounds
maskLayer.path = maskLayerPath.cgPath
layer.mask = maskLayer
}
In Swift 3, it's changed to CGAffineTransform(scaleX: CGFloat, y: CGFloat). So code would be:
masteryProgress.transform = CGAffineTransform(scaleX: 1, y: 4)
In Swift version 3.0.2 use this:
masteryProgress.transform = masteryProgress.transform.scaledBy(x: 1, y: 5)
I'm experiencing same with Swift - UIProgressView fills diagonally
After scale progressbar with
CGAffineTransformMakeScale(1.0, 5.0)
bar animation becomes filling from left top corner to right bottom.
Putting the UIProgressView inside a UIStackView and setting the UIStackView's constraints might work as well. At least worked for me
I tried the accepted answer for Swift 5, had a label pinned to the bottom of the progressView and the label was oddly stretched. To change the height without any other issues I used it's heightAnchor to set it to the height I wanted.
1- create a programmatic UIProgressView:
lazy var progressView: UIProgressView = {
let progressView = UIProgressView(progressViewStyle: .default)
progressView.translatesAutoresizingMaskIntoConstraints = false
progressView.trackTintColor = .white
progressView.progressTintColor = .green
progressView.progress = 0
return progressView
}()
2- set the heightAnchor constraint:
progressView.heightAnchor.constraint(equalToConstant: 12).isActive = true
progressView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
progressView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20).isActive = true
progressView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20).isActive = true
It works for me:
progress.transform = progress.transform.scaledBy(x: 1, y: self.bounds.size.height)
"self.bounds.size.height" is the height you want
I gave it height constraint and it worked for me. I gave it 10 Constant. But if you are creating a universal app you can also use multipliers.