I want to make a border to imageview and here is my code
let view = UIImageView()
view.layer.borderWidth = 4
view.layer.borderColor = UIColor(red: 1, green: 1, blue: 1, alpha:0.4).cgColor
view.layer.cornerRadius = 40
view.layer.masksToBounds = true
But this only adds border inside of imageview,how can i make it outside?
This can help you. Add a border layer using CALayer you can customize border color and border frame, also the other parameters.
let borderLayer = CALayer()
let borderFrame = CGRect(x: -1.0, y: -1.0, width: imageView.frame.size.height + 2.0, height: imageView.frame.size.height + 2.0)
borderLayer.backgroundColor = UIColor.clear.cgColor
borderLayer.frame = borderFrame
borderLayer.cornerRadius = 5.0
borderLayer.borderWidth = 2.0
borderLayer.borderColor = UIColor.red.cgColor
imageView.layer.addSublayer(borderLayer)
There are 2 ways to do it.
1. Using storyboard
If you are doing it in the storyboard, you can give the layer related properties directly in User Defined Runtime Attributes column in the storyboard itself.
Screenshot:
2. Using Code
let imageView = UIImageView(frame: CGRect(x: 50, y: 50, width: 240, height: 128))
imageView.image = UIImage(named: "Image")
imageView.layer.borderWidth = 4
imageView.layer.cornerRadius = 40
imageView.layer.borderColor = UIColor.red.cgColor
imageView.layer.masksToBounds = true
self.view.addSubview(imageView)
Output:
Edit:
Screenshot after changing alpha of borderColor
Create a UIView and make it slightly larger than the image, then add the image to the center. Setting the background color will make the border a different color.
let border = UIView(frame: CGRect(x: 0, y: 0, width: 251, height: 251))
border.backgroundColor = UIColor.red
let image = UIImageView(frame: CGRect(x: 0, y: 0, width: 250, height: 250))
image.center = border.center
image.image = ...
border.addSubview(image)
Related
I am new in swift and I am trying to add shadow to UIView.
My code is like this
ViewPay.layer.masksToBounds = false
ViewPay.layer.shadowRadius = 2
ViewPay.layer.shadowOpacity = 1
ViewPay.layer.shadowColor = UIColor.red.cgColor
ViewPay.layer.shadowOffset = CGSize(width: 0 , height:2)
but it is adding shadow to all side
How can I add shadow like this
One solution is, put your ViewPay inside a container UIView.
Set your ViewPay to leading and trailing edges of container view, and for top and bottom add some padding to show shadow.
Also set container view clipsToBounds equals to true.
I hope to help with the solution of your question. In case you wanted something simple to understand, and also following the tips. You create a large container and add the required views. A vertical view of the purple color, another horizontal that would be gray color and in the middle put an image, as I did in the code:
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//Big container
let container = UIView(frame: CGRect(x: self.view.bounds.width * 0.25, y: self.view.bounds.height * 0.5, width: 250, height: 290))
container.backgroundColor = .clear
self.view.addSubview(container)
//Purple view
let viewContainer = UIView(frame: CGRect(x: container.bounds.midX , y: 0, width: container.bounds.width * 0.89, height: container.bounds.height))
viewContainer.layer.anchorPoint.x = 1.0
viewContainer.backgroundColor = UIColor(displayP3Red: 158/255, green: 131/255, blue: 178/255, alpha: 1.0)
viewContainer.layer.cornerRadius = 8
viewContainer.clipsToBounds = true
container.addSubview(viewContainer)
//Gray view
let viewContainer2 = UIView(frame: CGRect(x: container.bounds.midX , y: container.bounds.midY, width: container.bounds.width * 0.93, height: container.bounds.height * 0.86))
viewContainer2.layer.anchorPoint.y = 1.0
viewContainer2.layer.anchorPoint.x = 1.0
viewContainer2.backgroundColor = UIColor(white: 0.5, alpha: 0.3)
viewContainer2.layer.cornerRadius = 5
viewContainer2.clipsToBounds = true
container.addSubview(viewContainer2)
//image
let imageView = UIImageView(frame: CGRect(x: container.bounds.midX, y: container.bounds.midY, width: container.bounds.width * 0.90, height: container.bounds.height * 0.90))
imageView.contentMode = .scaleToFill
imageView.layer.anchorPoint = CGPoint(x: 1.0, y: 1.0)
imageView.layer.cornerRadius = 10
imageView.clipsToBounds = true
imageView.image = UIImage(named: "image name")
container.addSubview(imageView)
}
}
I set "borderwidth = 3" to the view. After I scaling, the border either became thicker or thinner.
before scaling (yellow border on the left photo)
after scaling( yellow border on the right photo)
enter image description here
How can I keep the width of the border fixed after I scale it?
I user this source on the GitHub
https://github.com/yokurin/DragRotateScaleView
And just add v.layer.borderWidth = 5
lazy var rect1: DragRotateScaleView = {
let v = DragRotateScaleView(frame: CGRect(x: 20, y: 100, width: 200, height: 200))
v.delegate = self
v.backgroundColor = UIColor.cyan
v.layer.borderColor = UIColor(red: 22/255, green: 22/255, blue: 22/255, alpha: 1).cgColor
v.layer.borderWidth = 5
return v
}()
Thank You!!
Just divide the border width by the scale and set that value to the borderWidth again.
Try this in a playground:
import UIKit
import PlaygroundSupport
// Save this values, you will use them.
let border: CGFloat = 3
let scale: CGFloat = 5
// Example views.
let view = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 500))
view.backgroundColor = .red
let secondView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
secondView.layer.borderColor = UIColor.yellow.cgColor
secondView.layer.borderWidth = border
view.addSubview(secondView)
// View scale transformation.
secondView.transform = CGAffineTransform(scaleX: scale, y: scale)
// IMPORTANT: Change the width of the border after the transformation.
secondView.layer.borderWidth = border / scale
// This is only for the playground.
PlaygroundPage.current.liveView = view
I've created a rounded UIView, which should also have a shadow. So far, everything works, but on the corners, the shadow isn't rounded properly.
How to round the shadow corner?
Here's the code and a screenshot:
popupView.layer.cornerRadius = 15
popupView.layer.shadowColor = UIColor.black.cgColor
popupView.layer.shadowOffset = CGSize(width: 0, height: 0)
popupView.layer.shadowOpacity = 0.3
popupView.layer.shadowRadius = 3.0
popupView.layer.shadowPath = UIBezierPath(rect: popupView.bounds).cgPath
popupView.layer.shouldRasterize = false
So, I basically threw your code into Playground and played around with a bit, what I found was, I could basically remove view.layer.shadowPath and it would work...
import UIKit
let view = UIView(frame: CGRect(x: 100, y: 100, width: 500, height: 500))
view.backgroundColor = UIColor.white
view.layer.cornerRadius = 15
view.layer.shadowColor = UIColor.black.cgColor
view.layer.shadowOffset = CGSize(width: 0, height: 0)
view.layer.shadowOpacity = 1.0
view.layer.shadowRadius = 6.0
//view.layer.shadowPath = UIBezierPath(rect: view.bounds).cgPath
view.layer.shouldRasterize = false
let outter = UIView(frame: CGRect(x: 0, y: 0, width: 700, height: 700))
outter.backgroundColor = UIColor.red
outter.addSubview(view)
outter
What I also found was:
view.layer.masksToBounds = true did not achieve the desired result
view.layer.shadowPath = UIBezierPath(roundedRect: view.bounds, cornerRadius: 15).cgPath also works, but adds in an additional point of failure, as you need to remember to set the cornerRadius property if you change it on the view, or add a variable to seed both, but since if you didn't set the shadowPath, it would generate the same result, it makes me wonder why you'd both using it.
Use
popupView.layer.shadowPath = UIBezierPath(roundedRect: popupView.bounds, cornerRadius: 15).cgPath
instead of
popupView.layer.shadowPath = UIBezierPath(rect: popupView.bounds).cgPath
and add a little bit of shadowOpacity like a 1.3 to see better the shadow.
You need to set the views layers masksToBounds value to true
popupView.layer.masksToBounds = true
This question already has answers here:
Swift - Cut hole in shadow layer
(3 answers)
Closed 3 months ago.
I have a cell with a translucent fill. Since the fill is translucent, I can see the shadow behind the fill. How can I hide the shadow under the cell's fill?
self.layer.cornerRadius = 6
self.layer.masksToBounds = false
self.layer.shadowOpacity = 0.8
self.layer.shadowColor = UIColor.black.withAlphaComponent(0.6).cgColor
self.layer.shadowRadius = 2
self.layer.shadowOffset = CGSize(width: 5, height: 5)
This is what I have:
Desired result with transparent View:
As per my Understanding you need this kind of View:
You can try this:
let viewShadow = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
viewShadow.center = self.view.center
viewShadow.layer.cornerRadius = 10.0
viewShadow.layer.borderColor = UIColor.black.cgColor
viewShadow.layer.borderWidth = 0.5
viewShadow.backgroundColor = UIColor.white.withAlphaComponent(0.4)
viewShadow.layer.shadowColor = UIColor.lightGray.cgColor
viewShadow.layer.shadowOpacity = 1
viewShadow.layer.shadowOffset = CGSize(width: 20.0, height: 20.0)
viewShadow.layer.shadowRadius = 5
self.view.addSubview(viewShadow)
Output
Hope this helps.
This might help. All we need to do is alter the shadow path.
cell.layer.cornerRadius = 6
cell.layer.masksToBounds = false
cell.layer.shadowOpacity = 0.8
cell.layer.shadowColor = UIColor.black.withAlphaComponent(0.6).cgColor
cell.layer.shadowRadius = 2
cell.layer.shadowOffset = CGSize(width: 5, height: 5)
let rect = CGRect(x: cell.frame.origin.x, y: cell.frame.origin.y + cell.frame.size.height, width: cell.frame.size.width, height: 3)
cell.layer.shadowPath = CGPath(roundedRect: rect, cornerWidth: 1, cornerHeight: 1, transform: nil)
I have an UIView on the top of my screen and I want to add a right border of 1 pixel to it.
Here is the code that I have by the moment:
var border = CALayer()
border.backgroundColor = UIColor(red: 241, green: 10, blue: 9, alpha: 1).cgColor
border.frame = CGRect(x: topView.frame.width + 1, y: 0, width: 1, height: topView.frame.height)
topView.layer.addSublayer(border)
but I am not able to get it work.
What can I do to add a right border to my UIView?
Thanks in advance!
This code works for me, You are setting the position of the frame outside of the bounds of the view, change it to - 1 (instead of width + 1) and then it should display as expected. (I changed the colours to make it easier to see in playground)
let view = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
view.backgroundColor = UIColor.white
let borderLayer = CALayer()
borderLayer.backgroundColor = UIColor.red.cgColor
borderLayer.frame = CGRect(x: view.frame.width - 1, y: 0, width: 1, height: view.frame.height)
view.layer.addSublayer(borderLayer)
Cliptobounds = false on topview or keep the line within the frame