When building an interface in xcode 4.2 (using storybaord) what happens if the content is bigger than the screen in storyboard. I Can scroll text ok using scroll view but how do i set out images or text boxes buttons etc when i cant edit the physical screen size?
Thanks
If you have content in a scene larger than the fixed size in the storyboard, you can scroll within the scene with a two-finger drag. I think that is what you mean, please let me know if not.
From your comment you seem to be stuck at an earlier stage - actually telling the scene you want a larger area in the first place. To do this you have to add a UIScrollView (or UITableView in static mode) to your scene first, then add your text input boxes to that.
Related
I have a horizontally scrolling UIScrollView that runs "off" the screen. See image:
I want to be able to edit the content more directly in the Storyboard rather than guessing where to put Views etc. As you see in the image above, you can't see the entire text of the UILabel, nor the ImageView at the end, much less anything else I might want to put there.
I'm using Xcode 14.2.
I answered this ten years ago, and in a perhaps better way a few months after, but due to the endless vicissitude of Apple's designs, the procedure has become slightly different, so here's a new answer.
You can't scroll a scroll view in the storyboard editor. As a workaround, you can make the scene wider, and the scroll view wider, so that you can see all of its content in the storyboard editor.
Select the view controller in the storyboard outline.
Open the Size inspector. Change the setting for “Simulated Size” from “Fixed” to “Freeform”.
Increase the width of the simulated size as needed so that you can make your scroll view wide enough to see all its content. Depending on how your constraints (or autoresizing mask) are set up, the scroll view may get wider automatically.
I'm trying to create a 3x3 menu, based on a grid of buttons, and I'm facing a lot of problems trying to adapt it to different screen sizes.
Since I want my menu to be equally spaced on the screen (using autolayout tricks on the Storyboard), I have created a custom class with this menu that i'm adding to the center part of the main controller view. The problem is that the menu doesn't fit in small screen (3,5" screens).
Trying to solve this problem, I have created a scrollView in the main screen to add the menu and be able to scroll in small screens.
The problem is that since the view I'm loading in the scrollview, automatically fits to the size of the container (in this case the UIScrollView), only a small part of the menu is appearing in the 3,5" screen, without the option of scrolling (In bigger views it appears equally spaced and everything appears correctly).
How can I solve this UIScrollView problem? Or there is a better solution for this problem?
p.s: I'm sorry, but I don't have enough reputation to add images :(
Uiscrollview with autolayout has some pain into it.
You need to place you're inner views so the scrollview Will be able to understand the contentsize it should use.
You can find more detailed info here
http://infinite-edward.tumblr.com/post/66865604683/uiscrollview-contentsize-and-autolayout-gotcha
I'm trying to use Auto Layout for a custom Table View Cell in my app.
I can't seem to get the constraints quite right.
I layed the labels out in the custom Table View Cell, but the labels are still getting cut off. Any ideas?
Thanks! Will post anything else needed. Tried to show needed info in picture below:
Debugging in Xcode. Somehow what shows in Simulator looks different than in Xcode debug.
Here's the width of my TableView shown:
UPDATE:
The problem here was related to what user matt said in the accepted answer, but I wanted to make the Q&A a bit clearer now that I have it figured out for anyone else that comes across this.
In his initial comment, he mentioned the Xcode View debugging, which was great and I was able to dig into a little bit more. Its called the Assistant Editor: Device Preview, where you are able to see the layout and layers of what is onscreen to see if maybe you have labels overlapping or going offscreen based on the device it is running on. If you want to check multiple device sized, just hit the plus icon in the lower left hand corner of this picture.
This helped me find overlapping layers and sizing issues with the TableView. I was able to see how it looked on each device size.
What also helps here sometimes to use the Pin menu. Sometimes the labels can run off screen because it doesn't know where the constraints of the cell are based on the device size. So your label can run offscreen if the label is based off of a landscape layout but the device is an iPhone 5 and is in Portrait for example. This is the Pin menu:
Hope that makes sense and gives some more color to the problem. Let me know if you have any questions at all, thanks for the help everyone!
The problem is that you are using auto layout but you have not done anything about sizing the table view. The table view here is not your view controller's view; it is a subview. Your view controller's view is automatically sized to the size of the device / window, but its subviews are not automatically resized. So you are ending up with the table view much too wide for the device; the whole table is sticking off into space on the right side.
Use a trailing space from the right side of your labels to the edge of their superview, and set it to greater than instead of equals with a value of ~ 5
Review the constraints of your tableview with the View. Draw cell border, label border and tableview border with different colors to know which elements do not display correctly.
Ex:
#import <QuartzCore/QuartzCore.h>
...
cell.layer.border.width = 1;
cell.layer.border.color = [UIColor blackColor].CGColor;
The thing that worked for me to solve views being clipped was to uncheck "Constrain to margins" in Auto Layout.
I have a problem adapting my apps to the new iphone5 layout, I've made the following passes:
Added a retina 4" splash image
Modified the interface in my storyboard with "Size inspector" to change the anchoring of the widgets
Tested the app with iOS6 "retina 4" simulator.
The app works as expected except when the user pop up the keyboard to edit a text, I use the "stretching scrollview" method for this particular situation and this seems not compatibile with the "autosizing" properties of my widgets, here is an example, from iOS6 simulator, without and with keyboard:
And here is what happens:
I'm quite sure this is a coherent behaviour since my main view is stretched so the other items inside it are stretched following their anchoring, the fact is that I'd like to have the same behaviour of my previous fixed position (all widgets anchored to the top left corner) with the iphone5 gui expansion, is this possibile?
How do you solve the problem of showing a keyboard and scroll hidden content in an iphone 5 compatible way?
I have been having similar problems. From what I have found thus far, we may need to remove all constraints on the view within the scrollable view, because it appears that it's contents are being resized along with the frame of the scrollView. I know that setting the internal view's frame manually in viewWillAppear will work, but then you are stuck having a view that is the same size for both iPhone4 and iPhone5 (albeit it will scroll). Or you could "pin height and pin width" of the internalView right there in storyboard.
Two potential approaches that may work. Sorry I can't confirm these as I'm giving up and redesigning around this problem.
1. Programmatically add constraints to your internal view's subviews. The programmatic constraints will allow you to "spring" the distance between your elements proportionally. When adding constraints programmatically, you are given access to a factor called "multiplier" (not to be confused with priority), which I saw someone else on stackoverflow posting about.
2. You can design the internalView in Interface Builder as a separate viewController with it's .xib file, and then use storyboard to load it as an embedded viewController to a "containerView" object, which you would put in place as the new "internal view" of the scrollView. Perhaps then the .xib would first resize to the correct iOS device, and then you could use its frame to resize the containerView.
My advice is create a small test-case of these before implementing, else you end up like me, having spent hours down the wrong path and facing a dead-end.
UPDATE 12/4/12
Make your life easier by NOT setting the ScrollView as the main view of the ViewController.
--Instead, make ViewController.view a dummy/blank view, and embed a scrollView inside that view. Then, embed another view (my CustomView) in the ScrollView. CustomView contains all the visible controls and text boxes and buttons. There is NO HEIGHT CONSTRAINT on CustomView.
I have a vertically scrolling uiscrollview - imagine an 'about this app' page of a tab bar app which goes on a bit and requires a scrollview. It only contains a few images, a video and some text (only the video has been coded in - the rest have been placed in the GUI). In storyboard (Interface Builder?) Xcode 4.2, everything is set up as it should be and works fine, but the view is only as large as what you see on the screen, is it not possible to manually arrange in storyboard the items that are initially offscreen - that you need to scroll up to? The only way I've found so far is to design them on the visible view then navigate them down with the arrow keys..
In the storyboard select the viewController, then in Attributes inspector change 'size' to 'freeform'. Then change the 'height' of the view/scroll view to as big as you need. The default settings of struts and springs should take care of resizing the view back correctly when the app is run, but you should double check.
I feel your pain. The only way I found is to manually pan the scroll view in the size inspector to reveal the portion of the view that you wish to visually edit.
Use a UIView to contain elements so they are positioned relatively to this view. Add the view as a subview to the scrollview at 0,0.
pan: use the Y coordinate say to -200, then edit the contents.
to place more contents in the hidden part, pan again to reveal new real-estate
when finished, restore the values of the ScrollView's height and X,Y position.
Make sure the scroll view frame rectangle is smaller than the contained view.
New: 3/26/2013
I stumbled upon what I think is even simpler way of dealing with UIScrollView directly in storyboard.
No code needed, just storyboard settings. This maybe new in iOS6.1 / Xcode 4.6
No need to disable constraints (i.e. uncheck "Use autolayout" in File Inspector for storyboard file)
No need to add UIScrollView* scrollView; in .h
No need to add self.scrollView.contentSize = ... in overrides of viewWillAppear or viewDidLoad
Here is what I did (important parts highlighted with **): (see code)
Create a new project with storyboard enabled
Drop in a UIScrollView, set class in identity inspector for view controller
In attributes Inspector, change Size under simulated metrics to Freeform**
Select scroll View; In attributes inspector, turn on "scroll enabled" and "background" to "White" (you'll figure out why - if you don't)
Under Size Inspector (with scroll view selected) change the height to 900 for example**
Add buttons, one on top and one at the bottom
Add a default handler for buttonTouchUpInside for both buttons and simply Log sender.
See Code Select the View Controller and scroll view and check inspectors.
Just change the 'Simulated Size' of the view controller to freeform and set a height that is larger than the usual size, you will be able to see all the outlets you need to edit.
On iOS 6.0 you can drag a Container View inside your Scroll View. This will automatically create a new View for your content, outside of the current scene. You can then resize this view as big as needed to fit your content.
I believe you would still have to set the ScrollView content height at runtime, but at least you can design you content view at once without having to scroll up and down on IB.
Just uncheck the "Autoresize subviews" from any view that you're trying to resize and it should keep all your objects from resizing with it.
I've been struggling with this for a while now, and every single thing I've tried has failed.
Specifically, What I am trying to achieve is a freeform sized modal dialog with a scrollable view containing a container for another view. I have had a lot of varied results, including occasionally having it working correctly. Most often I get it looking exactly correct, but with no scrolling.
In finally downloaded Dickey Singh's code, which worked perfectly but had nothing special. (Excellent clean solution BTW). So, I added a container view to it, exactly as I had in my code, and it broke!
After some experimenting, I worked out what is going on. Just bear with me.
1) Using Auto Layout, the size of the scroll view seems to dictate what the scrolling bounds will be. Setting "contentSize" in "USer Defined Runtime Attributes" seems to have no effect on this, and neither does setting "contentSize" or "bounds" in "viewWillDisplay" or "viewDidLoad". Thus if the initial size of the scroll view is 800x800, that will be all the space that can be displayed. For this reason, when I want a scrollable region, I create a container view and then put the scrolling view inside the content.
2) Without Auto Layout, setting "contentSize" in "User Defined Runtime Attributes" works, as does by setting it programmatically in "viewDidLoad". I prefer to use "User Defined Runtime Attributes" because it keeps the size with the layout. This solution allows you to use scrolling view with more flexibility, since it can be any size at design time.
3) Regardless of Auto Layout, if any view within the scrolling region exactly matches EITHER the horizontal or vertical frame bounds, then the scroll view ceases to function as a scroll view. This applies to my own code and to Dickey Singh's code in every possible configuration that I have tried.
I have no idea what is causing (3), but it is clearly a bug.
I hope this helps everybody out there who is struggling to use scroll view. I imagine that some people are using them without any problem, and some (like me) have had noting but problems with them.
Here's my solution to design a ScrollView with a content larger than the screen entirely in Storyboard (well, except for 1 single line of code :-) :
https://stackoverflow.com/a/19476991/1869369
I'm currently developing an app for iOS 7, and I did exactly as #Dickey Singh's answer, but it doesn't work in the beginning.
After checking the storyboard, I found that we also need to add Auto Layout Constraints for the view controller who holds the scrollView.
It seems that such auto layout constraints would be added automatically before Xcode 5, but now we need to do it ourselves.
The way to add constraints: First select the view controller in the storyboard; Enter 'Editor' in the top menu; Select the 'Resolve Auto Layout Issues'; Select the 'Add Missing Constraints In Container'. Done :-)