Issue With Overlapping UIViews and Interactivity with UIKit/Swift - ios

I am building an interface in Swift and UIKit targeting iOS. All of my views are programmatically constructed. I am having an issue where a UIView that overlaps another UIView (but does not completely cover it) prevents any tap events from passing through. The layout looks like this:
The navbar at the bottom is a custom view and functions fine. Tapping those buttons changes the active view behind it (the current view is the TextView with the SQL syntax highlighting). Above it is a UILabel (with the text "Connected") and a UIView (the circle with the gradient background). I will refer to this element as the "ButtonView" and the label as the "StatusView". The "StatusView" is anchored to the navbar and the enclosing view, and the "ButtonView" is anchored to the navbar and the "StatusView".
This is the relevant layout code:
view.addSubview(navBar!)
view.addSubview(status)
view.addSubview(button)
status.translatesAutoresizingMaskIntoConstraints = false
status.layer.masksToBounds = true
status.text = "Example String"
status.textColor = .white
status.layer.cornerRadius = 20.0
status.layoutMargins = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)
button.translatesAutoresizingMaskIntoConstraints = false
button.layer.masksToBounds = true
button.layer.cornerRadius = 35.0
// button.isUserInteractionEnabled = false
// button.backgroundColor = .white
NSLayoutConstraint.activate([
status.bottomAnchor.constraint(equalTo: navBar!.topAnchor, constant: -10.0),
status.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10.0),
status.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -90.0),
status.heightAnchor.constraint(equalToConstant: 50.0),
button.bottomAnchor.constraint(equalTo: navBar!.topAnchor, constant: -10.0),
button.leadingAnchor.constraint(equalTo: status.trailingAnchor, constant: 10.0),
button.widthAnchor.constraint(equalToConstant: 70.0),
button.heightAnchor.constraint(equalToConstant: 70.0)
])
The intended behavior is that even with the "ButtonView" present, the SQL view can still be tapped and edited. However, when the "ButtonView" is present, the SQL view can no longer be focused. If the "ButtonView"'s isUserInteractionEnabled property is set to false or the "ButtonView" is removed, everything behaves correctly. The "StatusView" does not seem to have any adverse effects, without having to edit any of its properties. (Note that there is no gestural behavior currently assigned to the "ButtonView", and that is not a UIButton). The debug view does not seem to show any overlapping layers:
Ideally, I would like to eventually add a gesture recognizer to this view, but wondering if that will forever disallow me from accessing the views that are further in the background? Is it possible to overlap interactive views like this, or am I somehow screwing up the responder chain?

Related

StackView constraints with UIViews

I'm trying to setup a stackview in the middle of the screen with a padding of 20 to the left an right. Inside, I want to place two custom UIViews, but I don't quit understand how to do it. I tried giving the UIViews their respective Height's and Width's but I got nothing.
I believe the stack view has all the correct constraints. Here's the code:
func setupTeamViews() {
view.addSubview(teamsStackView)
teamsStackView.distribution = .fill
teamsStackView.axis = .vertical
teamsStackView.spacing = 20
teamsStackView.alignment = .fill
NSLayoutConstraint.activate([
teamsStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
teamsStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
teamsStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
teamsStackView.heightAnchor.constraint(equalToConstant: 420)
])
let height = CGFloat((teamsStackView.frame.height / 2) - 20)
let width = CGFloat((teamsStackView.frame.width - 20))
firstTeamView = ATTeamView(width: width, height: height)
firstTeamView.changeColor(color: .lightBlue)
firstTeamView.setTeamName(name: "Tobias")
firstTeamView.setNewPoints(points: "0")
secondTeamView = ATTeamView(width: width, height: height)
secondTeamView.changeColor(color: .white)
secondTeamView.setTeamName(name: "Valen")
secondTeamView.setNewPoints(points: "0")
teamsStackView.addArrangedSubview(firstTeamView)
teamsStackView.addArrangedSubview(secondTeamView)
}
How does a stackview work with UIview's? As far I understand, UIViews don't have intrinsicContentSize, but I don't know how to deal with that.
In stead of doing it programmatically you can add two container views attach them to your view controller, and then active them with the alpha.
This will make constraints easier and you can still program anything extra you would like
myView1.alpha = 1 // activate
myView2.alpha = 0 // deactivate
My code wasn't working because I've forgotten to set teamsStackView.translatesAutoresizingMaskIntoConstraints = false

IQKeyboardManager doesn’t work when using safeAreaLayoutGuide

I've got a button whose top anchor is: backButton.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 2).isActive = true
And I've got a text view whose top anchor is: storyDescription.topAnchor.constraint(equalTo: numOfChapters.bottomAnchor, constant: 16).isActive = true (I've got elements between these but they don't affect this unusual behaviour).
When I tap on the textView it sometimes goes above the view, this only happens when I use view.safeAreaLayoutGuide, But when I don't use view.safeAreaLayoutGuide, it doesn't happen. And again, This only happens when I use view.safeAreaLayoutGuide and all the elements below are connected to the element that uses safeAreaLayoutGuide.

How to update constraints based on user input

I have a view controller view with 3 column sections (called legs, aView, bView, and cView) by default. The user can switch it between 2 and 3 in a settings menu that gets presented modally over the same screen.
I'm trying to get the columns to take up space equally on the screen, so when there are 3 columns, they each take up roughly 1/3 of the width (ignoring padding), and when there are 2, they each take up roughly 1/2.
My current method is setting some constraints that are always active, and then for the ones that change depending on the number of columns, using an if statement. I tried some variations of layoutIfNeeded(), removeConstraints, and others but not entirely sure how to implement them.
For some clarification on the code, xView is the column view, which contains xTitle and xTextView. There is also a mainButton above the text views, and button1 below the text views. This all exists inside a contentView and scrollView setup.
let sidePadding: CGFloat = 15
func placeViews() { // run in viewWillAppear
let alwaysConstraints = [
aView.topAnchor.constraint(equalTo: mainButton.bottomAnchor, constant: 25),
aView.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: sidePadding),
aView.rightAnchor.constraint(equalTo: bView.leftAnchor),
bView.topAnchor.constraint(equalTo: aView.topAnchor),
bView.bottomAnchor.constraint(equalTo: aView.bottomAnchor),
aTitle.topAnchor.constraint(equalTo: aView.topAnchor),
bTitle.topAnchor.constraint(equalTo: aTitle.topAnchor),
aTitle.centerXAnchor.constraint(equalTo: aView.centerXAnchor),
bTitle.centerXAnchor.constraint(equalTo: bView.centerXAnchor),
aTextView.topAnchor.constraint(equalTo: aTitle.bottomAnchor, constant: 25),
bTextView.topAnchor.constraint(equalTo: aTextView.topAnchor),
aTextView.bottomAnchor.constraint(equalTo: aView.bottomAnchor),
bTextView.bottomAnchor.constraint(equalTo: aTextView.bottomAnchor),
aTextView.centerXAnchor.constraint(equalTo: aView.centerXAnchor),
bTextView.centerXAnchor.constraint(equalTo: bView.centerXAnchor),
aTextView.widthAnchor.constraint(equalTo: aView.widthAnchor),
bTextView.widthAnchor.constraint(equalTo: bView.widthAnchor),
bView.widthAnchor.constraint(equalTo: aView.widthAnchor),
// Restrict buttons to leg views
button1.heightAnchor.constraint(equalToConstant: buttonHeight),
button1.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 20),
button1.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -20),
button1.topAnchor.constraint(equalTo: aView.bottomAnchor, constant: 40),
// Restrict button to bottom
button1.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -20)
]
let twoLegConstraints = [
aView.widthAnchor.constraint(equalToConstant: (view.frame.width - (sidePadding * 2) / 2)),
bView.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -sidePadding),
]
let threeLegConstraints = [
aView.widthAnchor.constraint(equalToConstant: (view.frame.width - (sidePadding * 2)) / 3),
bView.rightAnchor.constraint(equalTo: cView.leftAnchor),
cView.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -sidePadding),
cView.topAnchor.constraint(equalTo: aView.topAnchor),
cView.bottomAnchor.constraint(equalTo: aView.bottomAnchor),
cTitle.topAnchor.constraint(equalTo: aTitle.topAnchor),
cTitle.centerXAnchor.constraint(equalTo: cView.centerXAnchor),
cTextView.topAnchor.constraint(equalTo: aTextView.topAnchor),
cTextView.bottomAnchor.constraint(equalTo: aTextView.bottomAnchor),
cTextView.centerXAnchor.constraint(equalTo: cView.centerXAnchor),
cTextView.widthAnchor.constraint(equalTo: cView.widthAnchor),
cView.widthAnchor.constraint(equalTo: aView.widthAnchor),
]
NSLayoutConstraint.activate(alwaysConstraints)
if legs == 2 {
cView.isHidden = true
NSLayoutConstraint.activate(twoLegConstraints)
} else if legs == 3 {
cView.isHidden = false
NSLayoutConstraint.activate(threeLegConstraints)
}
}
At the moment, the screen starts with 3 by default, and it works perfectly (each ~1/3 screen width). Then the user can switch it to 2, and it works perfectly again (each ~1/2 screen width). Then switching back to 3, the first two don't change at all, and the third column appears on the right edge of the screen.
Use a stack view with distribution = .fillEqually. It will take care of the layout and constraints automatically when you set the isHidden property of any of your views.

NSLayoutConstraint rules

I can't see the menu bar (The blue view) when i write this code, but when i change the parameter from 50 to 100 its shows. It seems like it lies behind the status field. I want the constraints to relate to the status bar not the screens top. Someone who knows why?
func setupMenuBar(){
view.addSubview(menuBar)
view.addConstriantswithFormat(format: "H:|[v0]|", views:menuBar)
view.addConstriantswithFormat(format: "V:|[v0(50)]", views:menuBar)
}
You need to constrain your menuBar view to the view's safe area to get it to align with the bottom of the navigation bar.
Tough to do with Visual Format Language though. This alternative method should be easy to understand:
view.addSubview(menuBar)
let guide = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
menuBar.topAnchor.constraint(equalTo: guide.topAnchor, constant: 0.0),
menuBar.leadingAnchor.constraint(equalTo: guide.leadingAnchor, constant: 0.0),
menuBar.trailingAnchor.constraint(equalTo: guide.trailingAnchor, constant: 0.0),
menuBar.heightAnchor.constraint(equalToConstant: 50.0),
])
If the red view is a navigation bar, you should probably look at not extending edges under top bar; otherwise, you need to constrain the blue view in accordance to the red view.
I prefer using the anchors. It is much easier to read.
For example (Swift):
blueView.topAnchor.constraint(equalTo: redView.bottomAnchor).isActive = true
blueView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
blueView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
blueView.heightAnchor.constraint(equalToConstant: 50).isActive = true

UIScrollView Subviews not expanding to fill width (Autolayout)

I'm using the following code to constrain a view to the left and right anchors of a parent UIScrollView.
Despite the right anchor and the left anchor being set to the ScrollView's left and right anchors, the view does not expand to fill the scrollview.
Note: The gray background in this image is the UIScrollView's background, so I know that's properly constrained to its parent view.
Code:
self.wtfView.translatesAutoresizingMaskIntoConstraints = false
self.wtfView.backgroundColor = UIColor.orange
self.wtfView.topAnchor.constraint(equalTo: self.passwordField.bottomAnchor, constant: 40.0).isActive = true
self.wtfView.leftAnchor.constraint(equalTo: self.containerView.leftAnchor, constant: 40.0).isActive = true
self.wtfView.rightAnchor.constraint(equalTo: self.containerView.rightAnchor, constant: 40.0).isActive = true
self.wtfView.heightAnchor.constraint(equalToConstant: 50.0).isActive = true
self.wtfView.bottomAnchor.constraint(equalTo: self.containerView.bottomAnchor, constant: 40.0).isActive = true
https://imgur.com/a/U88iW
Edit:
The following code works correctly, but I would prefer to use the left+right anchor technique to specify the width, and not at a width constraint. Shouldn't that be possible?
self.wtfView.translatesAutoresizingMaskIntoConstraints = false
self.wtfView.backgroundColor = UIColor.orange
self.wtfView.topAnchor.constraint(equalTo: self.passwordField.bottomAnchor, constant: 40.0).isActive = true
self.wtfView.leftAnchor.constraint(equalTo: self.containerView.leftAnchor, constant: 40.0).isActive = true
self.wtfView.widthAnchor.constraint(equalTo: self.containerView.widthAnchor, constant: -80.0).isActive = true //THE DIFFERENT ONE
self.wtfView.heightAnchor.constraint(equalToConstant: 50.0).isActive = true
self.wtfView.bottomAnchor.constraint(equalTo: self.containerView.bottomAnchor, constant: 040.0).isActive = true
The reason for this is that the contentView of the UIScrollView still doesn't know that you want it to take up the width of it's parentView.
You can fix this by adding the following constraint in iOS11:
self.containerView.contentLayoutGuide.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true
This says "Hey, I want you to lock the content Width to the width of the superview.
Pre iOS 11 you can simply constrain a subview to both the parent view's left and right anchors AND the content view's left and right anchors.
Like so:
self.wtfView.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 40.0).isActive = true
self.wtfView.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: 40.0).isActive = true
Much like, Aleksei's recommendation you are now constraining the width to a rigid value ( the width of the parent view ), and the scrollview will use that to decide the width of the scrollview.
may be try to provide:
self.wtfView.widthAnchor.constraint(equalTo: self.containerView.widthAnchor, constant: -40.0).isActive = true

Resources