OK, this might seem very simple but I've been struggling for too long, so I decided to ask for some help.
Basical, I've got a container NSView.
The contents are (from left to right):
an NSSegmentedControl
an NSTextField
an NSSegmentedControl
And they are all aligned horizontally (= they're in the same "line").
What I'm trying to do is:
Fixed width for the first element, and fixed on the left
resizeable textfield
Fixed width for the last element, and fixed on the right
I guess it's pretty self-explanatory.
And here are my autoresizing settings for the 3 views:
View 1
View 2
View 3
And here's the issue: the whole resizing works fine. Until the textfield is resized at such a point where it is collapsed. When the superview/container is resized at a normal size again, the whole design is messed up (with the textfield overflowing the container and lots of such weird issue).
What's going on? Any suggestions?
Note: I got it to work with Auto Layout (merely setting "Auto Layout" and "Add(ing) missing constraints"), but I most definitely want to avoid it since the performance impact is huge -- the overall design is rather complicated, with lots of nesting, so let's stick to the old-fashioned way. :-)
The old springs-and-struts model using autoresizing masks is based on proportional distribution of the change in size based on the current sizes of the subviews being resized. Once any subview gets to zero size, it goes haywire. Either there's division by zero or multiplication by zero and you get bogus results. This is a long-standing issue with the system.
You must set minimum window size to prevent that from happening.
Auto layout is the solution to that and many other limitations of the old model, for all of its flaws.
Related
I want to create a custom UIView that would be equivalent to a horizontal UIPickerView. The data elements, such as "Mountain View, Sunnyvale, Cupertino, Santa Clara, San Jose" would move left to right. The view would be long and thin. 50px in height, 350x in width sort of thing.
I will need to use protocols to obtain my datasource elements likely, but what I'm more interested in figuring out is the visual aspect of this.
How would I animate things left and right? Should I just make one incredibly long view (off screen), and change the frame left and right. This seems like a bad idea, as likely only 3-5 options need to be visible in the control at one time. If the datasource is 100 elements, there is no point in loading the other 95 off screen in a long view.
So perhaps I should load ~9 or something. The 3-5 on screen, plus an additional ~3 left and right. Each time the control is triggered to move left and right, it will load up another element on the view(?).
Is this a good way to achieve this? A long thin view with ~9 UILabel's. As the control moves to the right, I would shift the further left UILabel to move hidden to the far right, and change the UILabel to be the next in the data source.
I also likely want to change the text size based on its position. If it's currently selected, I either want to bold it and possibly increase the font size. How can I gradually achieve this as the view is moved? It would be weird if the text only changed once it was moved perfectly center inside the view. It should likely gradually grow as it gets closer to the middle.
How can I achieve this?
A collection view would do the trick, obviously there's some coding involved.
I'd suggest you to take a look at the code of, or use, the following library.
I've used it once,does almost exactly what you need and works very well:
AKPickerView
I want to fit the Image + Label into Scrollable View.
It looks like so My setup
So trouble here is that width of the picture and the label did not match the screen width.
I tried to change the UIImageView width from 400 to 300 or so, BUT those changes either wont take the effect(if above 300), OR those changes make label disappear (with width setted up on 300 or below). Observe.
Funny thing is - label actually appears when you see view hierarchy, even though it looks kinda distorted. But no label on the iOS screen for you, sir.
I also tried to set equal width and height from the superview, but this option just disabling scroll, making view strictly fit the screen (label appears to be cropped)
I want the label to be nice and scrollable, but I also want to see it on the screen. Too much to ask?
EDIT: I just tried removing Auto-layout and got the same as with auto-layout. (click "Observe" link to take a look again, exact same situation) Could somebody explain why?
This is quite a simple fix. For the image, you should use equal width & center horizontally; however, make sure you use a fixed width. For the image to look nice, play with the scale modes - I find Aspect Fit/Fill work best.
The label should also be equal width & centered horizontally. You may need to calculate the height of the label programmatically if the text isn't always going to be the same size.
So the answer to my particular question was - shortening the actual text that is passed to the label.
Apparently UIScrollView can't handle stuff with crazy abnormal heights (I was passing a huuuge text to it) So in my particular situation solution was - shorten the text. Now it works like a charm (even though I still need to play a little with constraints to get rid of the warnings and stuff)
I'm trying to understand how autolayout works under XCode6, but there's a lot of mysterious things that runs away from my mind. Autolayout and constraints philosofy can be very hard to learn, but I realized that life can be easier using these tools...
For your information, I need to build a chat view with a table (the messages) and a view containing a text field (the send message pane) nested in a UIView that is again nested in a UIScrollView, so I can shift up the scroll view as the keyboard appears under the textfield.
I read a lot of tutorials and watched a lot of video until I found the useful tutorial Using UIScrollView with Auto Layout in iOS. There's a Xcode project in Github of what the tutorial explains, too.
In his tutorial, Mike Woelmer tells that
One of the big pain points with the old way of setting up a
UIScrollView was communicating the content size to the scroll view. It
was fairly straightforward to calculate your content size if the
content in the UIScrollView was an image. But it was not as easy if
your scroll view included a mixed bag of buttons, labels, custom
views, and text fields. Lengthy code adjustments were needed to
reflect constant changes in device rotations and phone size
differences.
So Mike explains the way to adapt the UIView, using placeholder and forcing the view inside the scrollview to fits the device's screen, creating in viewDidLoad some NSLayoutConstraint:
The solution is to look outside the scroll view and attach a
constraint to the view controller’s main view. This cannot be done in
interface builder, so we will have to write some code. Interface
builder is still complaining, though, so we have to add a placeholder
width constraint to make it happy.
I tried to use parts of the code of the tutorial for my project, but I cannot get a working view controller for my needs (I always get errors). Which is the best approach to do this? Am I on the right road?
Last but not least, I'm italian, so pardon for my english. If something is not clear enough, please leave me a comment.
Basically you have to set both alignment and size constraints in order for Autolayout to take care of the rest for you. If you don't provide enough information you get warning. If you provide conflicting information you get errors.
You need basically to provide enough information for Autolayout to calculate the UIView frame property (i.e., x-position, y-position, width, height).
For example, by providing the distance constraints from the top, right, bottom, and left edges, Autolayout has enough information to draw that UIView's frame rectangle. But you could also provide just the distance constraints from the top and left edges and then provide a size and height constraint.
You can also configure the key constraints you need and then click 'resolve auto layout issues' and choose 'add missing constraints' though sometimes it doesn't give you what you want. It is better to understand that how Autolayout accomplishes what I described above.
If you mess up, it's usually easier to clear all the constraints and start over. Do it a few times and you'll get the hang of it.
I understand the old Struts and Springs method of aligning, sizing and distributing views in Interface Builder. However, I cannot seem to figure out how to evenly distribute views using auto layout with Xcode 5. There was a way to do it using Xcode 4, but that option is gone.
I have 7 buttons arranged in a vertical stack. On a 3.5" layout, it looks great. When I preview the screen in the 4" layout, all of the buttons remain tightly packed and there is a large amount of space below the last button.
I want them to stay the same height, but I want the space between them to be able flex so they can spread out across the screen.
I've been able to get the height of the buttons to flex and fill the space, but that is not my desired behavior. I would like to learn how to use Auto Layout to replace my old Springs behavior, but I can't seem to find any way to do it through Interface Builder.
I'm ok with the top button either being a fixed space from the top edge or a proportional space from the top edge, likewise for the bottom button and the bottom edge. Those are less important to me, I'm good with either.
But I really need to figure out how to evenly distribute the extra space between each of the items in the view.
EDIT Note that in iOS 9 this technique will become unnecessary, because a UIStackView will perform distribution automatically. I'll add another answer explaining how that works.
How to Perform Even Distribution Using Autolayout
The simplest way to do this in Interface Builder alone (rather than constructing constraints in code) is to use "spacer" views:
Position the top and bottom buttons absolutely.
Place spacer views between all the buttons. Use constraints to position them horizontally (centering them horizontally is simplest) and to set their widths.
Make constraints between each button and the spacer view above and below it, with a Constant of 0.
Now select all the spacer views and set their heights to be equal.
The first screen shot shows me setting this up in IB:
I have deliberately not corrected for the "misplaced views" because I want you to see what it looks like while I'm designing the constraints. Here's the result on both a 4 inch and a 3.5 inch screen:
I have left the spacer views black, just to show you how this technique works, but of course in real life you would make them transparent and hence invisible! So the user sees just your buttons, evenly distributed on either height of screen.
The reason for the use of this technique is that although the notion of equality performs the distribution of values you are asking for, constraints can apply equality only between aspects of views; thus we need the extra views (the spacer views) so that we have things we can make equal to other things (here, the heights of the spacer views).
Other Approaches
Obviously, a more flexible approach is to assign the constraints in code. This may sound daunting, but there's a lot of third-party code out there to help you, such as this sort of thing.
For example, if we have a (possibly invisible) superview whose height acts as a boundary to dictate maximum vertical distribution of our four buttons, we can pin their tops to the vertical center of that superview with a constant of 0 but a multiplier of 0.000001, 0.666667, 1.33333, and 2.0 respectively (if we have four buttons); now the buttons will stay vertically distributed even as the superview changes size in response to screen height or whatever. [In Xcode 5.1, it will be possible to set that up in Interface Builder, but in earlier versions of Xcode it is not possible.]
In iOS 9 / Xcode 7 this problem will be trivially solved in IB. Simply select the buttons (or whatever it is you want to distribute vertically) and choose Editor > Embed In > Stack View. Then you simply configure the stack view:
Provide constraints that position and size the stack view itself. For example, pin the four edges of the stack view to the four edges of its superview.
Set the stack view's attributes. In this case we want Vertical axis, Fill alignment, Equal Spacing distribution.
That's all! However, you may be curious about how this works, because it is still possible to do the same thing manually in code. A stack view performs distribution, not by inserting spacer views, but by inserting spacer guides. A guide (a UILayoutGuide) is a lightweight object that behaves like a view for purposes of layout constraints, but is not a view and therefore doesn't have to be made invisible and doesn't carry any of the overhead of a view.
To illustrate, I'll do in code what the stack view is doing. Presume we have four views to distribute vertically. We assign them constraints for everything but their distribution:
They all have absolute height constraints
Their left is pinned to the superview's left, and their right is pinned to the superview's right
The top view's top is pinned to the superview's top, and the bottom view's bottom is pinned to the superview's bottom
Now, presume we have references to the four views as views, an array. Then:
let guides = [UILayoutGuide(), UILayoutGuide(), UILayoutGuide()]
for guide in guides {
self.view.addLayoutGuide(guide)
}
NSLayoutConstraint.activateConstraints([
// guide heights are equal
guides[1].heightAnchor.constraintEqualToAnchor(guides[0].heightAnchor),
guides[2].heightAnchor.constraintEqualToAnchor(guides[0].heightAnchor),
// guide widths are arbitrary, let's say 10
guides[0].widthAnchor.constraintEqualToConstant(10),
guides[1].widthAnchor.constraintEqualToConstant(10),
guides[2].widthAnchor.constraintEqualToConstant(10),
// guide left is arbitrary, let's say superview margin
guides[0].leftAnchor.constraintEqualToAnchor(self.view.leftAnchor),
guides[1].leftAnchor.constraintEqualToAnchor(self.view.leftAnchor),
guides[2].leftAnchor.constraintEqualToAnchor(self.view.leftAnchor),
// bottom of each view is top of following guide
views[0].bottomAnchor.constraintEqualToAnchor(guides[0].topAnchor),
views[1].bottomAnchor.constraintEqualToAnchor(guides[1].topAnchor),
views[2].bottomAnchor.constraintEqualToAnchor(guides[2].topAnchor),
// top of each view is bottom of preceding guide
views[1].topAnchor.constraintEqualToAnchor(guides[0].bottomAnchor),
views[2].topAnchor.constraintEqualToAnchor(guides[1].bottomAnchor),
views[3].topAnchor.constraintEqualToAnchor(guides[2].bottomAnchor)
])
(Obviously I could make that code cuter and shorter using loops, but I have deliberately unrolled the loops for clarity, so that you can see the pattern and the technique.)
I've added an NSSegmentedControl to a pane on an horizontal split view on a normal window. I thought that adjusting the springs would make the segmented control centre itself automatically, but it doesn't. How can keep it centred?
I was told to add an observer for when the parent view's frame changes, and manually adjust the position of the centered view, but I've no idea how to go about that.
Any ideas are very welcome.
The layout you describe sounds totally plausible in IB.
Just testing it out, I dropped a segmented control in one of the views in a split view, and it stays centered, so I'm sure there's just a configuration issue.
Be sure that:
Your split view is set to stay centered and resize appropriately with the window as appropriate (just to make sure the behaviour you're seeing is not related to the segmented control's container not resizing properly).
You position your segmented control dead centre, and then leave all 3 horizontal "springs" unclicked (ie: no left anchoring, no right anchoring, no horizontal growing).
I don't know if it's been "fixed" in recent OS versions, but if I recall correctly, NSSegmentedControl does a -sizeToFit each time segments change. If the control isn't changing at all, Jarrett's instructions should work.