0

I want to build such interface: enter image description here

With auto layout disabled, I successfully created those 6 buttons and well adjusted them through code in function of screen's height. However, when disabling auto layout, all other controllers become "messy" so I tried to create/adjust those buttons with auto layout enabled. And there is NO WAY to achieve such interface with auto layout enabled. My question is, is there any trick, solution to adjust those 6 buttons with auto layout enabled? Or perhaps there is a library? I'm really stacked. Thank you for your help.

androniennn
  • 3,117
  • 11
  • 50
  • 107
  • what is the adjustment? – Max MacLeod Jul 30 '13 at 15:13
  • @MaxMacLeod: every button has screen_height/3 as its height and screen_width/2 as its width. – androniennn Jul 30 '13 at 15:20
  • "there is NO WAY to achieve such interface with auto layout enabled" -- of course there is. Auto layout can do anything, and a lot more, than struts and springs. What layout exactly are you trying to achieve? Are those 6 buttons supposed to take up the whole screen? You want them to adjust to screen size? To rotation? – rdelmar Jul 30 '13 at 16:21
  • @rdelmar: Those 6 buttons must be related with 0 margin between them(like in the above photo), and YES, they take the whole screen. My problem is with normal(NON retina screen) all is okay, when I change to 3.5 or 4" screen they are related but I have a white margin in the bottom. The problem is how to define constraints in function of screen size. – androniennn Jul 30 '13 at 16:34
  • @rdelmar: their height in non retina screen is 150, how to change them to 180(or 190) in retina screens. I configured height and width constraints for all buttons to be equal. – androniennn Jul 30 '13 at 16:36
  • Found the answer:http://stackoverflow.com/questions/15744287/ios-autolayout-how-to-set-two-different-distances-between-views-depends-on-th – androniennn Jul 30 '13 at 17:05

2 Answers2

2

I see you found an answer, but I'll post mine anyway, because it uses a different approach. Trying to get the constraints correct in IB (in iOS 6) when there are so many dependencies among the 6 buttons is difficult (because of the constraints the system adds for you in IB), so I did it in code. I did it in such a way that the buttons take the whole screen in any size screen or any orientation without having to check the screen size:

@interface ViewController ()
@property (strong,nonatomic) NSMutableDictionary *viewsDict;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.viewsDict = [NSMutableDictionary dictionary];
    for (int i=1; i<7; i++) {
        UIButton *b = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [b setTitle:[NSString stringWithFormat:@"Button%d",i] forState:UIControlStateNormal];
        [b setTranslatesAutoresizingMaskIntoConstraints:NO];
        [self.viewsDict setObject:b forKey:[NSString stringWithFormat:@"b%d",i]];
        [self.view addSubview:b];
    }

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[b1][b2(==b1)]|" options:0 metrics:nil views:self.viewsDict]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[b3][b4(==b3)]|" options:0 metrics:nil views:self.viewsDict]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[b5][b6(==b5)]|" options:0 metrics:nil views:self.viewsDict]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[b1][b3(==b1)][b5(==b1)]|" options:0 metrics:nil views:self.viewsDict]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[b2][b4(==b2)][b6(==b2)]|" options:0 metrics:nil views:self.viewsDict]];
}
rdelmar
  • 103,982
  • 12
  • 207
  • 218
  • Honestly, the answer that I found did not help me at 100%, I'm always facing a problem. I'll try your solution. – androniennn Jul 30 '13 at 20:41
  • It worked! However, can you please explain to me the code ? `constraintsWithVisualFormat`. Thank you very much. – androniennn Jul 30 '13 at 20:44
  • 1
    @androniennn, That would take a lot of time to explain. If you have a specific question, I can answer it. Otherwise, I suggest you watch the 3 WWDC 2012 videos on the subject. Also the documentation covers the syntax of the visual format language. – rdelmar Jul 30 '13 at 20:49
  • Thank you for your answer, it's working perfectly, however, I need to work with IB for some reason :/. – androniennn Jul 30 '13 at 22:08
  • @androniennn, Why? Good luck then, it's a real pain. I think things will be better in iOS 7 though. – rdelmar Jul 31 '13 at 00:13
  • Because firstly, I really want to build in a "clean" way, for me outlets are only created in IB, plus, with IB you make things cleaner and faster. I wish to find a solution in IB for my problem, otherwise, I'll use yours. Thank you very much. – androniennn Jul 31 '13 at 00:54
  • @androniennn, maybe you can find a way, but I think in this case doing it in code is simpler and faster. As far as outlets, I'm not sure what you mean. Yes outlets are only in IB, but you can make a property for each of the buttons which gives you essentially the same thing. – rdelmar Jul 31 '13 at 01:06
0

With autolayout, you will definitely want to wrap those six views in another UIView to prevent layout interactions between the buttons and other views. If that UIView has a fixed height and width, it might be as simple as that.

robinkunde
  • 1,005
  • 9
  • 12