I am creating a Swift Playground and would like to center a label. However, when I do label.center = view.center the text will go off to a weird place, as shown in this screenshot . (It is the one on the far right; the others are centered with CGPoints.) Here is the viewDidLoad regarding my view and label:
override func viewDidLoad() {
view.backgroundColor = UIColor(red: 186/255.0, green: 198/255.0, blue: 196/255.0, alpha: 1.0)
view.layer.borderWidth = 1
view.layer.borderColor = UIColor(red:222/255, green:225/255, blue:227/255, alpha: 1).cgColor
label = UILabel(frame: .init(x: 0, y: 0, width: 200, height: 200))
label.textAlignment = .center
label.text = "To play, make the gestures that the app speaks and then press the green check when you are done."
label.numberOfLines = 0
label.font = font
label.center = view.center
label.textColor = UIColor(red:102/255, green: 121/255, blue: 118/255, alpha: 1.0)
view.addSubview(self.label)
Other people have said it worked on their computers but I have tried on 2 different Macs and it didn't work. Since I'm working with Playgrounds, I cannot use the storyboard. Any help would be greatly appreciated.
Since in time that viewDidLoad is called views aren't resized correctly, you need to center your label when they are. For example in viewDidLayoutSubviews
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
label.center = view.center
}
Related
Here is what I am trying to do:
The screenshot is taken from iPhone:
Code Below:
//Show HighLightView
let highLightView = UIView(frame: CGRect(x: self.minXHighLightView!, y: 0, width: self.maxXHighLightView!-self.minXHighLightView!, height: self.soundWaveView.frame.height))
highLightView.backgroundColor = UIColor(displayP3Red: 89/256, green: 206/256, blue: 249/256, alpha: 0.4)
self.soundWaveView.addSubview(highLightView)
//Show HighLight Lable
let highLightLabelCount = UILabel(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
highLightLabelCount.textColor = .black
highLightLabelCount.font = UIFont(name: "Lato-Bold", size: 20)
highLightView.addSubview(highLightLabelCount)
Question: How to set Frame or constraints label setup at top Left Corner?
Any help would be greatly appreciated.
Thanks in advance.
Your constraint should be centered x,y not top left with
//Show HighLightView
let highLightView = UIView(frame: CGRect(x: self.minXHighLightView!, y: 0, width: self.maxXHighLightView!-self.minXHighLightView!, height: self.soundWaveView.frame.height))
highLightView.backgroundColor = UIColor(displayP3Red: 89/256, green: 206/256, blue: 249/256, alpha: 0.4)
self.soundWaveView.addSubview(highLightView)
//Show HighLight Lable
let highLightLabelCount = UILabel()
highLightLabelCount.textColor = .black
highLightLabelCount.font = UIFont(name: "Lato-Bold", size: 20)
highLightView.addSubview(highLightLabelCount)
highLightLabelCount.translatesAutoresizingMaskIntoConstraints = false
self.highLightView.textAlignment = .center
NSLayoutConstraint.activate([
self.highLightLabelCount.centerXAnchor.constraint(equalTo: self.highLightView.centerXAnchor),
self.highLightLabelCount.centerYAnchor.constraint(equalTo: self.highLightView.centerYAnchor)
])
I think this will be useful if you would like to pin label to top left corner of your highlight view.
NSLayoutConstraint.activate([
highLightView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
highLightView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
highLightLabelCount.leadingAnchor.constraint(equalTo: view.leadingAnchor),
highLightLabelCount.bottomAnchor.constraint(equalTo: highLightView.topAnchor))
])
I am beginner in Swift/Xcode. I made a custom class in my Xcode project to handle buttons appearance (color, shape etc) that works find.
However, I can't succeed to add gradients to these buttons.
I tried the below code, but it adds a new squared gradient onto my rounded buttons instead of applying the intended gradients to those buttons. Here is what I already gave many tries:
- add this code to my custom button class (inheriting from UIButton)
- add this code to my custom button class (inheriting from UIView)
- above 2 approaches and removing the backgroungColor settings
- Using a separate function called from viewController
func ConfigMenuButtons() {
// Set button shape color
layer.cornerRadius = 37
// Set button size
translatesAutoresizingMaskIntoConstraints = false
widthAnchor.constraint(equalToConstant: 74).isActive = true
heightAnchor.constraint(equalToConstant: 74).isActive = true
// Set button text
setTitleColor(.white, for: .normal)
titleLabel?.font = UIFont.boldSystemFont(ofSize: 15)
// Set button shadow
layer.shadowRadius = 2
layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: 0, height: 2)
layer.shadowOpacity = 0.8
// Set button gradient colors
let lightBlue = UIColor(red: 122/255, green: 127/255, blue: 249/255, alpha: 1)
let darkBlue = UIColor(red: 74/255, green: 88/255, blue: 205/255, alpha: 1)
// Set gradients
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [lightBlue.cgColor, darkBlue.cgColor]
gradientLayer.locations = [0.0,1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
clipsToBounds = true
// insert gradients to button
layer.insertSublayer(gradientLayer, at: 0)
}
But I always end up with this "square shaped gradient layer" appearing onto the targeted buttons, instead of having these gradients applied directly to these buttons.
If someone had any piece of advice, it would be fantastic.
Thank you!
Here is the screen shot of the button with its partial expected effect
Here is a screenshot of fixed issue
I finally fixed the issue as below adding a CGRect size.
func ConfigMenuButtons() {
// Set button shape
layer.cornerRadius = 37
// Set button size
translatesAutoresizingMaskIntoConstraints = false
widthAnchor.constraint(equalToConstant: 74).isActive = true
heightAnchor.constraint(equalToConstant: 74).isActive = true
// Set button text
setTitleColor(.white, for: .normal)
titleLabel?.font = UIFont.boldSystemFont(ofSize: 15)
// Set button shadow
layer.shadowRadius = 2
layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: 0, height: 2)
layer.shadowOpacity = 0.8
// Set button gradient colors
let lightBlue = UIColor(red: 112/255, green: 117/255, blue: 239/255, alpha: 1)
let darkBlue = UIColor(red: 70/255, green: 84/255, blue: 201/255, alpha: 1)
// Set gradients
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [lightBlue.cgColor, darkBlue.cgColor]
gradientLayer.locations = [0.0,1.0]
gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
// THAT IS THE LINE THAT COULD FIX THE ISSUE
gradientLayer.frame = CGRect(x: 0, y: 0, width: 74, height: 74)
// Set rounded shape
gradientLayer.cornerRadius = 37
// insert gradients to button
layer.insertSublayer(gradientLayer, at: 0)
}
The shadow is appearing on top of the navigation bar. Is there anyway to move the shadow underneath the bar or add some code so it doesn't discolor the bar?
This is the code I use in my navigation controller:
import UIKit
class navigationController:UINavigationController, UIViewControllerTransitioningDelegate{
override func viewDidLoad()
{
var appblue = UIColor(red: 109/255, green: 208/255, blue:247/255, alpha: 1.0)
self.navigationBar.barTintColor = appblue
self.navigationBar.layer.masksToBounds = false
self.navigationBar.layer.shadowColor = UIColor.black.cgColor
self.navigationBar.layer.shadowOpacity = 0.7
self.navigationBar.layer.shadowOffset = CGSize(width: 0, height: 2.0)
self.navigationBar.layer.shadowRadius = 4
}
}
and this is what it looks like:
When it should be this color:
Any suggestions?
This is what im trying to make it look like(photo shopped picture):
(the top bar bottom shadow while retaining the second bars color)
Added a image view with a gradient to the bottom of the bar to accomplish what I was going for, Thanks to #Anbu.Karthik for linking another question that I was able to adapt. This is my current code:
import UIKit
class navigationController:UINavigationController, UIViewControllerTransitioningDelegate{
override func viewDidLoad()
{
var appblue = UIColor(red: 109/255, green: 208/255, blue:247/255, alpha: 1.0)
self.navigationBar.barTintColor = appblue
self.navigationBar.layer.masksToBounds = false
var yPosition = self.navigationBar.layer.frame.height
var rectWidth = self.navigationBar.layer.frame.width
let gradient = CAGradientLayer()
let bottomShadow: UIImageView = UIImageView()
bottomShadow.frame = CGRect(x: 0, y: yPosition, width: rectWidth, height: 8)
gradient.frame = bottomShadow.bounds
gradient.colors = [UIColor.lightGray.cgColor, UIColor(white: 1, alpha: 0).cgColor]
navigationBar.addSubview(bottomShadow)
bottomShadow.layer.insertSublayer(gradient, at: 0)
}
}
I've been having trouble getting a border or shadow between three buttons to show some separation. I have tried getting a border or shadow on just the left and right side of the middle button but I could only get the shadow on one side. Any help is greatly appreciated.
What I have tried to user to get a shadow but only shows on right side:
middleButton.layer.backgroundColor = UIColor.whiteColor().CGColor
middleButton.layer.borderColor = UIColor(red: 208/255, green: 208/255, blue: 208/255, alpha: 1.0).CGColor
middleButton.layer.borderWidth = 0.0
middleButton.layer.masksToBounds = false
middleButton.layer.shadowColor = UIColor(red: 208/255, green: 208/255, blue: 208/255, alpha: 1.0).CGColor
middleButton.layer.shadowOffset = CGSizeMake(0.5, 1.0)
middleButton.layer.shadowOpacity = 1.0
middleButton.layer.shadowRadius = 1.0
Below is my current view with the three buttons that I am trying to add a separator between:
The hierarchy I have for it in a table cell:
Swift 3 Answer
You can make an extension for UIButton
extension UIButton {
func addRightBorder(borderColor: UIColor, borderWidth: CGFloat) {
let border = CALayer()
border.backgroundColor = borderColor.cgColor
border.frame = CGRect(x: self.frame.size.width - borderWidth,y: 0, width:borderWidth, height:self.frame.size.height)
self.layer.addSublayer(border)
}
func addLeftBorder(color: UIColor, width: CGFloat) {
let border = CALayer()
border.backgroundColor = color.cgColor
border.frame = CGRect(x:0, y:0, width:width, height:self.frame.size.height)
self.layer.addSublayer(border)
}
}
Then you can use this for any of your buttons.
middleButton.addRightBorder(borderColor: UIColor.white, borderWidth: 1.0)
middleButton.addLeftBorder(borderColor: UIColor.white, borderWidth: 1.0)
Should work fine. Happy Coding !
Where there are limits on the actual code possibilities, the solution lay with the graphic icons you have for 'Favourite', 'Share', Map'.
A separator border / line between the buttons can be done in the graphic icon creation for the buttons you have. Adobe illustrator or photoshop. I have recreated a sample in illustrator, brought it over to 'Assets.xcassets' as an image and added it as background image to the button.
Button e.g.
Snapshop of simulator as follows...
Another approach is to add your buttons to UIStackView. With it you can easily manage how you want the subviews to be arranged and distributed.
Add UIView's as separators with a width constraint of 1 point. After setting your constraints on the UIStackView, set distribution property to "Equal Spacing" and the views will align according to it.
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)