自动布局UIButtons之间的空间相等

时间:2014-10-09 00:13:10

标签: ios objective-c uibutton autolayout

我是自动布局的新手,所以在堆栈中阅读一些问题我尝试将单元格底部的5个UIButton对齐以获得相等的空间(例如7个点),I尝试使用代码并且它不起作用。

我的问题是 - 我怎样才能使用Interface Builder?

UIButton *button1 = self.btnFavorite, *button2 = self.btnCalendar, *button3 = self.btnEmail,
             *button4 = self.btnMessage, *button5 = self.btnCall;
    NSMutableArray *constraintsForButtons = [[NSMutableArray alloc] init];

    float unusedHorizontalSpace = self.bounds.size.width - button1.intrinsicContentSize.width - button2.intrinsicContentSize.width - button3.intrinsicContentSize.width - button4.intrinsicContentSize.width - button5.intrinsicContentSize.width;
    NSNumber *spaceBetweenEachButton =  [NSNumber numberWithFloat: unusedHorizontalSpace / 5 ] ;

    [constraintsForButtons addObjectsFromArray:[NSLayoutConstraint
                                                constraintsWithVisualFormat: @"H:|-(space)-[button1]-(space)-[button2]-(space)-[button3]-(space)-[button4]-(space)-[button5]-(space)-|"
                                                options:NSLayoutFormatAlignAllCenterY
                                                metrics:@{@"space":spaceBetweenEachButton}

                                                views:NSDictionaryOfVariableBindings(button1,button2, button3,button4, button5)]];

    [constraintsForButtons addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat: @"V:|[button1]"
                                                                                        options: 0
                                                                                        metrics: nil
                                                                                          views: NSDictionaryOfVariableBindings(button1) ] ] ;
    [self addConstraints:constraintsForButtons] ;

错误:

2014-10-09 03:04:07.501 Human Response[2972:781746] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x1568f260 H:[UIButton:0x1568f100(20)]>",
    "<NSLayoutConstraint:0x15690b90 H:[UIButton:0x15690fc0(20)]>",
    "<NSLayoutConstraint:0x156921c0 H:[UIButton:0x15692d00(20)]>",
    "<NSLayoutConstraint:0x1568d4f0 H:[UIButton:0x1568d8e0(20)]>",
    "<NSLayoutConstraint:0x1558b4c0 H:[UIButton:0x15598410(20)]>",
    "<NSLayoutConstraint:0x155993d0 H:|-(-60)-[UIButton:0x15598410]   (Names: '|':UITableViewCellContentView:0x15673e40 )>",
    "<NSLayoutConstraint:0x15599550 H:[UIButton:0x15598410]-(-60)-[UIButton:0x1568d8e0]>",
    "<NSLayoutConstraint:0x155996e0 H:[UIButton:0x1568d8e0]-(-60)-[UIButton:0x15692d00]>",
    "<NSLayoutConstraint:0x15599740 H:[UIButton:0x15692d00]-(-60)-[UIButton:0x15690fc0]>",
    "<NSLayoutConstraint:0x155997a0 H:[UIButton:0x15690fc0]-(-60)-[UIButton:0x1568f100]>",
    "<NSLayoutConstraint:0x15599800 H:[UIButton:0x1568f100]-(-60)-|   (Names: '|':UITableViewCellContentView:0x15673e40 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x1558b4c0 H:[UIButton:0x15598410(20)]>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.
2014-10-09 03:04:07.633 Human Response[2972:781746] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x155a2de0 H:[UIButton:0x155a2fc0(20)]>",
    "<NSLayoutConstraint:0x155a33d0 H:[UIButton:0x155a32d0(20)]>",
    "<NSLayoutConstraint:0x155a3750 H:[UIButton:0x155a3620(20)]>",
    "<NSLayoutConstraint:0x155a1bc0 H:[UIButton:0x155a1a60(20)]>",
    "<NSLayoutConstraint:0x155a3df0 H:[UIButton:0x155a3cc0(20)]>",
    "<NSLayoutConstraint:0x156a4770 H:|-(-60)-[UIButton:0x155a3cc0]   (Names: '|':UITableViewCellContentView:0x155a2150 )>",
    "<NSLayoutConstraint:0x156a47b0 H:[UIButton:0x155a3cc0]-(-60)-[UIButton:0x155a1a60]>",
    "<NSLayoutConstraint:0x156a4840 H:[UIButton:0x155a1a60]-(-60)-[UIButton:0x155a3620]>",
    "<NSLayoutConstraint:0x156a48c0 H:[UIButton:0x155a3620]-(-60)-[UIButton:0x155a32d0]>",
    "<NSLayoutConstraint:0x156a4920 H:[UIButton:0x155a32d0]-(-60)-[UIButton:0x155a2fc0]>",
    "<NSLayoutConstraint:0x1569fa50 H:[UIButton:0x155a2fc0]-(-60)-|   (Names: '|':UITableViewCellContentView:0x155a2150 )>"
)

enter image description here

2 个答案:

答案 0 :(得分:1)

我发现使用IB执行此操作的唯一方法是在要均匀分布的视图之间创建间隔视图,其所有边连接到要均匀分布的视图的相邻边。你给它们可变的宽度/高度,然后添加约束,说明所有的间隔视图必须具有相同的宽度/高度。

设置起来非常繁琐,但确实有效。

答案 1 :(得分:1)

正如Duncan C在他的回答中所说,使用间隔视图是可行的方法。如果您想在代码中执行此操作,以下是我过去使用的一些代码,用于创建等间距的按钮。

-(void)viewDidLoad {
    [super viewDidLoad];

    NSMutableDictionary *viewsDict = [NSMutableDictionary dictionary];
    NSArray *titles = @[@"Short",@"Longer",@"Short",@"The Longest"];
    for (int i=1; i<5; i++) {
        UIButton *b = [UIButton buttonWithType:UIButtonTypeSystem];
        [b setTitle:titles[i-1] forState:UIControlStateNormal];
        [b setTranslatesAutoresizingMaskIntoConstraints:NO];
        [viewsDict setObject:b forKey:[NSString stringWithFormat:@"b%d",i]];
    }

    for (int i=1; i<6; i++) {
        UILabel *l = [[UILabel alloc ]init]; // these labels are the spacers
        [l setTranslatesAutoresizingMaskIntoConstraints:NO];
        [viewsDict setObject:l forKey:[NSString stringWithFormat:@"l%d",i]];
    }

    for (id obj in viewsDict.allKeys)
        [self.view addSubview:viewsDict[obj]];

    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"|[l1][b1][l2(==l1)][b2][l3(==l1)][b3][l4(==l1)][b4][l5(==l1)]|"
                                                                   options:NSLayoutFormatAlignAllBaseline
                                                                   metrics:nil
                                                                     views:viewsDict];

    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[b1]-|"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:viewsDict];


    [self.view addConstraints:constraints];
    [self.view addConstraints:constraints2];
}