Xcode view hierarchy debugger - "prototyping" - ios

What does the word "prototyping" mean in the view debugger? It's used to describe a constraint that I didn't add. In IB, the view in question (the upper-left onion image) has an intrinsic width, and its right edge is anchored. It shouldn't need any extra horizontal constraints.
In IB I was designing with a view having simulated metrics set to "Freeform" size, the debugger is showing the view on a 6S. I'm guessing the answer lies in the difference between the two, but can't fathom what's going on.
The added "prototyping" constraint is pulling the onion out of place, towards the left screen edge. Why was it added?

The 'prototyping' constraints are added by XCode Interface Builder when you don't supply enough constraints for it to determine what the layout should be. If you plan to add constraints later at runtime, which it sounds like you're doing, you can add constraints in IB and set them to be removed at build time.
Just add a constraint for the view's leading edge to superview (even though you don't want it), select the constraint in IB, and check Remove at build time.

Related

How to add bottom constraint?

I am using Xcode 8.I add UIView in bottom.I see is perfect in storyboard.
But when i run in simulator its doesn't look perfect. I don't know what the problem is.
I'm not sure if I understood your question correctly, but in Xcode you add constraints by ctrl+click+drag from the view that needs a constraint to any other view (or the layout margins). This may look like this:
ctrl+click+drag
On the size inspector (on the left side) you should then see all your constraints, so for example something like this: example size inspector with four constraints defined
This is where you can also edit the properties of your constraints.
Look for several things that can go wrong
Your UIVIewController's auto resizing subview is turned off.
UINavigationController's translucent property goes wrong.
Your top view height is fixed & some of your constraint are breaking and bottom constraint is one of them.
Your constraint priority is low, so breaking the bottom constraint.
in the console look for following:
Probably at least one of the constraints in the following list is one you don't want.
this indicates, some of your constraint conflicting each other, fix it.
If you insist on your question title, how to add bottom constraint, then here it is
NB::Hold the right click while dragging.

Swift - Why ScrollView not full screen?

I had inserted a ScrollView into UIViewController and dragged ScrollView to fill the space between the navigation bar and the RAM label below:
But when I run the app, the ScrollView does not fill the space:
Please help me! Thank you very much.
P/S: Sorry for my english is bad.
The scroll view is not covering up the whole thing because you are running the app on a much bigger phone. The simplest solution is to run the app on iPhone 5.
However, if you want to solve the problem on all sizes of iOS device, you need to add constraints.
Constraints are things that tells a view when and how much it should resize and where it should be positioned.
To add a constraint, just select the view you wish to add a constraint to and go to the bottom right corner. You will see 4 buttons:
The leftmost button is used to embedding views in stack views. This is a feature of iOS 9. If your deployment target is lower, just ignore it.
The second button to the left is for adding constraints related to alignment - where the edges of the views are, what its baseline is and where it is positioned in the X and Y axes:
The third button to the left is used to add constraint related to margins, width, height and how the width and height should change when it is asked to resize (keep the aspect ratio, for example):
The rightmost button is used to let Xcode decide what constraints you should add. And I think most of the times its choices are okay. Sometimes though, you still need to do some tweaking before it works.
"So... what constraints should I add?" you asked.
Well, I think I should teach you how to think when you want to add a constraint. This way, you can figure it out yourself in the future.
You should first let Xcode guess what constraints you want. Just click the rightmost button and click "Reset to Suggested Constraints". This can save a lot of work if Xcode can get it right. So remember to always do this first.
Then, run your app on various devices and see if the view's position, size, and alignment are as you expected. If it is not, you might have to add and/or remove some constraints.
For example, if you found that your view is always the same size on different devices, (that could be bad because it means that some content my go out of view on smaller devices) it's probably because Xcode added a width and/or height constraint to the view. You should delete that so that the view's width and/or height is not fixed.
You can find your view's constraints in the view hierarchy:
Just select the constraint and press delete.
Uncheck Adjust subview option and add
scrollview.view.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
You need to add constraints for your scrollView. Set the leading and trailing constraints to 0. Pin the height of your scrollView and also don't forget to set the top layout constraint. You can either pin the height or add bottom layout constraint to your page control.
Constraints are very important and its even more important to set it correctly. Check the Apple Documentation - Working with constraints in IB
Uncheck constrain to margins and add 0 every one of the four limits of spacing to nearest neighbour.
My guess (from the little information we have) is that you are creating a constraint from your scrollview to the top of your view with a value equal to the height of the navigation bar. Set the value of this constraint to 0.
Just set the 4 constraints to 0 to the area you need and then uncheck the "Content Layout Guides" checkbox in the constraints tab here. It will automatically adjust to the area you have specified.
The checkbox to uncheck

UICollectionView change flow direction on rotation

Hey, I'd like to obtain what you see in the pictures: in Compact Height mode (landscape iphone) both the red and the blue view have to take all screen vertically and half the screen horizontally. In Compact Width mode (portrait iphone)they have to take all the screen horizontally and half the screen vertically. Space between views should be same size in both modes.
I used to think I have to use size classes and auto-layout constraints, but everything I tried failed miserably.
Maybe I have to use a UICollectionView and change flow direction based on orientation (if that is even possible)?
A collection view is probably overkill, because you don't want scrolling and that's the whole point of a collection view--by the time you do the sizing to stop it you'll have done all the work necessary to set a non-scrolling layout.
This is possible with Size Classes in IB. First, In general you will probably find it helpful to name the views in the Document Outline on the left in IB. You will also want to use this outline rather than try to grab the tiny constraint H-lines.
Set up all the constraints except 1) constraints linking the
OrangeView and BlueView to each other, 2) the constraints linking
the OrangeView to the top and left(leading), and 3) The constraints
linking the BlueView to the bottom and right (trailing).
Change the size class setting at the bottom to w-Compact and
h-Any in the funky box system. Now we're designing for a compact width, so views on top of each other.
Create a constraints for vertical space for BlueView.bottom to
OrangeView.Top. Also create constraint for OrangeView to
superview.leading (or ledaing,margin) and BlueView to
superview.trailing.margin. If you select any one of these constraints and look at the Size Inspector on the right (the ruler) you should see an "installed" checkbox not selected, and below that a w-Compact h-Any and another installed box, this one selected.
Now, while keeping the constraint selected just to see what happens, change the sizeClass selector at the bottom to w-Regular h-Any. Notice that in the Document Outline to the left, it should get grayed out.
Now we are designing for regular, so side-to-side. Add constraints linking the views for horizontal space, BlueView.trailing to OrangeView.leading. Also link OrangeView.top to the superview.top or top aligned to BlueView.top, and same for bottoms. You can manually edit the frame first; if not, IB will automatically fill in the wrong values, so edit these after you create them, and verify they are w-Regular and h-Any. With the ViewController selected, select "update frames" and the views should snap to their expected shape for the size class.
Let us know if this works for you or if it was unclear. Good luck!

Autolayout - Why does "Vertical Spacing" sometimes attach to the opposite side of a view?

When I select "Vertical Spacing" in interface builder, I expect the bottom of the upper view and the top of the lower view to have a relationship. However, frequently what seems to happen is that the bottom of the lower view gets linked to the bottom of the upper view. Then at runtime the bottom view will have the wrong frame (after resizes, animations, etc.). Is there a way I can ensure that views are consistently linked bottom to top?
[EDIT]
Here's another example. I set a height of 419px. I select "Top space to top layout guide". But instead it puts a constraint for how far the bottom of the imageview should be from the top of the superview. Then I change the height from 419px to 374px, and the view has correct height, but a gap at the top.
I've noticed this many times (usually when attaching the top of something to the topLayoutGuide), and I've put it down to a bug in Interface Builder. It seems like the issue has gone away in the betas of Xcode 5.1
The only workaround I've found is to initially move your view away from the view you're attaching it to, and then create the constraint. In this situation, Xcode will usually do the right thing. Then manually edit the constraint's constant back to 0 (or whatever you want it to be).
Instead of adding vertical spacing, try by adding "Top spacing to nearest neighbor" constraint. Please refer attached image,
Hope this will help.
This issue is fixed in the latest versions of Xcode. You can now select which part of the constraint you want to attach to. It may attach wrong initially, but the constraint editing controls are much better now.

IOS Storyboard Constraining Every Subview to bottom of screen

This seems like it should be very simple, but I am having a terrible time trying to get every subview (they act like menu bars) constrained to the bottom of the parent view in the IOS storyboard.
There seems to be automatic constraints placed between the subviews that make them override the constraint I'm trying to set. I try to take these off, and then place the new constraints, but nothing seem to work as I loop over trying to reset constraints, over and over and over...
It should be very simple, set all of the uiviews to a particular width and length and set the distance between the bottom of the superview to be equal to 0. That's it.
The secret to happy constraint editing in interface builder is simple:
Don't do it
If that isn't possible, then:
Create your own constraints before trying to delete the system ones
Make judicious use of the pinning menu and editing constraints in the inspector
Don't drag and drop your views after you've added them - this causes interface builder to discard all constraints and set you up with a new set of "best guess" system constraints.
I've written more about this here but that's the gist of it.

Resources