I am pretty confused on how to position the controls on a UIScrollView that extends beyond the associated UIView.
I have a long form that needs to be filled out which is on one long UIScrollView. I have read (but can't believe) that there is no way to use InterfaceBuilder in order to position the controls, but instead you have to hardcode X\Y coords. in code (or in IB, but they still won't show as WYSIWIG)
Do you really have to do this all with hard coded coords ?
If so what is the best approach to accomplish this ? What if certain controls can become "hidden"...do you then need to have code that moves the coordinates of all controls further down on the page up ?
Would a better approach be to put all the controls on different views and then add those views to the UIScrollView (at least you could then "see" them in IB...)
I hope I am missing something :-)
You do not have to do all of this in code.
You can just have an XIB file for your embedded UIView. This can be as large as you need it to be. Then have a view controller that loads this XIB, and add its view to your scroll view (setting the content size appropriately.)
As for hiding controls - XIB files probably won't help you there. But you can hide controls and adjust the coordinates of other controls in code. (And change the content size of your scroll view if necessary.) This might be a reason to have different controls in different subviews of your scroll view's content view.
In IB, you can create your UIScrollView at the top of the hierarchy and give it the height that you want. Then you can set your elements as you want, in a WYSIWYG way. Once you finished, you just set the size of your UIScrollView to the size you want and set it under the hierarchy of your ViewController's UIView, and finally in the code, you set the content size of your UIScrollView to the size it takes. Easy !
I would encourage you to read this http://www.uxbooth.com/blog/mobile-form-design-strategies/, it's good advice if you want to design a long form, in a user friendly way :)
Related
I'm having some trouble working with UIScrollView in my current project. My intention is to have a variable-size drawable canvas which can extend beyond both sides of the screen, and whose size is determined by the user at runtime. For this purpose, I put in a UIScrollView with a Content View inside of it in my View Controller. Unfortunately, Interface Builder keeps pestering me to define the X and Y axes of my Content View as a constant sizes which isn't possible given my specifications. I've even set the ScrollView.contentSize programmatically in my viewDidLoad method and Interface builder is still giving me errors. All other tutorials I've seen have only talked about one-way scrolling with UIScrollView, so here I am. Here's some screenshots of my storyboard hierarchy as well to make things more clear:
Hierarchy
Errors
Does anyone have any experience/workarounds for this kind of problem?
Interface builder is TRYING to be helpful and make sure that you don't have arbitrary constraints on your content view.
Remember that Interface Builder just cares about the initial state of the views it loads. It does not care what you do with them after they have been loaded.
Make IB happy by giving it some rational initial size for your content view. Then programatically after your scroll view loads you can resize the content view and set the scroll view's content size programmatically.
I designed about 40 view controllers using a 5.5 inch storyboard layout. After all of that I tested it on the iPhone 4S...big mistake. everything is jumbled together being for a larger screen size. I was able to fix one view controller up using Size Classes. I am wondering if there is any way I can adjust all 40 at the same time, or at least avoid doing this for every single one. It is really frustrating finding this out now. Thanks!
This is a relatively complicated issue you are attempting to solve, but I have two potential solutions. Both suggestions are based on moving your current interface into containing UIScrollView instances
If you are using storyboards, then for each of your view controller scenes, put a UIScrollView as a descendent of the view controller's view. From there, provided your subviews are contained within other views (like a container view for a set of buttons), you can move those into your scroll view. You will have to setup constraints to define the size of the scroll view's content, but this will allow the size of the device to have a smaller impact on the interface as you will get scrolling as needed.
If you are using nib files (.xib) then it is essentially the same thing, but easier. In this case, move a UIScrollView onto the canvas, but not as a subview of the default view. Once that is out there, move the original view to be a subview of the scroll view and set constraints to be 0 from the subview to the scroll view. Finally, right click drag from the File's Owner icon to the scroll view and set that as the view outlet.
Hopefully one of these will help you.
I have a UIScrollView with a rather large amount of controls in it (like a long form or questionnaire).
The controls are static and can be added in IB, but the scroll view itself is not large enough for all the controls (scrolling is necessary, duh!), meaning that I can't see most of my controls in IB and have to align them "blindly".
Is there a way to simulate a scroll offset for a UIScrollView in IB?
You don't need to, just size your UIScrollView to the size that is needed (it will come off the bottom on the phone screen layout in Xcode) and place the items on it
You should check out this link, it gives a great explanation on different ways to implement the UIScrollView.
UIScrollView implementation
I have a requirement in my app to display a bunch of information that includes both text and images. It will be quite long, so it will need to be scrollable to access all the content.
I know that I can achive this by programmatically adding different UILabels, UIImages etc to a UIScrollView. But this is a proof of concept, so I'm looking for something a little quicker than having to work out all the positioning and code required. The information is static anyway, and does not need to interact with code.
Is there a way to do this using the interface builder (storyboard or xib is fine)?
you definitely can do that if you simply want a quick interface
1.> you might need to know how long is your scroll view, for example in my case, i set it to 1568
2.> Then i drag all the controls that will fit for the first 568 pixel view onto the scroll view and position them.
3.> Then change the Y value for that scroll view to something like - 500, so you can see the rest of the scroll view, and put everything you need there.
4.> After you have all your controls, and remember to set the frame back to 0,0,320,568
5.> last step, in your code, set SCROLLVIEW.contentSize = CGSizeMake(320, 1568);
I would still suggestion don't hard code all those values, but if you are looking for a quick way to do your interface, hope that gives you some ideas.
Just start a new project with a single view, it will come with a xib or storyboard for its single ViewController.
Create a UIView by dragging it into the workspace and place as many Labels, Images and UI Elements as you want.
Open the xib / storyboard and drag a UIScrollView in as your root VC's root view. Drag the view containing your layout into the scrollview, making it the scrollviews only subview.
Done (almost)!
If you launch your app at this point, you'll notice you can't scroll. That is because the scrollview is "too stupid" to adjust the size of its contentSize property on its own.
You'll need some code here, but it is only a tiny snippet and you won't need to touch it again:
Create a new Category on UIScrollView.
In your category's implementation, do:
#implementation UIScrollView (MyHandyCategory)
-(void)awakeFromNib {
NSArray *subViews = [self subviews];
UIView *contentView = [subViews objectAtIndex:0];
[self setContentSize:contentView.frame.size];
}
#end
Done (for real this time)! This will check the size of the view your scrollview contains and ajust the contentSize after it has been initialized. You can change the size of your content view as you like, no need to play around with hardcoded values or even Interface Builder values!
If it’s just proof of concept I’d have a WebView and a local HTML page you load. Easy-peasy.
I would suggest UICollectionView. It's fairly straightforward. There's a good tutorial here:
http://www.raywenderlich.com/22324/beginning-uicollectionview-in-ios-6-part-12
I made an app that has a lot of content on its view (images, buttons, text labels, etc.) and is optimized for the iPhone 5 display. However, the part of the view that is missing when viewed on an iPhone 4 screen is just additional settings, and is perfectly acceptable to be hidden until scrolled to.
So, how do I made my entire view scrollable for iPhone 4 users? I tried just dragging and dropping a UIScrollVIew object over the top of the whole view, but it doesn't add scrolling capability.
I have worked with UIScrollView before, but it was always something I added to the view before anything else, and don't know how to go about adding it to my view now that there are already bunches of objects. Hopefully there is some easy solution that doesn't require manually addig every object as a subView, etc.
Thanks for the suggestions!
I don't know how your views are created, but the easiest thing would be to change the class of the main view from UIView to UIScrollView.
From the InterfaceBuilder you can select all your content views (images, buttons, text labels, etc.) and then select Editor > Embed in > ScrollView.
This will create a UIScrollView containing al the views selected.
WARNING: you will lose all constraints between these subviews and the superview or the layout margin. Relative constraints (from subview to subview) will remain.
This approach is very useful when you wan to make only some content scrollable.