我以前是做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)三个类。
我先介绍下这三个类的使用方法
下面先放两张竖屏和横屏的对比截图
上面是竖屏的。
上图是横屏的
上面的截图中除了黑色的是uilable和一个clicke me的一个按钮以外,其他每种颜色代表一个uipanel,panel里面嵌套其他的panel就组成了如上图的布局界面。点击按钮以后还能看到随着属性的改变,布局的方式也会改变。
下面我以代码的形式介绍各个panel的用法。
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