I am new to Xcode. In the Designer mode the screen looks like this:
And the properties are:
When executed the result is scrunched to the upper left corner - both in Simulator and on the actual device:
I could not find any additional LayoutManager type of settings. What is supposed to be done here?
So there is a tiny magic icon in the bottom right called Add New Alignment Constraints:
Here is where it is at in the bigger scheme of life:
Now it becomes clear what to do: click on both of the checkboxes:
Horizontally in Container
Vertically in Container
I wish these things would be included in the Menu-accessible actions instead of needing to hunt every tiny and incomprehensible icon in the gui.
Related
To keep things simple, let's say I have a window containing a single view, which has auto layout constraints binding all 4 sides to the window container view with offset 0. And assume that this view also has a constraint setting its aspect ratio to a constant value. If I resize the window manually, then then window nicely maintains the desired aspect ratio. But if I click the little green zoom widget, then the window fills up the whole screen, regardless of the aspect ratio, with part of the view being above the top of the screen. Is there some way I can make zooming resize the window as big as it can be, without violating auto layout constraints?
I couldn't very well detect this problem in the delegate method windowWillResize:toSize:, because that doesn't tell me which screen it's thinking about putting the window on. I could try to fix the window size in the windowDidResize: delegate method, at which time I do know what screen it's on, but I'm not sure exactly how to do that without reinventing Auto Layout's wheel.
Apparently someone thinks I wasn't explicit enough, so I'll try again. Steps to reproduce:
In Xcode, create a new macOS App project using XIB interface.
Open MainMenu.xib and select the window.
Reshape the window to be approximately square.
Using the Attribute Inspector, set the Full Screen behavior for the window to Auxiliary Window.
Drag an Image View from the library and drop it in the window.
In the Attributes Inspector, set the image view to show the NSComputer image and scale axes independently.
Expand the image view to fill up the window content area.
With the image view selected, click the button to add new layout constraints.
Add 5 constraints, binding the 4 sides to the container, and setting the aspect ratio. (see screen shot)
Build and Run.
Observe that if you resize the window by dragging an edge or corner, the aspect ratio remains fixed.
Click the green zoom widget in the title bar of the window, and observe that the window expands without regard for the aspect ratio constraint, cutting off part of the image.
I just set up a test project exactly as you specified, and when I invoke the window zoom widget, the window expands and retains its aspect ratio i.e. it works as expected. The only thing I can think of that might be causing your issue: maybe your content hugging and content compression resistance priorities are at odds with your constraints? Mind you, I just left them at the default values and it worked fine. Unfortunately Mac/AppKit development (esp. when using IB) is rife with these kind of odd bugs and weird behaviour, probably because Apple has not given it any love in years, so bugs creep in/fester and they are clearly so DONE with developing UI the 'old fashioned way'. (Using SwiftUI to make a Mac app is just as frustrating, in different ways, so I'll stick with what I know). FYI, I used Xcode 13.4.1 to create this test project. Good luck!
I'm trying to update my app for the new iPhone X. After reading about the safe area feature and the check box "Safe Area Relative Margins" in each UIObject's "Size Inspector" (ruler tab), I didn't think this would be too bad. However, that feature does not seem to be working for me.
Nothing changed for regular iPhones, which is good, however for the X, the top of my app overlaps the top inset of the phone by a third. Is there any known way to fix this* or something I'm missing?
*By fix this, I mean make it so that my objects start below the outcrop, like the second picture.
What is happening:
Desired Behavior (from https://arstechnica.com/gadgets/2017/11/how-devs-updated-their-apps-for-the-iphone-xs-screen-and-the-notch/):
I too have wasted hours on this. And while I cannot answer your question of why this is broken in Xcode, I can provide a solution.
But first let me note than in Xcode 11.3.1, I experience the same issue in a new project created from scratch.
Set up your storyboard:
On your storyboard, select "Use Safe Area Layout Guides". This will add a safe area to each of your ViewControllers. It will also require you to target iOS9+. You might be able to skip this step though (see step 4 below).
View your storyboard as iPhone 4s.
Fix each ViewController:
Select all views under the top-level view.
Click Editor | Embed In | View Without Inset. This creates a new view and puts all your views inside.
Make this new view expand to the safe area by adding safe area constraints (by control-dragging your new view onto the top level view).
Leading space to safe area
Top space to safe area
Trailing space to safe area
Bottom space to safe area
If you did not opt into using a safe area storyboard above, you may be able to create four equivalent constraints by using the Top Layout Guide, Bottom Layout Guide, and the left/right sides of the top-level view. This may not work in landscape though. And I did not test this.
Set your new view as transparent.
Give your new view a name like "SafeAreaView".
In iOS 11, margins are inset from the safe area. Thus, your zero top margin becomes a 20 top margin — explaining your screen shot. If that's not what you want, set the view's insetsLayoutMarginsFromSafeArea property to false.
In my case modalPresentationStyle = .fullScreen has to be set to the view controller being presented
Good morning,
I am new to Xcode and am learning to create iOS applications.
When I open a single view application and click on main.storyboard, my size is w Any h Any. When I decide to add a label and run the iOS simulator (iPhone 6 or iPhone 5S), the label appears somewhere else.
This is really frustrating and I have tried many approaches such as disabling use size classes, changing the storyboard size by clicking the w Any h Any button, and even messing with the constraints as mentioned here: Xcode 6 Storyboard the wrong size?
I am really trying to continue with this but I have seem to hit a wall for a couple of hours now, if someone could shed some light to why I am messing this up, that would be amazing.
EDIT: How can I get it to be a "normal" sized iPhone, such as the iPhone 5s?
You can click on the w Any h Any to change it to a normal iphone size by mousing over the squares and reading which devices they encompass.
You are going to have to use constraints though in order to make anything go where you want it to, I really didn't want to learn them but I couldn't do without them now: they are very useful.
EDIT
Constraints are simple in concept but can be tricky in certain situations:
For any view to have valid constraints that work correctly, it needs to know what the size of the view is and its position in it's "parent container" which is just whatever view or viewController it is inside of.
The little |-O-| shaped button and its neighboring buttons next to "w Any h Any" give you options for positioning and sizing the view. So if you click on a view and then click on that square button in the middle, check the width, height boxes and click the left and top lines in that top positioning thing with sizes in it like so:
Then click on add 4 constraints. You will notice blue lines appear around your view saying that it can properly put it where it needs to go when running the app. If there is any orange or red that means there are conflicting constraints on the view.
Sometimes that can mean you put to many constraints (more than you need) and you just need to delete them in size inspector tab. But more often than not, if that doesn't fix it, I've noticed that I usually have a neighboring view that isn't properly "constrained" and is actually the cause for the other views problems.
How can I get it to be a "normal" sized iPhone, such as the iPhone 5s
You don't. The view controller's main view will be resized correctly when the app runs (on a device or in the simulator), as appropriate for the device type and other aspects of its surroundings.
Your job is to use auto layout so that no matter how the view is resized, its subviews (labels and buttons and so forth) will look good. That is what auto layout is for - it's to help you compensate for the fact that you have no idea what the real size of this view will be at runtime.
After much reading and experimenting, I still cannot get a simple TextView to resize fully in the horizontal direction using Xcode 5.0.2 in Mavericks. It resizes partially as the window is resized, then stops with long lines wrapped around even though my containing NSScrollView continues to resize as expected (it has four default constraints and no horizontal scroller).
Can anyone point me to a simple code/IB+AutoLayout example, preferably just a window containing just an NSTextView dragged in from the IB template library --- one that works? The Apple TextEdit sample code is almost irrelevant for this purpose although it does resize horizontally quite well. Also, there is the clip view for which I can find little information.
Any other tips appreciated.
Thanks.
Answering my own question:
Turns out that my problem had nothing to do with AutoLayout and little to do with NSTextView. It was the textfile I was using to test my code! This file was composed of records with tab-delimited fields.
Turns out that NSTextView comes with a default NSParagraphStyle with predefined tab stops that end at character 56 whereas my test file had tabs beyond that. Therefore, my lines wrapped around at the last defined tab no matter how much I stretched the window.
After changing my search terms, I found what I needed at the following links:
Premature line wrapping in NSTextView when tabs are used
How to have unlimited tab stops in a NSTextView with disabled text wrap
Apologies for wasting bandwidth.
Not sure why such a simple thing does not work in your case, but nevertheless here's what I did in Xcode to get an NSTextView follow window resize:
Create a new project (not document based in my case but it doesn't really make a difference)
Drag a NSTextView from the palette to your window. Align all four edges with the window edges.
Open the "Add constraints" pop-up (second button from the segmented control on the bottom-right part of your IB view.
Each of the four spacing constraints should show a number equal to the distance of your text view from the container window. If you aligned them, this number should be either 0 or -1. Click the down arrow for each of them and select "Use Current Canvas Value". Do it for all four. Make sure no other constraints are selected.
Click on "Add constraints" on the bottom of the panel.
Run your project. Your textview should resize with the window.
Also, as Jay's comment mentions, make sure you do not have any "leftover" constraints in your view. You can check this either by observing Xcode's warnings, or manually by inspecting your view's constraints by going to the Size Inspector tab (4th tab on the Utilities bar).
If you need to have your textview arranged in a more complex layout, it might be worth taking a look at the AutoLayout Guide.
Problem: UIView size is "locked" when designing with Auto Layout in IB
I've uploaded a 20 second video that illustrates my problem, but let me describe it. You may recognize the project: it's right out of Apple's WWDC 2012 "Introduction to Auto Layout." I've got a simple iPhone view in Interface Builder where I've already got a button and label along the bottom. The next step is to add a UIView. Here's where things get ugly.
When I drag the UIView out of the palette in Interface Builder and onto the iPhone window, as soon as I let it go it seems to become locked in to its starting size. I place it in the upper left corner, and I'd like to drag it horizontally to the right side of the window, and vertically to where it will be up against (minus the padding) the button and label along the bottom. But, when I try to resize it, I cannot. It's stuck on its original size!
The video illustrating my problem is here:
http://www.youtube.com/watch?v=jsW4UwnCEkw
You can see me grab the right edge of the view and try to pull it along to the right side of the window, but it won't expand. You can then see me move the entire view to the right side (it retains its size) and then try the opposite: grabbing the left side and trying to expand it so that it sizes up against the left side of the window. In both cases, the view is simply locked to its original size.
What gives! Auto Layout in Interface Builder is just the most frustrating thing. How do I resize a view by dragging? Thanks!
(Note: Xcode 4.6.3.)
In IB, in the series of buttons in the lower right hand corner, click on the rightmost button:
When you do, you'll see a "When resizing Views Apply Constraints To..." pop-up menu:
Make sure that "Siblings and Ancestors" is not checked.