I have UIScrollView which has a UIView (basically a content view) in it. In contentView, I have UITextFields and a UIButton. At first, elements are inside UIScrollView directly. When keyboard opens, If UITextField is below keyboard, scrollview scrolls to show the content. After, I put them inside a ContentView, It started nothing to work. What am I doing wrong?
I searched below posts but not sure why my code isn't working.
How do I scroll the UIScrollView when the keyboard appears?
P.S: I know there are lots of examples in the community but I'm not sure which will be best approach. When this one was working, It was a simple and light answer but not sure why not It isn't working.
#objc override func keyboardWillShow(notification: NSNotification){
//Need to calculate keyboard exact size due to Apple suggestions
if let frameValue = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue {
keyboardHeight = frameValue.cgRectValue.size.height
let contentInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: keyboardHeight, right: 0.0)
self.scrollView.contentInset = contentInsets
self.scrollView.scrollIndicatorInsets = contentInsets
}
}
How I Give Constraints:
contentView.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(contentView)
contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
contentView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
scrollView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(scrollView)
contentView.addSubview(TextField1)
contentView.addSubview(TextField2)
contentView.addSubview(button)
scrollView.anchor(header.bottomAnchor, left: self.view.leftAnchor, bottom: self.view.bottomAnchor, right: self.view.rightAnchor, topConstant: 20, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)
TextField1.anchor(contentView.topAnchor, left: self.contentView.leftAnchor, bottom: nil, right: self.contentView.rightAnchor, topConstant: 5, leftConstant: 25, bottomConstant: 0, rightConstant: 25, widthConstant: 0, heightConstant: 70)
TextField1.widthAnchor.constraint(equalTo: self.view.widthAnchor, constant: -50).isActive = true
TextField2.anchor(TextField1.bottomAnchor, left: self.contentView.leftAnchor, bottom: nil, right: self.contentView.rightAnchor, topConstant: 5, leftConstant: 25, bottomConstant: 0, rightConstant: 25, widthConstant: 0, heightConstant: 70)
Button.anchor(TextField2.bottomAnchor, left: self.contentView.leftAnchor, bottom: self.contentView.bottomAnchor, right: self.contentView.rightAnchor, topConstant: 30, leftConstant: 25, bottomConstant: 20, rightConstant: 25, widthConstant: 0, heightConstant: 40)
EDIT: Another approach I tried (which Apple recommended). This aRect.Contains always returns true.
if let frameValue = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue {
keyboardHeight = frameValue.cgRectValue.size.height
var contentInsets: UIEdgeInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: keyboardHeight, right: 0.0)
scrollView.contentInset = contentInsets
scrollView.scrollIndicatorInsets = contentInsets
// If active text field is hidden by keyboard, scroll it so it's visible
// Your application might not need or want this behavior.
//CGRect(x: 0, y: self.header.frame.maxY, width: self.view.frame.width, height: self.view.frame.height - self.header.frame.maxY)
var aRect: CGRect = self.view.frame
aRect.size.height -= keyboardHeight
aRect.size.height -= header.frame.maxY
if !aRect.contains(activeTextField.frame.origin) {
var scrollPoint = CGPoint(x: 0.0, y: activeTextField.frame.origin.y - (keyboardHeight))
scrollView.setContentOffset(scrollPoint, animated: true)
}
}
The simple way to achieve this is by using IQKeyboardManager library.
Checkout the link: https://github.com/hackiftekhar/IQKeyboardManager
After an hour work, I find the solution. I'm sharing the answer instead of deleting the post cuz my problem was because UIScrollView doesn't content whole screen. There is an header and a label above UIScrollView . All of the answers in the community, target If UIScroll content whole screen.
#objc override func keyboardWillShow(notification: NSNotification){
//Need to calculate keyboard exact size due to Apple suggestions
if let frameValue = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue {
keyboardHeight = frameValue.cgRectValue.size.height
let scrollViewRect: CGRect = view.convert(scrollView.frame, from: scrollView.superview)
let hiddenScrollViewRect: CGRect = scrollViewRect.intersection(frameValue.cgRectValue)
// Figure out where the two frames overlap, and set the content offset of the scrollview appropriately
let contentInsets: UIEdgeInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: hiddenScrollViewRect.size.height, right: 0.0)
scrollView.contentInset = contentInsets
scrollView.scrollIndicatorInsets = contentInsets
var visibleRect: CGRect = activeTextField.frame
visibleRect = scrollView.convert(visibleRect, from: activeTextField.superview)
visibleRect = visibleRect.insetBy(dx: 0.0, dy: -5.0)
scrollView.scrollRectToVisible(visibleRect, animated: true)
}
Related
Here are some code that i am doing to achieve that view
let height = view.bounds.size.height * 2
scrollView = UIScrollView(frame: view.frame)
scrollView.backgroundColor = .red
scrollView.contentSize = CGSize(width: view.frame.width, height: height)
scrollView.contentOffset = CGPoint(x: 0, y: 0)
scrollView.isScrollEnabled = true
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(topView)
scrollView.bringSubviewToFront(topView)
topView.anchor(top: scrollView.topAnchor, leading: scrollView.leadingAnchor, bottom: nil, trailing: scrollView.trailingAnchor, padding: .init(top: 0, left: 0, bottom: 0, right: 0), size: CGSize(width: 0, height: 500))
view.addSubview(scrollView)
scrollView.anchor(top: view.topAnchor, leading: view.leadingAnchor, bottom: view.bottomAnchor, trailing: view.trailingAnchor)
top view is UIView anchor() method is the custom method that use NSConstraints to anchor objects
first thing is UIscrollview is also like a UIview which scrolls.so you can have most the properties accessible.
I am trying to create a Scroll View. The view itself is correctly
displayed but it does not scroll, even though I added a view to it and
set the content size.
NOTE: I am not using storyboards but Constraints (AutoLayout) only.
Code:
let scrollView: UIScrollView = {
let sv = UIScrollView()
sv.isScrollEnabled = true
sv.backgroundColor = .brown
return sv
}()
override func viewDidLoad() {
super.viewDidLoad()
setupViews()
}
func setupViews() {
self.view.addSubview(scrollView)
scrollView.anchor(top: self.view.topAnchor, left: self.view.leftAnchor, bottom: self.view.bottomAnchor, right: self.view.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
scrollView.contentSize = CGSize(width: self.view.frame.width, height: 2000)
print(scrollView.contentSize)
let view = UIView()
view.backgroundColor = .blue
scrollView.addSubview(view)
view.anchor(top: scrollView.topAnchor, left: scrollView.leftAnchor, bottom: scrollView.bottomAnchor, right: scrollView.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
}
.anchor() is a custom extension I made in order to make constraining views easier.
Any help would be appreciated.
It's better not to mix autolayout with frame layout do
1- Comment
scrollView.contentSize = CGSize(width: self.view.frame.width, height: 2000)
2- set equal width constraint between the view inside the scrollview to the vc's view and a height constraint of 2000
For no confuse with vc's view change
let view = UIView()
to
let contentView = UIView()
then add these 2 constarints
contentView.widthAnchor.constraint(equalTo:self.view.widthAnchor).isActive = true
contentView.heightAnchor.constraint(equalToConstant:2000).isActive = true
I have a UIStackView which consist of 5 elements. I want the centered one bigger than others (like in below pic).
How I create UIStackView()
stackView.axis = UILayoutConstraintAxis.horizontal
stackView.distribution = UIStackViewDistribution.fillEqually
stackView.alignment = UIStackViewAlignment.bottom
stackView.spacing = 0.0
stackView.addArrangedSubview(supportedServicesView)
stackView.addArrangedSubview(incidentView)
stackView.addArrangedSubview(contactUsView)
stackView.addArrangedSubview(moreView)
stackView.addArrangedSubview(moreView2)
stackView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackView)
stackView.anchor(nil, left: self.view.leftAnchor, bottom: self.view.bottomAnchor, right: self.view.rightAnchor, topConstant: 0, leftConstant: 0, bottomConstant: 90, rightConstant: 0, widthConstant: 0, heightConstant: 0)
How I create my custom UIViews subview positions;
override func updateConstraints() {
logoImage.anchor(self.topAnchor, left: self.leftAnchor, bottom: nil, right: self.rightAnchor, topConstant: 0, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)
label.anchor(self.logoImage.bottomAnchor, left: self.leftAnchor, bottom: nil, right: self.rightAnchor, topConstant: 10, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)
super.updateConstraints()
}
EDIT:
when I add width anchor to centered view, It gets higher width but because heights are same, It doesn't look like bigger.
contactUsView.widthAnchor.constraint(equalToConstant: self.view.frame.width / 5).isActive = true
EDIT 2: When I give height constraint to any view inside UIStackView, Stackviews position (height only) changes to value which I gave to Views height anchor.
I have just implemented this example in a playground.
The UIStackView uses the intrinsic content size to calculate how to place its arranged subviews in the stack view taking the axis, distribution, spacing etc into consideration.
So if you add both a height and width constraint you should see it working. See the example and screenshot of output below.
//: Playground - noun: a place where people can play
import UIKit
import PlaygroundSupport
let stackview = UIStackView(frame: CGRect(x: 0, y: 0, width: 500, height: 150))
stackview.backgroundColor = .white
let colours: [UIColor] = [
.blue,
.green,
.red,
.yellow,
.orange
]
for i in 0...4 {
let view = UIView(frame: CGRect.zero)
view.backgroundColor = colours[i]
view.translatesAutoresizingMaskIntoConstraints = false
if i == 2 {
view.heightAnchor.constraint(equalToConstant: 130).isActive = true
} else {
view.heightAnchor.constraint(equalToConstant: 80).isActive = true
}
view.widthAnchor.constraint(equalToConstant: 75)
stackview.addArrangedSubview(view)
}
stackview.axis = .horizontal
stackview.distribution = .fillEqually
stackview.alignment = .bottom
stackview.spacing = 0.5
PlaygroundPage.current.liveView = stackview
You can drop this code straight into a playground and tweak the settings for spacing, distribution etc to get the desired output.
I have a view (Lets called thirdStackView) and two textfield (Lets called them textfield b and c).
In my viewdidload, I give their anchors and make textfields alpha to 0, also y frame of textfields to -100. With a button tap, I move thirdstachview out of screen with an animation and make textfields visible and make their frame +100.
My problem is that when I change textfield, thirdstackview started to seen on screen and textfields positions move back to ones I gave in viewdidload. Also when I dismiss keyboard, this problem occurs.
I guess It is something about layoutIfneeded() but What can be the problem?
override func viewDidLoad() {
thirdStackView.anchor(self.btnStackView.bottomAnchor, left: self.view.leftAnchor, bottom: self.emergenyBtn.topAnchor, right: self.view.rightAnchor, topConstant: 20, leftConstant: 20, bottomConstant: 13, rightConstant: 20, widthConstant: 0, heightConstant: 0)
self.createTextField(placeHolderText: getLabelText(key: CMSKeys.CMS_TF_TCKNID), titleText: getLabelText(key: CMSKeys.CMS_TF_TCKNID), imageName: "id-icon",leftButtons: [.backDisabled,.forward], rightButtons: [.cancel],textField: idTextField)
idTextField.tag = 1
idTextField.keyboardType = UIKeyboardType.numberPad
idTextField.anchor(self.btnStackView.bottomAnchor, left: self.view.leftAnchor, bottom: nil, right: self.view.rightAnchor, topConstant: 20, leftConstant: 30, bottomConstant: 0, rightConstant: 30, widthConstant: 0, heightConstant: 40)
idTextField.alpha = 0
self.createTextField(placeHolderText: getLabelText(key: CMSKeys.CMS_TF_PHONE), titleText: getLabelText(key: CMSKeys.CMS_TF_PHONE), imageName: "phone-icon",leftButtons: [.back,.forward], rightButtons: [.cancel],textField: phoneTextField)
phoneTextField.keyboardType = UIKeyboardType.numberPad
phoneTextField.tag = 2
phoneTextField.anchor(idTextField.bottomAnchor, left: self.view.leftAnchor, bottom: nil, right: self.view.rightAnchor, topConstant: 20, leftConstant: 30, bottomConstant: 0, rightConstant: 30, widthConstant: 0, heightConstant: 40)
phoneTextField.alpha = 0
}
My animation function;
#objc func adminBtnTapped(_ button: UIButton) {
if(btnTapped){
UIView.transition(with: button, duration: 0.5, options: .transitionCrossDissolve, animations: {
self.emergenyBtn.frame.origin.y -= 20
}, completion: nil)
UIView.animate(withDuration: 1, animations: {
self.thirdStackView.frame.origin.y += self.view.bounds.height
self.bgView.frame.origin.y += self.view.bounds.height
self.backBtn.frame.origin.x += self.view.bounds.width
self.idTextField.frame.origin.y += 100
self.idTextField.alpha = 1.0
self.phoneTextField.frame.origin.y += 100
self.phoneTextField.alpha = 1.0
self.passTextField.frame.origin.y += 100
self.passTextField.alpha = 1.0
}) { (_) in
//self.emergenyBtn.setTitle("Giriş Yap", for: UIControlState.normal)
self.view.layoutIfNeeded()
}
btnTapped = false
}
}
When I make superviews "translatesAutoresizingMaskIntoConstraints" attribute to false, It solved. I think, when It is true, auto layout constraints messed up.
self.view.translatesAutoresizingMaskIntoConstraints = false
For gurus that this answer is not enough, you can check official Apple document
https://developer.apple.com/documentation/uikit/uiview/1622572-translatesautoresizingmaskintoco
From Apple Document
Note that the autoresizing mask constraints fully specify the view’s size and position; therefore, you cannot add additional constraints to modify this size or position without introducing conflicts.
I have a view controller with a UIView. Inside that UIView I add elements like a text label. When I run my code it is not there.
import UIKit
class EventDetailViewController: UIViewController {
//variables that will hold data sent in through previous event controller
var eventImage = ""
var eventName = ""
var eventDescription = ""
var eventStreet = ""
var eventCity = ""
var eventState = ""
var eventZip = 0
var eventDate = ""
//
lazy var currentEventImage : UIImageView = {
let currentEvent = UIImageView()
let imageURL = URL(string: self.eventImage)
currentEvent.af_setImage(withURL: imageURL!)
currentEvent.clipsToBounds = true
currentEvent.translatesAutoresizingMaskIntoConstraints = false
currentEvent.contentMode = .scaleToFill
currentEvent.layer.masksToBounds = true
return currentEvent
}()
//will be responsible for creating the UIView that contains relevant event information
let eventInfoContainerView: UIView = {
let infoContainer = UIView()
infoContainer.backgroundColor = UIColor.white
infoContainer.layer.masksToBounds = true
return infoContainer
}()
lazy var eventNameLabel: UILabel = {
let currentEventName = UILabel()
currentEventName.text = self.eventName
currentEventName.translatesAutoresizingMaskIntoConstraints = false
return currentEventName
}()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.white
navigationItem.title = eventName
self.navigationItem.hidesBackButton = true
let backButton = UIBarButtonItem(image: UIImage(named: "icons8-Back-64"), style: .plain, target: self, action: #selector(GoBack))
self.navigationItem.leftBarButtonItem = backButton
//Subviews will be added here
view.addSubview(currentEventImage)
view.addSubview(eventInfoContainerView)
eventInfoContainerView.addSubview(eventNameLabel)
//Constraints will be added here
_ = currentEventImage.anchor(view.centerYAnchor, left: nil, bottom: nil, right: nil, topConstant: -305, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: self.view.frame.width, heightConstant: 200)
_ = eventInfoContainerView.anchor(currentEventImage.bottomAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, topConstant: 0, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)
_ = eventNameLabel.anchor(eventInfoContainerView.bottomAnchor, left: view.leftAnchor, bottom: nil, right: nil, topConstant: 20, leftConstant: 32, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)
}
func GoBack(){
_ = self.navigationController?.popViewController(animated: true)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
I am kind of lost I viewed a tutorial where they added elements to a UIView in a similar fashion and things appeared. Any insight would be helpful. Tried changing multiple things and nothing really made it appear and I have researched a couple answers I know it is probably something small that my eyes are just looking past but I can't discover it at this point.
This is my custom method for setting constraints
import UIKit
extension UIView {
func anchorToTop(_ top: NSLayoutYAxisAnchor? = nil, left: NSLayoutXAxisAnchor? = nil, bottom: NSLayoutYAxisAnchor? = nil, right: NSLayoutXAxisAnchor? = nil) {
anchorWithConstantsToTop(top, left: left, bottom: bottom, right: right, topConstant: 0, leftConstant: 0, bottomConstant: 0, rightConstant: 0)
}
func anchorWithConstantsToTop(_ top: NSLayoutYAxisAnchor? = nil, left: NSLayoutXAxisAnchor? = nil, bottom: NSLayoutYAxisAnchor? = nil, right: NSLayoutXAxisAnchor? = nil, topConstant: CGFloat = 0, leftConstant: CGFloat = 0, bottomConstant: CGFloat = 0, rightConstant: CGFloat = 0) {
translatesAutoresizingMaskIntoConstraints = false
if let top = top {
topAnchor.constraint(equalTo: top, constant: topConstant).isActive = true
}
if let bottom = bottom {
bottomAnchor.constraint(equalTo: bottom, constant: -bottomConstant).isActive = true
}
if let left = left {
leftAnchor.constraint(equalTo: left, constant: leftConstant).isActive = true
}
if let right = right {
rightAnchor.constraint(equalTo: right, constant: -rightConstant).isActive = true
}
}
func anchor(_ top: NSLayoutYAxisAnchor? = nil, left: NSLayoutXAxisAnchor? = nil, bottom: NSLayoutYAxisAnchor? = nil, right: NSLayoutXAxisAnchor? = nil, topConstant: CGFloat = 0, leftConstant: CGFloat = 0, bottomConstant: CGFloat = 0, rightConstant: CGFloat = 0, widthConstant: CGFloat = 0, heightConstant: CGFloat = 0) -> [NSLayoutConstraint] {
translatesAutoresizingMaskIntoConstraints = false
var anchors = [NSLayoutConstraint]()
if let top = top {
anchors.append(topAnchor.constraint(equalTo: top, constant: topConstant))
}
if let left = left {
anchors.append(leftAnchor.constraint(equalTo: left, constant: leftConstant))
}
if let bottom = bottom {
anchors.append(bottomAnchor.constraint(equalTo: bottom, constant: -bottomConstant))
}
if let right = right {
anchors.append(rightAnchor.constraint(equalTo: right, constant: -rightConstant))
}
if widthConstant > 0 {
anchors.append(widthAnchor.constraint(equalToConstant: widthConstant))
}
if heightConstant > 0 {
anchors.append(heightAnchor.constraint(equalToConstant: heightConstant))
}
anchors.forEach({$0.isActive = true})
return anchors
}
}
OK - now that we see your .anchor(...) function...
The TOP of your label is set to the BOTTOM of eventInfoContainerView with topConstant: 20 ... which is +20
Change that value to -20 (assuming you want the label along the bottom of the view):
_ = eventNameLabel.anchor(eventInfoContainerView.bottomAnchor, left: view.leftAnchor, bottom: nil, right: nil, topConstant: -20, leftConstant: 32, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)
Assuming your .anchor(...) function / extension is working properly, I think the only thing wrong is that you forgot to set:
infoContainer.translatesAutoresizingMaskIntoConstraints = false
when you initialize your eventInfoContainerView