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

2019-11-14 19:57:43

字體：大中小

供稿：網(wǎng)友

為什么說scrollview的自動化布局是難點？

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

到這里咱再換一個方法，其實我們平常用scrollview更多的場景是用來做上下滾動或左右滾動，很少有上下滾動和左右滾動同時存在的情況。現(xiàn)在假設我們的自動化布局的scrollview就是上下滾動的，在水平方向，subviews的寬度永遠跟scrollview的寬度一致，這樣的場景是不是能實現(xiàn)？針對這樣的場景我們馬上就能想到，只要把subviews的寬度用NSLayoutConstraint實現(xiàn)跟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]];

我們發(fā)現(xiàn)這樣做可以啊！別急，你試著再添加一個subview看看？你會發(fā)現(xiàn)用這樣的方法雖然能讓subviews實現(xiàn)寬度跟scrollview的寬度保持一致，但是在垂直方向上無法順序布局。這是為什么呢？

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

為了把以上的實現(xiàn)過程進行一個封裝，我們在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;    }}

方法已經(jīng)封裝好了，那么后面就是如何使用了。代碼如下：

    //初始化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];