大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > IOS技巧 > IOS 自动布局-UIStackPanel和UIGridPanel(一)

IOS 自动布局-UIStackPanel和UIGridPanel(一)

关键词:布局IOSUIGridPanelUIStackPane  阅读(691) 赞(13)

[摘要]本文是对IOS 自动布局-UIStackPanel和UIGridPanel(一)的讲解,对学习IOS苹果软件开发有所帮助,与大家分享。

我以前是做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



相关评论