IOS自動(dòng)布局-UIStackPanel和UIGridPanel(五)

2019-11-14 19:57:43

字體：大中小

供稿：網(wǎng)友

試想這樣的一個(gè)需求場(chǎng)合，一個(gè)button靠右顯示，并且距離superView的頂部和右邊間距分別為10和5。如下圖所示：

要實(shí)現(xiàn)這樣的需求，如果不用自動(dòng)布局技術(shù)，那么我們能想到的就是老老實(shí)實(shí)的使用絕對(duì)布局的坐標(biāo)計(jì)算來實(shí)現(xiàn)了，假如這個(gè)button寬高都是100，父視圖的寬是300，那么這個(gè)button的坐標(biāo)就是：(300-100-5,10)。但要是父視圖的寬度變了，我們還得重新計(jì)算一遍。頗為麻煩。

幸好我們有自動(dòng)布局技術(shù)。要實(shí)現(xiàn)這樣的需求還是相對(duì)比較簡(jiǎn)單的。

既然我們要實(shí)現(xiàn)這樣的需求，而且這個(gè)需求其實(shí)也是具有普遍性的，那么我們直接封裝下好了。我們給UIView添加兩個(gè)擴(kuò)展屬性：horizontalAlignment和verticalAlignment。兩個(gè)屬性都是枚舉。

typedef NS_ENUM(NSInteger, UIViewVerticalAlignment) {    UIViewVerticalAlignmentFill    = 0,    UIViewVerticalAlignmentCenter  = 1,    UIViewVerticalAlignmentTop     = 2,    UIViewVerticalAlignmentBottom  = 3    };typedef NS_ENUM(NSInteger, UIViewHorizontalAlignment) {    UIViewHorizontalAlignmentFill    = 0,    UIViewHorizontalAlignmentCenter  = 1,    UIViewHorizontalAlignmentLeft    = 2,    UIViewHorizontalAlignmentRight   = 3};@PRoperty (nonatomic,assign)UIViewHorizontalAlignment horizontalAlignment;@property (nonatomic,assign)UIViewVerticalAlignment verticalAlignment;

實(shí)現(xiàn)的思路如下：

我下面以水平停靠舉例，對(duì)于水平停靠有四種情況，首先就是不停靠完全的填充，也就是我們把該subview的寬度跟superview的寬度綁定到一起。第二種情況是左邊停靠，依次還有居中停靠和右邊停靠。

對(duì)于非填充停靠，在寬度方面肯定不能直接綁定到superview的寬度了，只能使用UIView的擴(kuò)展屬性size的寬度了。

現(xiàn)在以上述場(chǎng)景的實(shí)現(xiàn)為例，就是水平方向右邊停靠。那么我們只要把subview的NSLayoutAttributeRight跟superview的NSLayoutAttributeRight對(duì)齊就好了。代碼如下：

[self.superview addConstraint:[NSLayoutConstraint constraintWithItem:self                                                             attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeRight multiplier:1.0f constant:-margin.right]];

對(duì)于左邊停靠和居中停靠無非就是對(duì)齊的屬性不一樣。對(duì)于垂直停靠來說也是這樣。

完整的停靠代碼如下：

UIEdgeInsets margin=self.margin;    switch (self.verticalAlignment) {        case UIViewVerticalAlignmentFill:        {            NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-top-[view]-bottom-|" options:0 metrics:@{ @"top" : @(margin.top),@"bottom":@(margin.bottom)} views:@{ @"view" : self}];            [self.superview addConstraints:constraints];        }            break;        case UIViewVerticalAlignmentBottom:        {            [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:self                                                             attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeBottom multiplier:1.0f constant:-margin.bottom]];        }            break;        case UIViewVerticalAlignmentCenter:        {            [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:self                                                             attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeCenterY multiplier:1.0f constant:0]];        }            break;        case UIViewVerticalAlignmentTop:        {            [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:self                                                             attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeTop multiplier:1.0f constant:margin.top]];        }            break;        default:            break;    }    switch (self.horizontalAlignment) {        case UIViewHorizontalAlignmentFill:{            NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"|-left-[view]-right-|" options:0 metrics:@{ @"left" : @(margin.left),@"right":@(margin.right)} views:@{ @"view" : self}];//添加寬度的約束            [self.superview addConstraints:constraints];        }            break;        case UIViewHorizontalAlignmentCenter:{            [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:self                                                             attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0]];        }            break;        case UIViewHorizontalAlignmentLeft:{            [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:self                                                             attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeLeft multiplier:1.0f constant:margin.left]];        }            break;        case UIViewHorizontalAlignmentRight:{            [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:self                                                             attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeRight multiplier:1.0f constant:-margin.right]];        }            break;        default:            break;    }

對(duì)于停靠，我們前面寫的UIStackPanel和UIGridView勢(shì)必也要支持的。因此我也修改了下原來的代碼。

然后對(duì)于圖中的那個(gè)button的代碼就是如下：

   UIButton *btn=[[UIButton alloc] initWithSize:CGSizeMake(100, 100)];    [btn setBackgroundColor:[UIColor blueColor]];    btn.isBindSizeToSuperView=YES;    [btn setTitle:@"button1" forState:UIControlStateNormal];    btn.horizontalAlignment=UIViewHorizontalAlignmentRight;    btn.verticalAlignment=UIViewVerticalAlignmentTop;    btn.margin=UIEdgeInsetsMake(10, 0, 0, 5);    [self.view addSubview:btn];