IOS 自動布局-UIStackPanel和UIGridPanel(四)，ios自動布局

IOS 自動布局-UIStackPanel和UIGridPanel(四)，ios自動布局

為什麼說scrollview的自動化布局是痛點？

對scrollview做自動化布局，無非就是想對scrollview裡面的subviews來做自動化布局。但是scrollview裡面的subviews的自動化布局不是由scrollview的高寬來決定的，而是由scrollview的contentSize共同決定的，這樣就出現一個問題了，就算scrollview的高寬是改變了，但是只要contentSize不變，那麼對於scrollview裡面的subviews的高寬其實是沒有影響的。而實現自動化布局的NSLayoutConstraint也無法實現對scrollview的contentSize屬性做自動化布局的。那麼純粹的想使用NSLayoutConstraint來對scrollview做自動化布局的方法是行不通的。

到這裡咱再換一個方法，其實我們平常用scrollview更多的情境是用來做上下滾動或左右滾動，很少有上下滾動和左右滾動同時存在的情況。現在假設我們的自動化布局的scrollview就是上下滾動的，在水平方向，subviews的寬度永遠跟scrollview的寬度一致，這樣的情境是不是能實現？針對這樣的情境我們馬上就能想到，只要把subviews的寬度用NSLayoutConstraint實現跟scrollview的寬度綁定就可以了啊。

    UIScrollView *scroll=[[UIScrollView alloc] init];    scroll.backgroundColor=[UIColor blueColor];    scroll.isBindSizeToSuperView=YES;    [self.view addSubview:scroll];    [scroll setContentSize:CGSizeMake(100, 1000)];        UILabel *label = [[UILabel alloc] initWithSize:CGSizeMake(100, 50)];    label.backgroundColor = [UIColor blackColor];    label.textColor=[UIColor whiteColor];    label.font=[UIFont systemFontOfSize:12];    label.text = @"Label1";    label.translatesAutoresizingMaskIntoConstraints=NO;    label.textAlignment = NSTextAlignmentCenter;    [scroll addSubview:label];    [scroll addConstraint:[NSLayoutConstraint constraintWithItem:label                                                       attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:scroll attribute:NSLayoutAttributeWidth multiplier:1.0f constant:0]];

我們發現這樣做可以啊！別急，你試著再添加一個subview看看？你會發現用這樣的方法雖然能讓subviews實現寬度跟scrollview的寬度保持一致，但是在垂直方向上無法循序配置。這是為什麼呢？

問題在於translatesAutoresizingMaskIntoConstraints這個屬性我們設定了no，為什麼要設定no？只要我們使用自動布局，或者更通俗的說，只要我們使用了NSLayoutConstraint，那麼必須要把這個屬性設定為no。而一旦設定了no，那麼這個view的位置和大小也只能是通過NSLayoutConstraint來實現了。說道這裡，看過我前三篇部落格的同學就能想到，不是有一個UIStackPanel正好可以實現這樣的功能的嗎？對的。我們可以直接拿來用，把uiStackpanel做未subview添加到scrollView中，然後將本來要添加到scrollvew中的subviews添加到stackpanel中。這樣就能實現以上的情境了。但是這樣做還是有一個問題，就是stackpanel的寬度我們是可以綁定到scrollview的寬度，但是高度呢？高度必須跟contentSize的height做綁定。而要實現這樣的需求我們就得藉助IOS的KVO技術來實現，擷取scrollview的contentSize屬性變化事件，然後再次綁定。這樣就能完全的實現以上的需求了。

為了把以上的實現過程進行一個封裝，我們在UIPanel裡面添加了一個bindToScrollView的方法。

NSString *const KVCUIPanelString_ContentSize = @"scrollView_ContentSize";-(void)bindToScrollView:(UIScrollView *)scrollView{    _scrollView=scrollView;    self.translatesAutoresizingMaskIntoConstraints=NO;        [scrollView addConstraint:[NSLayoutConstraint constraintWithItem:self                                                           attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeLeft multiplier:1.0f constant:0]];        [scrollView addConstraint:[NSLayoutConstraint constraintWithItem:self                                                           attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeWidth multiplier:1.0f constant:0]];        [scrollView addConstraint:[NSLayoutConstraint constraintWithItem:self                                                           attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeTop multiplier:1.0f constant:0]];        [scrollView addObserver:self forKeyPath:KVCUIPanelString_ContentSize options:NSKeyValueObservingOptionNew context:nil];    [self addConstraint:[NSLayoutConstraint constraintWithItem:self                                                     attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f constant:[scrollView contentSize].height]];//第一次綁定的時候直接把scrollView的contentSize.height作為panel的高度}-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{    if([keyPath isEqualToString:KVCUIPanelString_ContentSize]){        [self removeConstraints:self.constraints];        [self addConstraint:[NSLayoutConstraint constraintWithItem:self                                                         attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f constant:[(UIScrollView *)object contentSize].height]];    }}

使用kvo的時候一定要記得釋放。

-(void)removeFromSuperview{    [super removeFromSuperview];    if(_scrollView){        [_scrollView removeObserver:self forKeyPath:KVCUIPanelString_ContentSize context:nil];        _scrollView=nil;    }}

方法已經封裝好了，那麼後面就是如何使用了。代碼如下：

    //初始化UIScrollView    UIScrollView *scroll=[[UIScrollView alloc] init];    scroll.backgroundColor=[UIColor blueColor];    scroll.isBindSizeToSuperView=YES;//把UIScrollView的高寬綁定到父視圖    [self.view addSubview:scroll];    [scroll setContentSize:CGSizeMake(100, 1000)];//設定UIScrollView的contentSize        UIStackPanel *_panel=[[UIStackPanel alloc] init];    [scroll addSubview:_panel];    _panel.backgroundColor=[UIColor yellowColor];    [_panel bindToScrollView:scroll];//將UIStackPanel綁定到UIScrollView    UILabel *label = [[UILabel alloc] initWithSize:CGSizeMake(100, 50)];    label.backgroundColor = [UIColor blackColor];    label.textColor=[UIColor whiteColor];    label.font=[UIFont systemFontOfSize:12];    label.text = @"Label1";    label.textAlignment = NSTextAlignmentCenter;    [_panel addSubview:label];    label = [[UILabel alloc] initWithSize:CGSizeMake(100, 50)];    label.backgroundColor = [UIColor blackColor];    label.textColor=[UIColor whiteColor];    label.font=[UIFont systemFontOfSize:12];    label.text = @"Label2";    label.margin=UIEdgeInsetsMake(10, 0, 0, 0);    label.textAlignment = NSTextAlignmentCenter;    [_panel addSubview:label];

至此，uiscrollview的自動化解決方案已經完成了。

 

下一遍介紹UIView在如何停靠在superView中，實現不管superview的高寬如何改變，都不會改變UIView的固定位置。

連帶本篇的源碼都會在下一篇中給出。