Hey guys I want to position my Button at the lower part of the Screen but I don't get the correct code. The button is too small, too big, at the right or left corner,... but It should be centred in the middle of the lower screen.
I tried it with these codes:
nextButton.translatesAutoresizingMaskIntoConstraints = false
nextButton.centerXAnchor.constraint(equalTo: view.centerXAnchor)
nextButton.centerYAnchor.constraint(equalTo: view.centerYAnchor)
nextButton.widthAnchor.constraint(equalTo: view.widthAnchor, constant: 97)
nextButton.heightAnchor.constraint(equalTo: view.heightAnchor, constant: 50)
or
backButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true
backButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true
backButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
backButton.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
Can someone tell me what to do to make it work? I thought with the topAnchor it would be really easy:(
This will position it in bottom center of screen
nextButton.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
nextButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
nextButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant:-20),
nextButton.widthAnchor.constraint(equalToConstant: 50),
nextButton.heightAnchor.constraint(equalToConstant: 50)
])
The problem is that you are using centerYAnchor instead of bottomAnchor
Replace
nextButton.centerYAnchor.constraint(equalTo: view.centerYAnchor)
with
let spacingConstant = 10.0
nextButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -spacingConstant)
Related
I am pretty new in Programming Swift so I am trying to achieve a scrollable task includes 20 labels inside. I made it with storyboard but programmatically I failed..
Thanks in advance, a green view background and 20 labels orange. Can anyone show me how ?
So i am not very fond of advertising, but raywenderlich has an awesome tutorial on how to do this. It is quite easy, but it comes down to a scrollable view and a tableview with navigation links.
https://www.raywenderlich.com/5662524-your-second-ios-and-swiftui-app
Again, i am not advertising, just sharing some videos that really helped me understand Swift!
And for answering your question:
Use
Scrollview { put here your to-do code
} end of body
There is your scrollable view with all the labels!
Below code will print your label 20 times with scrollview.
import UIKit
class ViewController: UIViewController {
let scrollView = UIScrollView()
var a = 0
var COnstant: CGFloat = 20
override func viewDidLoad() {
super.viewDidLoad()
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.backgroundColor = .green
self.view.addSubview(scrollView)
scrollView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 0).isActive = true
scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 0).isActive = true
scrollView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: 0).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0).isActive = true
while a<20 {
let label = UILabel()
label.backgroundColor = .orange
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = .black
label.text = "I'm label \(a)"
label.textAlignment = .center
scrollView.addSubview(label)
label.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 0).isActive = true
label.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 0).isActive = true
label.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: 0).isActive = true
label.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: COnstant).isActive = true
COnstant += 40
a = a+1
if a >= 20 { // if bottomanchor is not set then our scroll view doesnot work
label.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 0).isActive = true
}
}
}
}
How can I add bestChoiceImage in center of the distance under ratingLabel and rateButton?
Why, when I'm using print(anysubview.center.x) is it = 0.0, but in Simulator everything staying in its place?
/activate inside viewWillappear
let viewHeight = self.view.frame.height
let viewWidth = self.view.frame.width
NSLayoutConstraint.activate([
reebokClassic.topAnchor.constraint(equalTo: self.view.topAnchor, constant: viewHeight/12),
reebokClassic.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
modelName.topAnchor.constraint(equalTo: reebokClassic.bottomAnchor, constant: viewHeight/100),
modelName.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
sneakersImage.topAnchor.constraint(equalTo: modelName.bottomAnchor, constant: viewHeight/40),
sneakersImage.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
sneakersImage.widthAnchor.constraint(equalToConstant: viewWidth * 0.8),
sneakersImage.heightAnchor.constraint(equalToConstant: viewWidth * 0.8),
segmentedController.widthAnchor.constraint(equalToConstant: viewWidth),
segmentedController.topAnchor.constraint(equalTo: sneakersImage.bottomAnchor, constant: viewHeight/80),
segmentedController.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
segmentedController.heightAnchor.constraint(equalToConstant: viewHeight/23),
lastTimeWeared.topAnchor.constraint(equalTo: segmentedController.bottomAnchor, constant: viewHeight/40),
lastTimeWeared.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: viewHeight/100),
lastTimeWeared.widthAnchor.constraint(equalToConstant: viewWidth/3),
ratingLabel.topAnchor.constraint(equalTo: segmentedController.bottomAnchor, constant: viewHeight/40),
ratingLabel.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -viewHeight/50),
ratingLabel.widthAnchor.constraint(equalToConstant: viewWidth/3),
slipOnButton.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -viewHeight/20),
slipOnButton.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -viewWidth/20),
slipOnButton.widthAnchor.constraint(equalToConstant: viewWidth/5),
slipOnButton.heightAnchor.constraint(equalToConstant: viewHeight/20),
rateButton.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -viewHeight/20),
rateButton.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: viewWidth/20),
rateButton.widthAnchor.constraint(equalToConstant: viewWidth/5),
rateButton.heightAnchor.constraint(equalToConstant: viewHeight/20),
bestChoiceImage.widthAnchor.constraint(equalToConstant: viewWidth/3),
bestChoiceImage.heightAnchor.constraint(equalToConstant: viewWidth/3),
bestChoiceImage.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
bestChoiceImage.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant:
-(**rateButton.center.y - ratingLabel.center.y - bestChoiceImage.frame.height/2**))
])
Put ratingLabel and rateButton in a container view (e.g. a stack view) and constraints between bestChoiceImage and that container view.
You probably print it before the autolayout engine actually did its work. Try printing it in viewDidAppear for example.
I have 2 views inside a vertical stackview(bothalf and tophalf). Their constraints dependent on that stackview.I have a horizontal stackview(containerStackView3) inside the botHalfView. Its constraints leading,trailing and height dependent on botHalfView. In debugging window i can see also on console, height of the bothalfview.frame.height=0 which i added as a constraint for horizontalstackview. Therefore horizontalstackview inside the bothalfview not showing any dimension. To which constraint i should assign the horizontalstackview's height? Or any other solution to this?
let containerStackView3 = UIStackView()
containerStackView3.translatesAutoresizingMaskIntoConstraints = false
containerStackView3.axis = .vertical
containerStackView3.distribution = .fillEqually
containerStackView3.spacing = 1
//adding views
containerStackView1.addArrangedSubview(botHalfView2)
botHalfView2.addSubview(containerStackView3)
//constraints bothalfview
botHalfView2.bottomAnchor.constraint(equalTo:
containerStackView1.bottomAnchor, constant: 0).isActive = true
botHalfView2.leadingAnchor.constraint(equalTo:
containerStackView1.leadingAnchor, constant: 0).isActive = true
botHalfView2.trailingAnchor.constraint(equalTo:
containerStackView1.trailingAnchor, constant: 0).isActive = true
// Constraints of the stack view inside the bothalfview
containerStackView3.leadingAnchor.constraint(equalTo:
botHalfView2.leadingAnchor, constant: 0).isActive = true
containerStackView3.trailingAnchor.constraint(equalTo:
botHalfView2.trailingAnchor, constant: 0).isActive = true
containerStackView3.bottomAnchor.constraint(equalTo:
botHalfView2.bottomAnchor, constant: 0).isActive = true
containerStackView3.heightAnchor.constraint(equalToConstant:botHalfView2.frame.height).isActive = true
If you need container heigh same as bot half then do this
// Constraints of the stack view inside the bothalfview
containerStackView3.leadingAnchor.constraint(equalTo:
botHalfView2.leadingAnchor, constant: 0).isActive = true
containerStackView3.trailingAnchor.constraint(equalTo:
botHalfView2.trailingAnchor, constant: 0).isActive = true
containerStackView3.bottomAnchor.constraint(equalTo:
botHalfView2.bottomAnchor, constant: 0).isActive = true
containerStackView3.topAnchor(equalTo:
botHalfView2.topAnchor, constant: 0).isActive = true
I want to know how to code an imageview to the full screen programmatically. Right now I know how to code an object to a specific size and position programmatically but I want to know how to get this object in the full screen no matter what device is being used.
FIRE.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
FIRE.topAnchor.constraint(equalTo: view.topAnchor, constant: 0).isActive = true
FIRE.widthAnchor.constraint(equalToConstant: 400).isActive = true
FIRE.heightAnchor.constraint(equalToConstant: 700).isActive = true
FIRE.translatesAutoresizingMaskIntoConstraints = false
I'm assuming your object is FIRE and the parent view is view. You can do it with constraints as follows.
FIRE.topAnchor.constraint(equalTo: view.topAnchor, constant: 0).isActive = true
FIRE.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0).isActive = true
FIRE.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0).isActive = true
FIRE.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0).isActive = true
FIRE.translatesAutoresizingMaskIntoConstraints = false
Or you could do it using the auto-resizing mask
FIRE.frame = view.bounds
FIRE.autoresizingMask = [.flexibleWidth, .flexibleHeight]
Goal is to set leading, trailing, top and bottom constraints of your UIView equal to leading, trailing, top and bottom constraints of its superview
FIRE.translatesAutoresizingMaskIntoConstraints = false
FIRE.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0).isActive = true
FIRE.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0).isActive = true
FIRE.topAnchor.constraint(equalTo: view.topAnchor, constant: 0).isActive = true
FIRE.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0).isActive = true
I cannot seem to figure out why there constraint anchors are not working
inputsContainerView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
inputsContainerView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
inputsContainerView.widthAnchor.constraint(equalTo: view.widthAnchor, constant: -24).isActive = true
inputsContainerView.heightAnchor.constraint(equalTo: view.heightAnchor, constant: 150).isActive = true
I have tried looking everywhere but cannot seem to find the issue.
I do not see any conflicting constraints or warnings, basically I need the container to look like a white rectangle that sits in the center of the screen.
let inputsContainerView = UIView()
inputsContainerView.backgroundColor = UIColor.white
inputsContainerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(inputsContainerView )
This is what it looks like:
This is what it should look like:
You want your inputsContainerView to have a height of 150. Right now you are setting it equal to view.height + 150.
You need to set your heightAnchor equal to a constant:
Change this constraint:
inputsContainerView.heightAnchor.constraint(equalTo: view.heightAnchor, constant: 150).isActive = true
to this:
inputsContainerView.heightAnchor.constraint(equalToConstant: 150).isActive = true