I need to take a screenshot of whole storyboard as an image. Is that possible? I need it to give to my designer.
Ideally I'd like to get 1 big image, make some changes (number views, etc) and save it as JPG
Xcode doesn't have any features for printing or exporting an image of your storyboard. (Though that might make a good feature request to send to Apple.)
Your best bet is to resize your project window as large as possible (and hide the navigator and utility sidebars) and take a screenshot. You might be able to employ a trick or two in getting everything to fit:
If you're on a Mac with a Retina Display, change your screen resolution to one of the "more space" options so your Xcode window can be bigger. (For example, on a 5K iMac you can choose the "looks like 3200 x 1800" size, which renders a 6400 x 3600 screen and downscales it to fit the actual display hardware.)
Zoom out on the storyboard with the Editor > Canvas > Zoom menu commands. In Xcode 8, the zoomed-out storyboard uses the same rendering/editing engine as the regular-size view — which means that on a Retina display, your shrunken-down views will still be legible.
Resize the window larger than the screen, then take a window screenshot (Cmd-Shift-4, then spacebar, then click the window). You can do this with AppleScript:
tell application "Xcode" to set bounds of front window to {0, 0, 4000, 3000}
But that'll still limit its height to that of the screen (minus menubar and Dock). You can drag the window to the bottom of the screen and edge-resize it upward to get some extra height, though.
One more thing: Since the beginning of storyboards (way back in Xcode... 5, I think?), you've never needed to have "one storyboard to rule them all" in your project. In fact, there are lots of reasons why it might make sense to break your app into multiple storyboards. And of course, if you have multiple storyboards, you can screenshot them separately and integrate them however you like for a design presentation.
Using multiple storyboards used to mean you couldn't segue between view controllers in separate storyboards (you'd have to instantiate and present view controllers programmatically), but since Xcode 7 you can insert a "Storyboard Reference" in one storyboard to link to a view controller in a different storyboard. And if you have a big storyboard you want to break up, there's a tool for that. (Select some view controllers, choose Editor > Refactor to Storyboard...)
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!
In XCode 7, on a Swift 2 project, when I place a label onto the View, why is the label centred in XCode, but in the Simulator it's show off to the right?
This is just playing at the moment, where I don't want to play with constraints just yet (which I believe will be used later).
I had the same problem when working through a demo, and this worked for me. Try using the 4.7 inch size view controller:
Look in the middle left hand menu (the Document Outline), if not shown it’s under Editor > Hide Document Outline (a misnomer, clicking it will Show or Hide it).
Click on the View Controller so it's highlighted.
Click on the 4th tab of the right hand one (Utilities: the Attributes Inspector). If not shown it’s under View > Utilities > Show Attributes Inspector.
Under Simulated Metrics is a Size option to change from “Inferred” to “iPhone 4.7-inch”.
You'll need to realign things again, but now these should look central in the View and in the Simulator.
Constraints, when you want to get to them, will probably be more helpful in this regard.
I have a problem with a background image in a controller .
I set an image directly from a storyboard with ImageView , but this seems to be disproportionate and grainy on the storyboard , but then when you launch the app screen appears proportionate.
That makes me hard to graphic design because I see the storyboard no depreciation corresponding to reality
What can be ?
I hope I was clear enough
thanks
Go on your storyboard, select one of your view controller
Right panel > Size inspector > Select freeform in simulated size
Put the size you want
Note with autolayout you are designing "responsive" interface, that's why the screen is bigger because it's could be an interface which can fit both an iPad screen or Iphone, also a question of landscape/not-landscape.
I don't recommend to change this mode then, or only if you are building an app for a specific screen only.
Also, by default the layout is set to Any Width / Any Height that's correspond to all layouts possible but you can change this in the bottom of the middle panel.
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.
I have quite a large storyboard with many views, a lot of them do not display at the correct size or even have a navigation bar. Is this some kind of bug in XCode?, because they all look fine when simulated or built to a device.
Thanks
I have faced it lot of time below solution works every time.
Try This One:
1. Select the StoryBoard you are facing problem
2. Goto Attributes Inspector -> Simulated Metrics -> Size -> There are four options(default is inferred)
3.Select or switch between options other then default(repeat it twice or more if needed) then resize your views and controls to fit your selected screen size.
According to me this happens because:
Sometimes inferred (size) behaves as if its an 3.5 retina screen but our storyboard size is retina 4 full screen or vice-versa
Best Practice to avoid such problems :
When you start working with storyboard first select appropriate size you want to work with (3.5 or 4 full screen) then only you should set your views or controls.
I had this issue when embedding Container Views into the same View Controller.
With three Container Views embedded I found that Xcode auto-sized two of them when I selected "Apply Retina X.X Form Factor" but the size of the third was left untouched.
Solution
In the parent View Controller the third Container Viewer was missing constraints. Adding those constraints got every thing straight. (I also had to size the Container View to fill its parent Controller Viewer)
This is a very simple step. After selecting View Controller, go into your Simulated Metrics and select size and place it on iPhone 4-inch and then select Orientation and place it to Portrait and there you have it. Your main storyboard metrics are fixed. Again this is very important to know that this will not mess up anything your height or width in your project