How to add shadow only to top and bottom to UIVIEW in swift - ios

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)
}
}

Related

How to make the width of the border the same after scaling?

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

How do I add blurry colour to CALayer() as this?

I am trying to achieve something as this:
However I am getting this:
Code I am using:
let border = CALayer()
border.backgroundColor = UIColor.viewShadowGray().cgColor
border.frame = CGRect(x: 0, y: 0, width: bottomView.frame.size.width, height: 2)
bottomView.layer.addSublayer(border)
class func viewShadowGray() -> UIColor
{
return UIColor(red: 177.0/255.0, green: 177.0/255.0, blue: 179.0/255.0, alpha: 0.7)
}
Create a shadow with UIBezierPath something like as below.
You may need to vary opacity (layer?.shadowOpacity = 0.80) and shadow radius (layer?.shadowRadius = 3.0) to match your requirement .
func addShadow(to view: UIView?) {
//Adds a shadow to view
let layer: CALayer? = view?.layer
layer?.shadowOffset = CGSize(width: 0, height: 3)
layer?.shadowColor = UIColor.black.cgColor
layer?.shadowRadius = 3.0
layer?.shadowOpacity = 0.80
layer?.shadowPath = (UIBezierPath(rect: CGRect(x: layer?.bounds.origin.x ?? 0.0, y: layer?.bounds.origin.y ?? 0.0, width: layer?.bounds.size.width ?? 0.0, height: (layer?.bounds.size.height ?? 0.0) + 1))).cgPath
}

Swift make border rof uiimageview outside

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)

Make a UIView stick to bottom of the ViewController frame in Swift

I have created a UIView (it's just a blue rectangle) and I want it to stick to the bottom of the frame/view of the screen.
var nextBar = UIView()
nextBar.backgroundColor = UIColor(red: 7/255, green: 152/255, blue: 253/255, alpha: 0.5)
nextBar.frame = CGRect(x: 0, y: 600, width: self.view.frame.width, height: 50)
self.view.addSubview(nextBar)
I'm assuming i need to add something in after the 'y:' part in the CGRect, but i can't seem to make it work or find anywhere that shows me this in swift.
Thanks in advance
hmmm try this...
override func viewDidLoad() {
super.viewDidLoad()
let theHeight = view.frame.size.height //grabs the height of your view
var nextBar = UIView()
nextBar.backgroundColor = UIColor(red: 7/255, green: 152/255, blue: 253/255, alpha: 0.5)
nextBar.frame = CGRect(x: 0, y: theHeight - 50 , width: self.view.frame.width, height: 50)
self.view.addSubview(nextBar)
}
for the 'y:' in CRect, you're taking the size, in height, of the screen size and you're subtracting how many ever pixels you want. It will appear the same for what ever screen size.
You can do it programmatically using constraints
fileprivate func setupName(){
let height = CGFloat(50)
lblName.text = "Hello world"
lblName.backgroundColor = .lightGray
//Step 1
lblName.translatesAutoresizingMaskIntoConstraints = false
//Step 2
self.view.addSubview(lblName)
//Step 3
NSLayoutConstraint.activate([
lblName.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor),
lblName.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor),
lblName.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor,constant: -height),
lblName.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor),
])
}
Please refer link for more details
Like this:
view.addConstraintsWithFormat(format: "V:[v0(50)]|", views: nextBar)

How to add custom footer (with gradient) in ios 8 to UIView

I'm able to add a custom status bar (with gradient) to the UIView like this:
override func viewDidLoad() {
super.viewDidLoad()
var statusBar : UIView = UIView(frame: CGRect(x: 0, y: 0, width: 375, height: 20))
let statusBarGradient : CAGradientLayer = CAGradientLayer()
statusBarGradient.frame = statusBar.bounds
let cor1 = UIColor(red: 0.416, green: 0.604, blue: 0.796, alpha: 1.0)
let cor2 = UIColor.whiteColor()
let arrayColors = [cor1.CGColor, cor2.CGColor]
statusBarGradient.colors = arrayColors
view.layer.insertSublayer(statusBarGradient, atIndex:0)
}
I would also like to add the same gradient to the footer but I'm not having much luck.
Your code works if you add the statusBar as a subview of the view, but I would make it dynamically size the width to fit the width of the superview, so just do the same thing for the footer, but dynamically set the height to be whatever the height of your view is minus the desired height of your footer bar.
let statusBar = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 20))
let footer = UIView(frame: CGRect(x: 0, y: view.frame.height - 20.0, width: view.frame.width, height: 20))
let statusBarGradient = CAGradientLayer()
let footerGradient = CAGradientLayer()
statusBarGradient.frame = statusBar.bounds
let cor1 = UIColor(red: 0.416, green: 0.604, blue: 0.796, alpha: 1.0)
let cor2 = UIColor.blackColor()
let arrayColors = [cor1.CGColor, cor2.CGColor]
footerGradient.frame = footer.bounds
let arrayColorsFooter = [cor2.CGColor, cor1.CGColor]
statusBarGradient.colors = arrayColors
footerGradient.colors = arrayColorsFooter
statusBar.layer.insertSublayer(statusBarGradient, atIndex:0)
footer.layer.insertSublayer(footerGradient, atIndex:0)
view.addSubview(statusBar)
view.addSubview(footer)

Resources