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

2019-11-14 19:57:43

字體：大中小

來源：轉載

供稿：網友

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

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

幸好我們有自動布局技術。要實現這樣的需求還是相對比較簡單的。

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

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;

實現的思路如下：

我下面以水平?？颗e例，對于水平?？坑兴姆N情況，首先就是不?？客耆奶畛?，也就是我們把該subview的寬度跟superview的寬度綁定到一起。第二種情況是左邊?？?，依次還有居中?？亢陀疫呁？俊?/p>

對于非填充?？浚趯挾确矫婵隙ú荒苤苯咏壎ǖ絪uperview的寬度了，只能使用UIView的擴展屬性size的寬度了。

現在以上述場景的實現為例，就是水平方向右邊?？俊Ｄ敲次覀冎灰裺ubview的NSLayoutAttributeRight跟superview的NSLayoutAttributeRight對齊就好了。代碼如下：

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

對于左邊?？亢途又型？繜o非就是對齊的屬性不一樣。對于垂直停靠來說也是這樣。

完整的?？看a如下：

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;    }

對于?？?，我們前面寫的UIStackPanel和UIGridView勢必也要支持的。因此我也修改了下原來的代碼。

然后對于圖中的那個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];