I'm dynamically adding NSTabViewItem in NSTabView, using this code:
#IBOutlet weak var inputTabs: NSTabView!
...
let rgbInputController = ForegroundRGBInputController(nibName: NSNib.Name(rawValue: "RGBInputView"), bundle: nil)
let rgbInputItem = NSTabViewItem(identifier: "RGB")
rgbInputItem.label = "RGB"
rgbInputItem.view = rgbInputController.view
self.inputTabs!.addTabViewItem(rgbInputItem)
The view is added, but not correctly displayed.
RGB tab with size issues
After playing with the tabs, and the App width, the tab finally displays correctly.
RGB tab displayed correctly
I believe this is a constraints issue, but I have difficulties to fix it.
Any suggestion?
Thanks,
Have you tried calling setNeedsLayout on the input controller view? That should flag that it needs to be laid out again. You could also try invalidateIntrinsicContentSize, as the intrinsicContentSize of your view may be being used to indicate its initial width and height.
Related
(Xcode 11, Swift)
Being a newbie to iOS and Autolayout, I'm struggling with implementing a fairly simple (IMHO) view which displays a [vertical] list of items. The only problem is that items are decided dynamically and each of them could be either text or image (where either of those could be fairly large so scrolling would be required). WebView is not an option, so it has to be implemented natively.
This is how I understand the process:
Make in IB a UIScrollView and size it to the size of the outer frame.
Make a container view as a subview of UIScrollView (again, in IB) and size it the same.
Set constraint on equal width of both
At runtime, populate container view with UILabels/UIImageViews and also set constraints programmatically to ensure proper layout.
"Tell" scrollview about the subview height in order to make it manage the scrolling thereof.
Is this the right approach? It doesn't seem to work for me (for a toy example of dynamically adding a very tall image to a container view - I cannot get the scrolling to work). What would be the proper way to do the last step in the process above - just force the contentSize of the scrollview to the size of the populated container view (it doesn't seem to work for me). Any help would be appreciated.
When adding multiple elements to a scroll view at run-time, you may find it much easier to use a UIStackView... when setup properly, it will automatically grow in height with each added object.
As a simple example...
1) Start by adding a UIScrollView (I gave it a blue background to make it easier to see). Constrain it to Zero on all 4 sides:
Note that we see the "red circle" indicating missing / conflicting constraints. Ignore that for now.
2) Add a UIView as a "content view" to the scroll view (I gave it a systemYellow background to make it easier to see). Constrain it to Zero on all 4 sides to the Content Layout Guide -- this will (eventually) define the scroll view's content size. Also constrain it equal width and equal height to the Frame Layout Guide:
Important Step: Select the Height constraint, and in the Size Inspector pane select the Placeholder - Remove at build time checkbox. This will satisfy auto-layout in IB during design time, but will allow the height of that view to shrink / grow as necessary.
3) Add a Vertical UIStackView to the "content view". Constrain it to Zero on all 4 sides. Configure its properties to Fill / Fill / 8 (as shown below):
4) Add an #IBOutlet connection to the stack view in your view controller class. Now, at run-time, as you add UI elements to the stack view, all of your "scrollability" will be handled by auto-layout.
Here is an example class:
class DynaScrollViewController: UIViewController {
#IBOutlet var theStackView: UIStackView!
override func viewDidLoad() {
super.viewDidLoad()
// local var so we can reuse it
var theLabel = UILabel()
var theImageView = UIImageView()
// create a new label
theLabel = UILabel()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theLabel.translatesAutoresizingMaskIntoConstraints = false
// multi-line
theLabel.numberOfLines = 0
// cyan background to make it easy to see
theLabel.backgroundColor = .cyan
// add 9 lines of text to the label
theLabel.text = (1...9).map({ "Line \($0)" }).joined(separator: "\n")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// add another label
theLabel = UILabel()
// multi-line
theLabel.numberOfLines = 0
// yellow background to make it easy to see
theLabel.backgroundColor = .yellow
// add 5 lines of text to the label
theLabel.text = (1...5).map({ "Line \($0)" }).joined(separator: "\n")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// create a new UIImageView
theImageView = UIImageView()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theImageView.translatesAutoresizingMaskIntoConstraints = false
// load an image for it - I have one named background
if let img = UIImage(named: "background") {
theImageView.image = img
}
// let's give the image view a 4:3 width:height ratio
theImageView.widthAnchor.constraint(equalTo: theImageView.heightAnchor, multiplier: 4.0/3.0).isActive = true
// add it to the stack view
theStackView.addArrangedSubview(theImageView)
// add another label
theLabel = UILabel()
// multi-line
theLabel.numberOfLines = 0
// yellow background to make it easy to see
theLabel.backgroundColor = .green
// add 2 lines of text to the label
theLabel.text = (1...2).map({ "Line \($0)" }).joined(separator: "\n")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// add another UIImageView
theImageView = UIImageView()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theImageView.translatesAutoresizingMaskIntoConstraints = false
// load a different image for it - I have one named AquariumBG
if let img = UIImage(named: "AquariumBG") {
theImageView.image = img
}
// let's give this image view a 1:1 width:height ratio
theImageView.heightAnchor.constraint(equalTo: theImageView.widthAnchor, multiplier: 1.0).isActive = true
// add it to the stack view
theStackView.addArrangedSubview(theImageView)
}
}
If the steps have been followed, you should get this output:
and, after scrolling to the bottom:
Alignment constraints (leading/trailing/top/bottom)
The alignment constraint between Scroll View and Content View defines the scrollable range of the content. For example,
If scrollView.bottom = contentView.bottom, it means Scroll View is
scrollable to the bottom of Content View.
If scrollView.bottom = contentView.bottom + 100, the scrollable
bottom end of Scroll View will exceed the end of Content View by 100
points.
If scrollView.bottom = contentView.bottom — 100, the bottom of
Content View will not be reached even the scrollView is scrolled to
the bottom end.
That is, the (bottom) anchor on Scroll View indicates the (bottom) edge of the outer frame, i.e., the visible part of Content View; the (bottom) anchor on Content View refers to the edge of the actual content, which will be hidden if not scrolled to.
Unlike normal use cases, alignment constraints between Scroll View and Content View have nothing to do with the actual size of Content View. They affect only “scrollable range of content view” but NOT “actual content size”. The actual size of Content View must be additionally defined.
Size constraints (width/height)
To actually size Content View, we may set the size of Content View to a specific length, like width/height of 500. If the width/height exceeds the width/height of Scroll View, there will be a scrollbar for users to scroll.
However, a more common case will be, we want Content View to have the same width (or height) as Scroll View. In this case, we will have
contentView.width = scrollView.width
The width of Content View refers to the actual full width of content. On the other hand, the width of Scroll View refers to the outer container frame width of Scroll View. Of course, it doesn’t have to be the same width, but can be other forms like a * scrollView.width + b.
And if we have Content View higher (or wider) than Scroll View, a scrollbar appears.
Content View can not only be a single view, but also multiple views, as long as they are appropriately constrained using alignment and size constraints to Scroll View.
For details, you may follow this article: Link.
I'm trying to add a simple NSView with a checkbox as an accessory view to an NSOpenPanel, but when I run my program, I get an error saying The Open/Save panel was supplied an accessory view with bad layout constraints, resulting in a view that is zero [height/width]. Here are the constraints I've added to the view:
And here are the constraints for the checkbox:
Here's the code for creating the NSOpenPanel:
let dlgOpenSounds: NSOpenPanel = NSOpenPanel()
let optionsView = BatchAddOptionsView()
dlgOpenSounds.accessoryView = optionsView
dlgOpenSounds.accessoryView?.awakeFromNib()
let result = dlgOpenSounds.runModal()
if result == .OK {
// do stuff
}
Anyone know what I'm doing wrong?
I ran into the same issue with a similar arrangement created in code, and finally worked it out. My implementation is handled in a custom NSView subclass, which I then add as the NSOpenPanel's .accessoryView from the view controller where I display the panel.
private func setup() {
hiddenFilesCheckbox = NSButton(checkboxWithTitle: "Show Hidden Files", target: self, action: #selector(hiddenFilesCheckboxValueChanged))
guard let checkbox = hiddenFilesCheckbox else {
os_log("Hidden files checkbox is nil")
return
}
addSubview(checkbox)
checkbox.translatesAutoresizingMaskIntoConstraints = false
checkbox.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 12).isActive = true
checkbox.topAnchor.constraint(equalTo: self.topAnchor, constant: 12).isActive = true
self.heightAnchor.constraint(greaterThanOrEqualToConstant: frame.height).isActive = true
self.widthAnchor.constraint(greaterThanOrEqualToConstant: frame.width).isActive = true
}
"hiddenFilesCheckbox" is declared as a property of my custom NSView subclass. I played around with some other hard-coded values for the constants, but these worked best in my tests. I pass in the openPanel to the subclass's initializer to use its frame to set the accessoryView's width. I used a hard-code value of 40 for the height in the initializer that isn't included here. After setting up the accessory view with these constraints, the warnings stopped appearing and the accessory view appears as desired/expected.
Try setting up the view like this (Xcode 10.1). First make sure that AutoLayout on the view is not selected. Then:
Change the view width and height to whatever is appropriate (I'm using a 'small' control size)
Setup the checkbox similar to:
Again, adjust the width and height as necessary. No other constraints should be added.
Note that if you save and reuse the accessory view in multiple panel.beginModalSheet() calls, you'll get a console warning because the previous beginModalSheet() added layout constraints.
I am using Custom Cell in UITableView. And the basic model of the cell is as follows.
I would like to have the dashed line dynamically deformed according to the size of the Menu Name box in this cell. So I wrote the following code:
menuField.frame.size.width = getWidth(text: menuField.text!)
menuField.layoutIfNeeded()
dotLine.layoutIfNeeded()
func getWidth(text: String) -> CGFloat {
let txtField = UITextField(frame: .zero)
txtField.text = text
txtField.sizeToFit()
return txtField.frame.size.width
}
This worked very well. Only increase if only! If the Menu Name Frame is reduced below the currently set size, the size remains unchanged.
As you can see from the image above, I need to make not only the size of the dotted line increase but also the shrinkage. I do not know what my problem is. Please help me!
You don't need any of code you wrote, autolayout does this for you. Just set autolayout like this:
Dash is constraint with your value
- MenuTextField - Dotted line - Price -
I have solved my problem. First, I added the width dimension Constraints of the Menu Text Box and imported it into the IBOutlet variable.
#IBOutlet weak var menuWidth: NSLayoutConstraint!
And I changed the value of the variable according to the text length.
menuWidth.constant = getWidth(text: menuField.text!)
This method is not yet fully functional. But it works the way I want.
Also thanks to Robert Dresler who answered me :) Thanks!
I've got this code
override public func viewDidLoad() {
let imageBlankCard = UIImage(named: "BlankCard.png")
let imageViewBlankCard = UIImageView(image: imageBlankCard)
rockCard.addSubview(imageViewBlankCard)
scissorCard.addSubview(imageViewBlankCard)
paperCard.addSubview(imageViewBlankCard)
self.view.addSubview(rockCard)
self.view.addSubview(scissorCard)
self.view.addSubview(paperCard)
}
But when I run the playground, only the latest UIView (paperCard) is displayed properly, the other cards are not shown at all as you can see in the image here: there should be two cards like the last one, in place of the arrows.
Can someone help me? Thanks everybody!
According to the documentation,
Views can have only one superview. If view already has a superview and that view is not the receiver, this method removes the previous superview before making the receiver its new superview.
This explains the behaviour that you're getting.
One solution to this is to create three separate image views and add each of them as a subview.
Judging by the variable names, I think you are creating something similar to a rock paper scissors game. And you have three views that each holds an image view with the image of a blank card. And you want to add the image of a stone, paper and scissors as an overlay to the image view. If that's what you want to do, why not just make rockCard, paperCard and scissorsCard themselves UIImageViews and set the image to be BalnkCard.png?
let imageBlankCard = UIImage(named: "BlankCard.png")
rockCard.image = imageBlankCard
scissorsCard.image = imageBlankCard
paperCard.image = imageBlankCard
I have a view controller opened from a Popover segue - on iPhone displays this opens as a full page view controller (basically modally). On iPad it opens as a popover.
When opening the view on iPad the seachbar renders wider than the view of the popover. This does not occur on any of the iPhone screen sizes - Only iPad (as a Popover).
If I bring the UISearchBar to focus (tap on the textfield) the issue resolves itself until the view is opened again:
The UISearchBar is added programatically to a UIView of the desired dimensions.
Here is the code for initializing the SearchController
self.resultSearchController = ({
let controller = UISearchController(searchResultsController: nil)
controller.searchResultsUpdater = self
controller.dimsBackgroundDuringPresentation = false
controller.searchBar.sizeToFit()
controller.definesPresentationContext = false;
searchBarView.addSubview(controller.searchBar)
return controller
})()
I have tried removing .sizeToFit() and instead sizing based on a CGSize
controller.searchBar.sizeThatFits(CGSize(width: 375, height: 44)
This did not work however. I have also tried calling view.setNeedsLayout() and view.LayoutIfNeeded(). Neither of these have any effect.
I could solve this problem by making the UISearchBar active in viewDidLoad but am looking for a less janky solution.
Thanks!
Well this was an interesting lesson in debugging UI issues.
I believe this was ultimately caused by the ViewController being set to size inferred and size fixed. On different iPad screen sizes (9.7" vs 12.9").
To resolve this I set the frame width of the search bar to the tableview below it. I'm not sure why the searchbarview size changed width since its constrained to leading and trailing edges (superview).
if UIDevice.current.userInterfaceIdiom == .pad {
self.resultSearchController.searchBar.frame = CGRect(x: 0, y: 0, width: Int(tableView.frame.width), height: 44)
}
Although this works it has the same issue if split view is used (for widths where a popover has room to display).
Further suggestions are welcome but this is a good start.
---Edit---
Unchecking "Resize View from NIB" under layout in the ViewController as well as setting size to Freeform and declaring a constant width resolved the issue of the VC resizing on iPad. From there I just set the frame of the search bar in viewDidLoad as follows:
if UIDevice.current.userInterfaceIdiom == .pad {
self.resultSearchController.searchBar.frame = CGRect(x: 0, y: 0, width: 375, height: 44)
}
Seems to work for all devices regardless of split view or not. There probably is a better way to do this without detecting iPads. Im thinking I'm missing a setting in Interface Builder.