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
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 have a horizontally scrollable collectionView and the thing I want to do is to draw a simple top border.I tried to do it like so but with no success and cant figure out why it doesn't work
var hourlyCollection: UICollectionView!
let border = CALayer()
border.backgroundColor = UIColor.lightGray.cgColor
border.frame = CGRect(x: 0, y: 0, width: hourlyCollection.contentSize.width, height: 1)
hourlyCollection.layer.addSublayer(border)
override func viewDidLoad() {
super.viewDidLoad()
//TOP BORDER ON COLLECTION VIEW
let border = CALayer()
border.frame = CGRect(x: 0, y: 0, width: self.collectionVIEW.frame.width,
height: 1)
border.backgroundColor = UIColor.black.cgColor
collectionVIEW.layer.addSublayer(border)
}
I am currently working on a project in iOS (using XCode and Swift). I am trying to implement the following UITextFields for the login view:
I was thinking of different ways to go about doing this and they all seem complicated. It would be amazing if someone knows of a super easy way to do this or if there is already a cocoapod that can be used to create this TextView.
Here are a few ways I was thinking of doing it:
Just make a UITextField with a border and put a UILabel with a background matching the parent view's background, blocking out the part where "Login" and "Password" would show up. This would hide the border at these parts and would solve the issue. The problem with this approach is if the background is a gradient, pattern, or image. This can be seen in the following images:
If the user looks closely at the "EMAIL" and "PASSWORD" UILabels here it can be seen that it does not have a transparent background and that it has an set background color in order to block out the border of the UITextField.
Instead of doing this, I would like to actually stop the drawing of the border which brings me to a second possible method of implementation.
Using core graphics to manually draw the border of the UITextField, this would have to be dynamic since there can be different length strings ("Login) is 5 characters, "Password" is 8). This approach seems complicated because dealing with CoreGraphics can be annoying.
I wasn't able to come up with any other ways of implementing this but I'd appreciate it if there was a less cumbersome solution.
Try this extension. I have tried this and is working good.
extension UITextField {
func leftBorder() {
let leftBorder = CALayer()
leftBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(0.0), width: CGFloat(1.0), height: CGFloat(self.frame.size.height))
leftBorder.backgroundColor = UIColor.black.cgColor
self.layer.addSublayer(leftBorder)
}
func rightBorder() {
let rightBorder = CALayer()
rightBorder.frame = CGRect(x: CGFloat(self.frame.size.width - 1), y: CGFloat(0.0), width: CGFloat(1.0), height: CGFloat(self.frame.size.height))
rightBorder.backgroundColor = UIColor.black.cgColor
self.layer.addSublayer(rightBorder)
}
func bottomBorder() {
let bottomBorder = CALayer()
bottomBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(self.frame.size.height - 1), width: CGFloat(self.frame.size.width), height: CGFloat(1.0))
bottomBorder.backgroundColor = UIColor.black.cgColor
self.layer.addSublayer(bottomBorder)
}
func topBorder1() {
let topBorder = CALayer()
topBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(0.0), width: CGFloat(25.0), height: CGFloat(1.0))
topBorder.backgroundColor = UIColor.black.cgColor
self.layer.addSublayer(topBorder)
}
func topBorder2(position: CGFloat) {
let width = CGFloat(self.frame.size.width - position)
let topBorder2 = CALayer()
topBorder2.frame = CGRect(x: position, y: CGFloat(0), width: width, height: CGFloat(1.0))
topBorder2.backgroundColor = UIColor.black.cgColor
self.layer.addSublayer(topBorder2)
}
}
Call those extension methods in viewDidLayoutSubviews method like this..
override func viewDidLayoutSubviews() {
loginTextField.leftBorder()
loginTextField.rightBorder()
loginTextField.bottomBorder()
loginTextField.topBorder1()
let position = CGFloat(25 + loginLabel.frame.size.width + 10)
loginTextField.topBorder2(position: position)
}
This is how the initial story board looks like. I used a textfield and then placed a label above that textfield.
Note: I have used the label's width for some calculation.
And the result in the simulator is
I believe one method of doing this is by drawing the individual borders:
extension UITextField {
func border(position: CGFloat) {
let leftBorder = CALayer()
leftBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(0.0), width: CGFloat(1.0), height: CGFloat(self.frame.size.height))
leftBorder.backgroundColor = UIColor.black.cgColor
self.layer.addSublayer(leftBorder)
let rightBorder = CALayer()
rightBorder.frame = CGRect(x: CGFloat(self.frame.size.width - 1), y: CGFloat(0.0), width: CGFloat(1.0), height: CGFloat(self.frame.size.height))
rightBorder.backgroundColor = UIColor.black.cgColor
self.layer.addSublayer(rightBorder)
let bottomBorder = CALayer()
bottomBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(self.frame.size.height - 1), width: CGFloat(self.frame.size.width), height: CGFloat(1.0))
bottomBorder.backgroundColor = UIColor.black.cgColor
self.layer.addSublayer(bottomBorder)
let topBorder = CALayer()
topBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(0.0), width: CGFloat(25.0), height: CGFloat(1.0))
topBorder.backgroundColor = UIColor.black.cgColor
self.layer.addSublayer(topBorder)
let width = CGFloat(self.frame.size.width - position)
let topBorder2 = CALayer()
topBorder2.frame = CGRect(x: position, y: CGFloat(0), width: width, height: CGFloat(1.0))
topBorder2.backgroundColor = UIColor.black.cgColor
self.layer.addSublayer(topBorder2)
}
I do not think it is possible to do this with a corner radius. The only way that I can imagine doing this is by going into CoreGraphics, which is usually more work than it is worth. Take a look here
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)