我以前是做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就可以了。
在下一篇我會解析下這三個類背后的原理