Default missing Autolayout constraints when added programmatically - swift

I forgot to add an x-component to my autolayout, but I was still able to see the view. I was wondering how/if autolayout generates default constraints when used programatically because in IB, there would be errors. No errors are printed in the debug console for this either.
I notice that when I do not specify an x-component, the view will always be left anchored to its parent view. Is there documentation which states what the default values are when a constraint is missing?
import UIKit
import PlaygroundSupport
//
class MyViewController : UIViewController {
override func loadView() {
let view = UIView()
view.backgroundColor = .white
self.view = view
}
override func viewDidLoad() {
super.viewDidLoad()
let outBox = UIView()
outBox.backgroundColor = UIColor.blue
view.addSubview(outBox)
outBox.translatesAutoresizingMaskIntoConstraints = false
outBox.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
outBox.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
outBox.widthAnchor.constraint(equalToConstant: 200).isActive = true
outBox.heightAnchor.constraint(equalToConstant: 200).isActive = true
let inBox = UIView(frame: CGRect(x: 100, y: 2000, width: 10, height: 10))
inBox.backgroundColor = UIColor.red
outBox.addSubview(inBox)
inBox.translatesAutoresizingMaskIntoConstraints = false
inBox.topAnchor.constraint(equalTo: outBox.topAnchor).isActive = true
inBox.bottomAnchor.constraint(equalTo: outBox.bottomAnchor).isActive = true
inBox.widthAnchor.constraint(equalToConstant: 25).isActive = true
// NO x-constraint component.. Should raise missing constraints error.
}
}
PlaygroundPage.current.liveView = MyViewController()

The key isn't in setting frame here
let inBox = UIView(frame: CGRect(x: 100, y: 2000, width: 10, height: 10))
but it's here
inBox.translatesAutoresizingMaskIntoConstraints = false
that line ignores the internal conversion of frame to constraints and defaults them to zero based , insuffieicent constraints don't mean you can't see the view , for example you can do the same in IB and still see the view with red border and after run also but it doesn't mean it's properly set , and this as finally constraints will be converted to frame so it's a coincidence regarding zero-based

Related

Don't understand why my UILabel won't follow safeareaLayout constraints

Am not working with storyboards, and below is the full code for my UIViewController for my Main Menu screen. While everything appears to work, I made an error, but don't understand the outcome.
myView, the gray area is set to the safeareaLayout constraints
fillRects is a function where I prefill all the rects for the labels and buttons that I will place on myView
By accident, I passed the wrong view to fillRects, not myView, as intended. Therefore the UILabel I create below is larger than it should be.
But my understanding was that it should have been cropped since it is a child of myView, which is constrained to the safeAreaLayout guide. Yet from the included image, you can see that it goes beyond myView's area on the screen.
Is my error in the way I applied the safeareaLayout guides? Or my understanding as to how they work?
import UIKit
class MainMenuCtrl: UIViewController {
var viewBounds : CGRect = .zero
var topLabelRect : CGRect = .zero
var bottomLabelRect : CGRect = .zero
var menuRect : CGRect = .zero
private let myView : UIView = {
let myView = UIView()
myView.translatesAutoresizingMaskIntoConstraints = false
myView.backgroundColor = .gray
return myView
}()
override func viewDidLoad() {
super.viewDidLoad()
// Set background color func
setBGC(vc: view)
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
view.backgroundColor = .green
view.addSubview(myView)
addContraints(main: view, child: myView)
////fill the CGRects for all the labels, and buttons
fillRects(vc: self)
let label = UILabel(frame: self.topLabelRect)
label.textAlignment = .center
label.backgroundColor = .red
label.text = "hello"
label.textColor = nameColor
label.font = .systemFont(ofSize: 40)
label.adjustsFontSizeToFitWidth = true
label.minimumScaleFactor = 0.7
myView.addSubview(label)
}
override var prefersStatusBarHidden: Bool {
return false
}
override var preferredStatusBarStyle: UIStatusBarStyle {
return .darkContent
}
}
Here is the code for fillRects
func fillRects (vc: MainMenuCtrl) {
vc.viewBounds = vc.view.frame
vc.topLabelRect = CGRect(x: vc.viewBounds.minX, y: vc.viewBounds.minY,
width: vc.viewBounds.width, height: vc.viewBounds.height * 0.05)
vc.bottomLabelRect = CGRect(x: vc.viewBounds.minX, y: vc.viewBounds.height * 0.9,
width: vc.viewBounds.width, height: vc.viewBounds.height * 0.05)
vc.menuRect = CGRect(x: vc.viewBounds.minX, y: vc.viewBounds.height * 0.2,
width: vc.viewBounds.width, height: vc.viewBounds.height * 0.6)
}
A view has a clipToBounds property that dictates whether subViews are restricted to the bounds of their parent view. The default value for this is false, which explains the behaviour you are experiencing.
Setting view.clipToBounds = true on the parent view should result in the sub view behaving as you expected.

Swift: Shadow not showing when view is added to window

I am attempting to cast a shadow to my customView but it is not showing. This customView is added to the window using window?.addSubview(customView).
Implementation so far:
//CustomView setup
lazy var customView: UIView = {
let v = UIView()
v.translatesAutoresizingMaskIntoConstraints = false
v.layer.cornerRadius = 8
v.layer.shadowColor = UIColor.darkGray.cgColor
v.layer.shadowOffset = CGSize(width: 0, height: 10)
v.layer.shadowOpacity = 10.5
v.layer.shadowRadius = 15.0
v.layer.masksToBounds = true
return v
}()
//Adding view to window
window?.addSubview(customView)
NSLayoutConstraint.activate([
customView.leadingAnchor.constraint(equalTo: window!.leadingAnchor),
customView.trailingAnchor.constraint(equalTo: window!.trailingAnchor),
customView.heightAnchor.constraint(equalTo: window!.heightAnchor, multiplier: 1),
customView.topAnchor.constraint(equalTo: window!.safeAreaLayoutGuide.bottomAnchor, constant: -100)
])
I have followed advice from this post and this post, but somehow it doesn't show up for views added to window.
It's because of this line:
v.layer.masksToBounds = true
If you want shadow and corner rounding, I'd suggest using two layers, one that has the shadow and masksToBounds = false, and another one which is a child of the first and has corner rounding + masksToBounds = true

Adding constraints programmatically leads to unexpected behavior

I'm playing around with constraints, trying to learn how they work and to try and learn how to build a UI without IB, and I'm not getting the results I anticipated. In the code below, if I comment out the constraints at the end, I can see the purple view. If I uncomment them, all I get is an empty window where I would expect the view to be pinned to the left, topped right edges of the main view.
I've also tried doing a similar thing with the centerX and centerY properties to try and center the view in the middle of the window, again I get an empty window when those are activated.
Any help appreciated!
import Cocoa
class ViewController : NSViewController {
override func loadView() {
// NSMakeRect parameters do nothing?
let view = NSView(frame: NSMakeRect(0,0,400,2000))
view.wantsLayer = true
view.layer?.borderWidth = 5
view.layer?.borderColor = NSColor.gray.cgColor
self.view = view
}
override func viewWillAppear() {
super.viewWillAppear()
// Do any additional setup after loading the view.
createMasterView()
}
func makeView() -> NSView {
let view = NSView()
view.translatesAutoresizingMaskIntoConstraints = false
view.setFrameSize(NSSize(width: 600, height: 100))
view.wantsLayer = true
view.heightAnchor.constraint(equalToConstant: 1000)
return view
}
func createMasterView() {
let mainView = self.view
let headerView = makeView()
headerView.layer?.backgroundColor = NSColor.purple.cgColor
headerView.layer?.borderWidth = 5
headerView.layer?.borderColor = CGColor.black
mainView.translatesAutoresizingMaskIntoConstraints = false
mainView.addSubview(headerView)
headerView.topAnchor.constraint(equalTo: mainView.topAnchor).isActive = true
headerView.leadingAnchor.constraint(equalTo: mainView.leadingAnchor).isActive = true
headerView.trailingAnchor.constraint(equalTo: mainView.trailingAnchor).isActive = true
}
}
Edit: I'm also including my AppDelegate code below. I'm still very new to all this so the code is stuff I've cobbled together from various tutorials.
import Cocoa
class AppDelegate: NSObject, NSApplicationDelegate {
var windowController: NSWindowController!
var window: NSWindow!
var windowTitle = "Test App"
var customBGColor = NSColor(red: 1, green: 1, blue: 1, alpha: 1)
func applicationDidFinishLaunching(_ aNotification: Notification) {
createMainWindow()
}
func createMainWindow() {
window = NSWindow()
// window.alphaValue = 0.5
window.backgroundColor = customBGColor
window.title = windowTitle
window.styleMask = NSWindow.StyleMask(rawValue: 0xf)
window.backingType = .buffered
window.contentViewController = ViewController()
window.setFrame(NSRect(x: 700, y: 200, width: 1920, height: 1080), display: false)
windowController = NSWindowController()
windowController.contentViewController = window.contentViewController
windowController.window = window
windowController.showWindow(self)
}
func applicationWillTerminate(_ aNotification: Notification) {
// Insert code here to tear down your application
}
}
view.setFrameSize(NSSize(width: 600, height: 100))
You are overriding the height shortly afterwards with the heightAnchor.
Try setting width as well with an anchor
With auto layout, you don't touch the frame property of the view. When working programmatically, however, you have to with the view itself, but after that, all subviews can be sized and positioned using constraints. For clarity, I got rid of makeView():
func createMasterView() {
let headerView = NSView() // instantiate
headerView.layer?.backgroundColor = NSColor.purple.cgColor // style
headerView.layer?.borderWidth = 5
headerView.layer?.borderColor = CGColor.black
headerView.translatesAutoresizingMaskIntoConstraints = false // disable mask translating
view.addSubview(headerView) // add as a subview
// then configure constraints
// one possible setup
headerView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
headerView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
headerView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
headerView.heightAnchor.constraint(equalToConstant: 100).isActive = true
// another possible setup
headerView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
headerView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
headerView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
headerView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.5).isActive = true
// another possible setup
headerView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
headerView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
headerView.widthAnchor.constraint(equalTo: view.widthAnchor, constant: -50).isActive = true
headerView.heightAnchor.constraint(equalTo: view.heightAnchor, constant: -50).isActive = true
}

UIView Mask Is Causing View To Move Positions (AutoLayout)

In my app, I have a UILabel, which I am using to mask a UIView. I am using AutoLayout throughout the app, and am finding that when setting the mask of my label, its position suddenly changes.
Here is my code when adding my label;
// Label
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "Hello!"
label.font = UIFont.systemFont(ofSize: 50.0)
label.textColor = UIColor.white
view.addSubview(label)
// Constraints
label.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
This produces the result. When adding the mask, however, via the following code;
// Mask
let mask = UIView()
mask.translatesAutoresizingMaskIntoConstraints = false
mask.backgroundColor = UIColor.blue
mask.mask = label
view.addSubview(mask)
// Constraints
mask.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
mask.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
mask.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true
mask.heightAnchor.constraint(equalTo: self.view.heightAnchor).isActive = true
My label ends up repositioning itself, and I am seeking to have the text stay in position at the perfect center.
You cannot use Auto Layout on the view that is used as a mask. That view it lives outside the normal view hierarchy. You do not add it to the view hierarchy by calling addSubview(_:), you only add it as a mask by setting it as the mask property of another view.
Because of that you have to set the label's frame directly to center your label. You also have to set it again everytime the frame of your masked view changed (e.g. if the user rotates the device). Because of that you have to set the label's frame in viewDidLayoutSubviews()
I tried to make it work by just setting the label's center to the view's center, but that does not work. Somehow the label does not get displayed. I could make it work by explicitly setting the labels size to its intrinsicContentSize. I guess this is because the label is used as a masked and never part of the view hierarchy.
Here is a working example. I took the liberty to change the naming from mask to maskedView to avoid confusion with the mask property ;-)
class ViewController: UIViewController {
var label = UILabel()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .green
// Label
label.text = "Hello!"
label.font = UIFont.systemFont(ofSize: 50.0)
label.textColor = UIColor.white
// Mask
let maskedView = UIView()
maskedView.translatesAutoresizingMaskIntoConstraints = false
maskedView.backgroundColor = UIColor.blue
maskedView.mask = label
view.addSubview(maskedView)
// Constraints
maskedView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
maskedView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
maskedView.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true
maskedView.heightAnchor.constraint(equalTo: self.view.heightAnchor).isActive = true
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let labelHeight = label.intrinsicContentSize.height
let labelWidth = label.intrinsicContentSize.width
label.frame = CGRect(
x: view.center.x - labelWidth / 2,
y: view.center.y - labelHeight / 2,
width: labelWidth,
height: labelHeight
)
}
}
You could make the code inside viewDidLayoutSubviews() a bit shorter by setting label.textAlignment = .center
Then this is enough:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
label.frame = view.frame
}

textview shakes when resizing view

I'm resizing the view that a textview belongs to and the text shakes when the view either gets bigger or gets smaller.
Declaration of said text view:
lazy var textview: UITextView = {
let textView = UITextView()
textView.text = ""
textView.font = .systemFont(ofSize: 12, weight: UIFontWeightMedium)
textView.isScrollEnabled = false
textView.isEditable = false
textView.isSelectable = true
textView.isUserInteractionEnabled = true
textView.translatesAutoresizingMaskIntoConstraints = false
textView.textAlignment = .center
textView.textColor = .lightGray
textView.dataDetectorTypes = .link
return textView
}()
I'm resizing the view that it's in to fit the full screen like this
if let window = UIApplication.shared.keyWindow {
let statusBarHeight = UIApplication.shared.statusBarFrame.size.height
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveLinear, animations: {
self.frame = CGRect(x: 0, y: statusBarHeight, width: window.frame.width, height: window.frame.height - statusBarHeight)
self.layer.cornerRadius = 0
self.layoutIfNeeded()
}, completion: nil)
}
Upon doing so, the view expands perfectly but the textviews text does a bounce effect that makes the animation look extremely unprofessional... any advice?
Edit: It seems like when I remove the center text alignment option it works fine. How do I make it work with the text center aligned?
edit: I took another look at this and attempted to use the technique based in UIScrollView animation of height and contentOffset "jumps" content from bottom.
Here's a minimal working example with text view with centered text alignment which is working for me!
I'd recommend managing animations either to be all constraint based, or all frame based. I attempted a version where the animation is driven by updating the container view frame but it was starting to take too long to left it at this constraint based approach.
Hope this points you in the right direction :)
import UIKit
class ViewController: UIViewController {
lazy var textView: UITextView = {
let textView = UITextView()
textView.text = "testing text view"
textView.textAlignment = .center
textView.translatesAutoresizingMaskIntoConstraints = false
return textView
}()
lazy var containerView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
var widthConstraint: NSLayoutConstraint!
var topAnchor: NSLayoutConstraint!
override func viewDidLoad() {
view.backgroundColor = .groupTableViewBackground
// add container view and constraints
view.addSubview(containerView)
containerView.frame = view.bounds.insetBy(dx: 100, dy: 200)
containerView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
containerView.heightAnchor.constraint(equalToConstant: 100).isActive = true
// keep reference to topAnchor and width as properties to animate
topAnchor = containerView.topAnchor.constraint(lessThanOrEqualTo: view.topAnchor, constant: 100)
widthConstraint = containerView.widthAnchor.constraint(equalToConstant: 300)
topAnchor.isActive = true
widthConstraint.isActive = true
// add text view to container view and set constraints
containerView.addSubview(textView)
textView.leftAnchor.constraint(equalTo: containerView.leftAnchor).isActive = true
textView.rightAnchor.constraint(equalTo: containerView.rightAnchor).isActive = true
textView.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
textView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
}
#IBAction func toggleResize(_ sender: UIButton) {
sender.isSelected = !sender.isSelected
view.layoutIfNeeded()
widthConstraint.constant = sender.isSelected ? view.bounds.width : 300
topAnchor.constant = sender.isSelected ? 20 : 100
// caculate the textView content offset for starting position based on
// expected end position at end of the animation
let xOffset = (textView.bounds.width - widthConstraint.constant) / 2
textView.contentOffset = CGPoint(x: -xOffset, y: textView.contentOffset.y)
UIView.animate(withDuration: 1) {
self.view.layoutIfNeeded()
}
}
}