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

標籤：style   blog   color   io   os   使用   ar   sp   div   

在這一篇了我將繼續講解UIGridPanel。

在iphone的app裡面可以經常看到一些九宮格布局的應用，做過html開發的對這類布局應該是很熟悉的。在IOS中要實現這樣的布局方法還是蠻多的，但是我這次主要是講解直接通過控制項來實現，我直接指定某個subview處於gridpanel的某行某列。甚至我要求該subview跨多行多列來顯示。

要實現以上的需求，那麼首先就得要求該panel具有行和列的屬性，也就是該panel可以被拆分成多少行多少列。用代碼錶示如下：

@interface UIGridPanel : UIPanel@property (nonatomic,assign)NSInteger rows;//行數,預設未1@property (nonatomic,assign)NSInteger colums;//列數，預設未1@end

而對於subview來說，需要有四個屬性，row和colum，rowSpan和columSpan。用代碼錶示如下：

@interface UIView(UIGridPanelSubView)//行索引@property (nonatomic,assign)NSInteger row;//跨越的行數@property (nonatomic,assign)NSInteger rowSpan;//預設是1//列索引@property (nonatomic,assign)NSInteger colum;//跨越的列數@property (nonatomic,assign)NSInteger columSpan;//預設是1@end

既然所需的屬性都有了，那麼下面就是具體怎麼實現了。

既然要對某個subview指定某行某列(這裡假定是第一行第一列，row=colum=1)，那麼我們就得有個約束，該subview的left距離panel(假定該panel的rows=colums=3)的left是三分之一panel的寬度，該subview的right距離panel的left是三分之二的panel的寬度。但是這樣的表述方法沒法使用NSLayoutConstraint來實現，為什嗎？我們先把上面的描述轉換成代碼試試

 [NSLayoutConstraint constraintWithItem:subView                                 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeLeft multiplier:1.0 constant:self.frame.size.width/3];

但是我們這裡做的panel都是自適應的，也就意味著當父視圖的高寬變化的時候，所有的subviews的高寬也應該跟著變化，而前面的表述我們把panel的寬度當做參數來處理了，而事實上這個參數是會改變的，很顯然，此路不通。

那麼我們換個思路考慮下，這樣行不行?

[NSLayoutConstraint constraintWithItem:subView                                 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeWidth multiplier:1.0/3 constant:0];

NSLayoutAttributeLeft和NSLayoutAttributeWidth兩種屬性壓根就不匹配，這樣的方法也不行。

再換一個思路看看，我們能不能把panel的中心點做參考呢？如果以中心點做參考的話，該subview的left距離panel的中心點是多少呢？我先說下我當時找出這個演算法的過程。

我們先在草圖上畫一個長方形，將他3等分，寬度定位90，那麼每一列的寬度為30，中心點為45。這樣我們得出一個比例，第一列的left跟中心點的比為0/45,

第二列的left跟中心點的比為30/45，第三列的left跟中心點的比為60/45，整理下得出:0/3,2/3,4/3。

繼續，我們在草圖上畫一個長方形，將他4等分，寬度定位100，那麼每一列的寬度為25，中心點為50。這樣我們得出一個比例，第一列的left跟中心點的比為0/50,第二列的left跟中心點的比為25/50，第三列的left跟中心點的比為50/50，第四列的left跟中心點的比75/50，整理下得出:0/4,2/4,4/4,6/4。

繼續，我們在草圖上畫一個長方形，將他5等分，寬度定位200，那麼每一列的寬度為40，中心點為100。這樣我們得出一個比例，第一列的left跟中心點的比為0/100,第二列的left跟中心點的比為40/100，第三列的left跟中心點的比為80/100，第四列的left跟中心點的比120/100，第五列的left跟中心點的比160/100,整理下得出:0/5,2/5,4/5,6/5,8/5。

看到規律了沒？分母永遠是等分的數量，對於列來說，也就是分母永遠是colums，而分子是2*colum。這樣我們就能用NSLayoutConstraint來表示了。

    [self addConstraint:[NSLayoutConstraint constraintWithItem:subView                                                     attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:((2.0f*subViewColum)/self.colums) constant:margin.left]];

現在演算法出來了。那麼後續的處理就簡單了，包括跨行和跨列的演算法也能明白了。直接貼出代碼：

@implementation UIView(UIGridPanelSubView)char* const uiviewRow_str = "UIViewRowIndex";-(void)setRow:(NSInteger)row{    if(row!=self.row){        objc_setAssociatedObject(self, uiviewRow_str, @(row), OBJC_ASSOCIATION_RETAIN);        [self resetConstraints];    }}-(NSInteger)row{    return [objc_getAssociatedObject(self, uiviewRow_str) integerValue];}char* const uiviewColum_str = "UIViewColumIndex";-(void)setColum:(NSInteger)colum{    if(colum!=self.colum){        objc_setAssociatedObject(self, uiviewColum_str, @(colum), OBJC_ASSOCIATION_RETAIN);        [self resetConstraints];    }}-(NSInteger)colum{     return [objc_getAssociatedObject(self, uiviewColum_str) integerValue];}char* const uiviewColumSpan_str = "UIViewColumSpan";-(void)setColumSpan:(NSInteger)columSpan{    if(columSpan!=self.columSpan){        objc_setAssociatedObject(self, uiviewColumSpan_str, @(columSpan), OBJC_ASSOCIATION_RETAIN);        [self resetConstraints];    }}-(NSInteger)columSpan{    NSInteger columSpan=[objc_getAssociatedObject(self, uiviewColumSpan_str) integerValue];    if(columSpan<1){        return 1;    }    return columSpan;}char* const uiviewRowSpan_str = "UIViewRowSpan";-(void)setRowSpan:(NSInteger)rowSpan{    if(rowSpan!=self.rowSpan){        objc_setAssociatedObject(self, uiviewRowSpan_str, @(rowSpan), OBJC_ASSOCIATION_RETAIN);        [self resetConstraints];    }}-(NSInteger)rowSpan{    NSInteger rowSpan=[objc_getAssociatedObject(self, uiviewRowSpan_str) integerValue];    if(rowSpan<1)        return 1;    return rowSpan;}@end@implementation UIGridPanel@synthesize rows=_rows;@synthesize colums=_colums;-(NSInteger)rows{    if(_rows<1){        return 1;    }    return _rows;}-(NSInteger)colums{    if(_colums<1){        return 1;    }    return _colums;}-(void)setRows:(NSInteger)rows{    if(_rows!=rows){        _rows=rows;        [self updateConstraints];    }}-(void)setColums:(NSInteger)colums{    if(_colums!=colums){        _colums=colums;        [self updateConstraints];    }}-(void)updateSubViewConstraints:(UIView *)subView{    if(subView.row>=self.rows){        NSException *e = [NSException                          exceptionWithName: @"UIGridPanel異常"                          reason: @"子視圖的row索引必須小於父視圖的rows"                          userInfo: nil];        @throw e;    }        if(subView.colum>=self.colums){        NSException *e = [NSException                          exceptionWithName: @"UIGridPanel異常"                          reason: @"子視圖的colum索引必須小於父視圖的colums"                          userInfo: nil];        @throw e;    }            UIEdgeInsets margin=subView.margin;        NSInteger columSpan=subView.columSpan;    NSInteger rowSpan=subView.rowSpan;    NSInteger subViewRow=subView.row;    NSInteger subViewColum=subView.colum;    if(columSpan+subViewColum>=self.colums){        columSpan=self.colums-subViewColum;    }        if(rowSpan+subViewRow>=self.rows){        rowSpan=self.rows-subViewRow;    }            [self addConstraint:[NSLayoutConstraint constraintWithItem:subView                                                     attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:((2.0f*subViewColum)/self.colums) constant:margin.left]];        [self addConstraint:[NSLayoutConstraint constraintWithItem:subView                                                     attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:(2.0f*(subViewColum+columSpan))/self.colums constant:-margin.right]];            [self addConstraint:[NSLayoutConstraint constraintWithItem:subView                                                     attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterY multiplier:((2.0f*subViewRow)/self.rows) constant:margin.top]];        [self addConstraint:[NSLayoutConstraint constraintWithItem:subView                                                     attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterY multiplier:(2.0f*(subViewRow+rowSpan))/self.rows constant:-margin.bottom]];    }-(void)willRemoveSubview:(UIView *)subview{}-(void)dealloc{    [self removeConstraints:self.constraints];}@end

 

 

至此，UIGridPanel已經介紹完了。

下一篇會介紹自動布局的痛點-UIScrollView

 

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