IOS 自動佈局-UIStackPanel和UIGridPanel(一)

我之前是作windows phone開發的，後來轉作IOS的開發，所以不少windows phone上面的開發經驗也被我帶到了IOS中。其實有些經驗自己跟平臺無關，跟平臺有關的無非就是實現方法而已。好了，廢話很少說。

我今天給你們介紹一個IOS自動華佈局的輔助類(UIPanel   UIStackPanel  UIGridPanel)，作過windows phone開發的同窗看到這三個類確定很眼熟，沒錯，這三個類正是windows phone佈局的核心，只是名稱稍微有點不同而已。

我先介紹下我開發這個類庫的背景，有助於你們理解我爲何要這麼作。

在IOS上開發程序的界面目前有三種方式，第一種純代碼開發，第二種使用XIB開發，第三種是使用storyboard開發。先不說哪一種方式好吧，三種方式各有優劣，我自己開發是傾向於純代碼開發的，由於我一開是學IOS的時候使用XIB作的，有多是我對XIB不是很熟練，XIB跟windows phone的界面開發兩項一比較，我實在沒有興趣繼續使用XIB來開了，storyboard是後來纔出的一種技術，因此我一開始幾乎就是一直採用純代碼的方式來開發IOS的界面。

純代碼的方式在固定分辨率下開發仍是不錯的選擇，可是遇到能夠旋轉界面或者要適配ipad那就有點力不從心了。對於這個問題，在蘋果還沒推出autolayout這個技術以前基本沒辦法。可是蘋果從IOS6.0開始引入了autolayout的技術，自從這個技術的引入使用xib來開發界面就變得相對比較方便了，若是仍是用純代碼來作autolayout就顯得無比的蛋疼了，固然熟悉之後仍是很好用的啦(可是看着一堆的約束信息就顯得鬱悶了)。

最近在考慮這個問題的時候靈機一動，忽然想到可否參考windows phone上面的佈局方式呢，既然IOS6.0已經加入了autolayout技術，那麼我是否可使用autolayout技術開發一個相似windows phone中的stackpanle和gridview 那樣的控件呢，想到就幹。花了幾天時間的研究還真被我研究出來了。這就是我前面提到的(UIPanel   UIStackPanel  UIGridPanel)三個類。

我先介紹下這三個類的使用方法

• UIPanel，UIPanel是全部其餘派生panel的基類。添加到其中的subview的大小都跟uipanel的大小同樣。
• UIStackPanel，UIStackPanel繼承UIPanel，UIStackPanel有一個屬性isHorizontal，就是subviews的排列是不是水平排列，默認是垂直自上而下的排列，添加到UIStackPanel中的subview若是是垂直排序，那麼subview的寬度跟UIStackPanel的寬度同樣，高度經過UIView的擴展屬性size來控制。反之若是是水平排列，那麼subview的高度跟UIStackPanel的高度同樣，寬度經過UIView的擴展屬性size來控制。
• UIGridPanel，UIGridPanel繼承UIPanel，UIGridPanel相似表格，有rows和colums的兩個屬性，能夠指定subview的row和colum的擴展屬性來實現詳細的排列，甚至能夠經過subview的rowSpan和columSpan兩個擴展屬性實現跨多列或多行佈局。

下面先放兩張豎屏和橫屏的對比截圖

上面是豎屏的。

上圖是橫屏的

上面的截圖中除了黑色的是uilable和一個clicke me的一個按鈕之外，其餘每種顏色表明一個uipanel，panel裏面嵌套其餘的panel就組成了如上圖的佈局界面。點擊按鈕之後還能看到隨着屬性的改變，佈局的方式也會改變。

下面我以代碼的形式介紹各個panel的用法。

• 首先是gridpanel。

    gridPanel=[[UIGridPanel alloc] init];
    gridPanel.rows=3;
    gridPanel.colums=3;
    gridPanel.isBindSizeToSuperView=YES;
    gridPanel.margin=UIEdgeInsetsMake(20, 0, 0, 0);
    gridPanel.backgroundColor=[UIColor grayColor];
    [self.view addSubview:gridPanel];
    currentPanle=gridPanel;

rows和colums屬性指定該gridpanel有三行三列。isBindSizeToSuperView屬性指定該panel的高寬是否綁定到父視圖的高寬。若是綁定了，那麼只要父視圖的高寬改變，子視圖的高寬也一併跟着變。margin屬性指定該視圖左上右下四個方向的間距，這個指定gridpanel永遠距離頂部20像素。如今gridpanel已經初始化完畢，後面就是添加各個子視圖了。既然是gridpanel，那麼我可能但願裏面的子視圖是對角線排列的。也就是咱們須要三個子視圖。代碼以下：

    UILabel *label = [[UILabel alloc] init];
    label.backgroundColor = [UIColor blackColor];
    label.textColor=[UIColor whiteColor];
    label.font=[UIFont systemFontOfSize:12];
    label.text = @"Label1";
    label.textAlignment = NSTextAlignmentCenter;
    label.size=CGSizeMake(50, 50);
    label.row=0;//第一行
    label.colum=0;//第一列
    [currentPanle addSubview:label];
    
    
    label = [[UILabel alloc] init];
    label.backgroundColor = [UIColor blackColor];
    label.textColor=[UIColor whiteColor];
    label.font=[UIFont systemFontOfSize:12];
    label.text = @"Label2";
    label.textAlignment = NSTextAlignmentCenter;
    label.size=CGSizeMake(50, 30);
    label.row=1;//第二行
    label.colum=1;//第二列
    [currentPanle addSubview:label];
    
    label = [[UILabel alloc] init];
    label.backgroundColor = [UIColor blackColor];
    label.textColor=[UIColor whiteColor];
    label.font=[UIFont systemFontOfSize:12];
    label.text = @"Label3";
    label.textAlignment = NSTextAlignmentCenter;
    label.size=CGSizeMake(50, 30);
    label.row=2;//第三行
    label.colum=2;//第三列
    [currentPanle addSubview:label];

效果以下：

若是我想把lable2改爲橫跨兩列，而且下間距爲5，那麼代碼以下：

    label = [[UILabel alloc] init];
    label.backgroundColor = [UIColor blackColor];
    label.textColor=[UIColor whiteColor];
    label.font=[UIFont systemFontOfSize:12];
    label.text = @"Label2";
    label.textAlignment = NSTextAlignmentCenter;
    label.size=CGSizeMake(50, 30);
    label.row=1;//第二行
    label.colum=1;//第二列
    label.columSpan=2;//跨兩列
    label.margin=UIEdgeInsetsMake(0, 0, 5, 0);
    [currentPanle addSubview:label];

效果以下：

下面介紹stackpanel的用法

先看下初始化的代碼：

 

    UILabel *label = [[UILabel alloc] init];
    label.backgroundColor = [UIColor blackColor];
    label.textColor=[UIColor whiteColor];
    label.font=[UIFont systemFontOfSize:12];
    label.text = @"Label1";
    label.textAlignment = NSTextAlignmentCenter;
    label.size=CGSizeMake(50, 50);
    [currentPanle addSubview:label];
    
    
    label = [[UILabel alloc] init];
    label.backgroundColor = [UIColor blackColor];
    label.textColor=[UIColor whiteColor];
    label.font=[UIFont systemFontOfSize:12];
    label.text = @"Label2";
    label.textAlignment = NSTextAlignmentCenter;
    label.size=CGSizeMake(50, 30);
    label.margin=UIEdgeInsetsMake(5, 0, 5, 0);
    [currentPanle addSubview:label];
    
    
    label = [[UILabel alloc] init];
    label.backgroundColor = [UIColor blackColor];
    label.textColor=[UIColor whiteColor];
    label.font=[UIFont systemFontOfSize:12];
    label.text = @"Label3";
    label.textAlignment = NSTextAlignmentCenter;
    label.size=CGSizeMake(50, 30);
    [currentPanle addSubview:label];

 

這個是垂直排列的，若是要是實現水平排列，那麼只要把stackPanel的isHorizontal屬性設爲yes就能夠了。

以上的佈局無論在橫屏和豎屏下都能正常佈局。並且自適應。

而要實現第一張圖裏面那麼複雜的佈局，直接看個人demo就能夠了。

 

在下一篇我會解析下這三個類背後的原理

 

點我下載demo