6

Coming from Android development I'm trying to imitate some of the layouts that I've made in past applications, but now on the iPhone and iPad. Something that I use quite often in Android is layout weight. I've done a ton of searching, reading books, blogs, and I thought something like this would be possible in iOS 6, but I haven't been able to find anything. I've also tried watching a ton of tutorials on auto layout in iOS, but I really haven't found anything that accomplishes my task. This is driving me nuts. So... is there an iOS equivalent to Android layout weights?

Rajesh
  • 10,318
  • 16
  • 44
  • 64
EGHDK
  • 17,818
  • 45
  • 129
  • 204
  • You might find the API available in [UIView+AutoLayout](https://github.com/smileyborg/UIView-AutoLayout) helpful. – smileyborg Aug 19 '13 at 05:24

3 Answers3

8

Use StackView (similar to LinearLayout in Android)

Select Distribution = Fill Equality (similar to weight)

Example:enter image description here

CristianCotrena
  • 258
  • 2
  • 8
1

"Layout weights" is a subset of what iOS 6's Auto-layout framework can do. Unfortunately, setting up constraints in nib files are a pain in XCode 4. I recommend setting up constraints in nib only if you have access to the XCode 5 dev preview.

But, the scenario you mentioned can be done without auto-layout at all:

What if I wanted two views, and the top view would be a "set" height (200) and then I wanted another view to take up the rest of the available space. Could I do that in interface builder?

Yes you can. Just go to the Size Inspector and set the top view's springs-and-struts to enter image description here

and the bottom's to

enter image description here

(note the red crosses. )

UPDATE:

OK, if you really want to use autolayout:

UIView *topView = ...;
UIView *bottomView = ...;
NSDictionary *bindings = NSDictionaryOfVariableBindings(topView, bottomView);
[self.view addConstraints:
 [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[topView(200)][bottomView]|"
                                         options:(NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllRight)
                                         metrics:nil
                                           views:bindings]];
John Estropia
  • 17,460
  • 4
  • 46
  • 50
  • I don't see the auto-sizing box in the size inspector. Any idea why that is? – EGHDK Aug 20 '13 at 05:38
  • @EGHDK This is the old model. He is using the springs and struts method. If you want to use this method, you have to disable auto-layout first. – borrrden Aug 20 '13 at 05:53
  • Hmm... so do you think I can do this without "springs and struts" but with auto-layout? "this" as in "What if I wanted two views, and the top view would be a "set" height (200) and then I wanted another view to take up the rest of the available space. Could I do that in interface builder?" – EGHDK Aug 20 '13 at 06:04
0

You can probably emulate this behavior with the auto layout system in iOS. Note, however, that this requires iOS 6.0+. The reason that this didn't exist for so long is that it didn't make sense on the iOS platform (All ratios were the same on all devices). Using NSLayoutConstraint you could try constraining the width / height of your view to a certain percentage of its superview. I've never tried to do it myself, though. Learning autolayout, however, will require a bit of a time investment (nothing extreme, maybe an hour or two). I suggest the various WWDC videos about it.

I don't know if it will work exactly as I have described it, but if it is possible you will undoubtedly be using either NSLayoutConstraint, or overriding layoutSubviews on your custom view to do your layout logic manually whenever the view is resized or its layout invalidated. This method will work on all iOS versions, but requires more code to be written.

borrrden
  • 33,256
  • 8
  • 74
  • 109
  • I'm only targeting iOS 6, but there is nothing I can find in interface builder that will allow me to accomplish this: http://stackoverflow.com/questions/18174980/creating-a-percentage-based-ios-layout – EGHDK Aug 19 '13 at 05:45
  • You won't be able to use interface builder for this. Percentage based stuff has to be done in code. – borrrden Aug 19 '13 at 05:49
  • Are you serious? This is mind boggling to me. Almost rendering interface builder useless. What if I wanted two views, and the top view would be a "set" height (200) and then I wanted another view to take up the rest of the available space. Could I do that in interface builder? – EGHDK Aug 19 '13 at 05:54
  • iOS is not like Android. iOS developers don't have to tolerate the mind-boggling amount of ratios and resolutions that other platforms do. For this reason percentage based layouts are uncommon (in fact the ratio only changes on one device and only slightly). The set height and remainder of the screen version, though, is very possible in interface builder if auto-layout is enabled. What you would do is pin the top view to the top of the superview, give it a 200 height, then pin the next view to the bottom of the first view and ping the next view's bottom to the superview bottom. – borrrden Aug 19 '13 at 06:01
  • In the File Inspector for the view in the xib file, are you sure you have the Use Autolayout checkbox enabled? I was under the impression this was the kind of stuff you could do with AutoLayout. – David Carvalho Aug 19 '13 at 11:02
  • Can I just make a separate layout for iPhone 4s and then another completely different layout for iPhone 5? – EGHDK Aug 19 '13 at 16:33
  • You could do that too, but you'd have to handle loading the correct one at runtime based on the height of the screen. I recommend more that you find a way to do it with auto-layout though since that will be more future-proof. – borrrden Aug 20 '13 at 01:25
  • Okay, so I want to follow the example put together by "erurainon", but I don't see the "Autosizing" in the size inspector. Any ideas? – EGHDK Aug 20 '13 at 05:47