我以前是做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就可以了。
在下一篇我会解析下这三个类背后的原理