iOS 之 UIStackView
UIStackView是iOS9新推出的布局控件，它的出现，可以说颠覆了以往的布局方式。
问题时，如果我使用UIStackView，它能用在iOS7、8系统中吗？
我要测试一下。测试程序我放到github上面，点击这里进入github地址。
1. 使用UIStackView
代码实现：
/**
* 创建stackView布局视图
*/
-(void)makeUIofStackView{
CGRect rect = CGRectMake(0, 0, m_frameInfo.width, m_frameInfo.height);
m_mainStackView = [[UIStackView alloc] initWithFrame:rect]; /**
* 因为继承于UIView，所以有backgroundColor属性。
* 布局控件，设置背景色也是没有用的
*/
m_mainStackView.backgroundColor = [UIColor redColor]; [self.view addSubview:m_mainStackView];
}
现在创建了一个布局控件，它占据了整个视图的大小，所以，它负责整个页面的布局。
2. 添加子视图
/**
* 在stackview中添加视图，并设置布局属性
*/
-(void)makeUIStackViewAddViewsWithDistribution:(UIStackViewDistribution)distribution{ m_mainStackView.distribution = distribution; UIView *blueView = [[UIView alloc] init];
UIView *greenView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
greenView.backgroundColor = [UIColor greenColor]; [m_mainStackView addArrangedSubview:blueView];
[m_mainStackView addArrangedSubview:greenView]; }
distribution就是“布局”的意思。那么，distribution的属性共有哪些呢？
2.1. UIStackViewDistributionFill
默认的distribution是 “UIStackViewDistributionFill” ,它代表每一个子视图都填满整个UIStackView的全部范围。这样，就会只显示第一个视图，其它的视图都显示到整个屏幕之外，或者没有显示，内部的设置我就不清楚了。
2.2. UIStackViewDistributionFillEqually
里面的各个元素的空间是相等的，并且各个元素都填满所在空间。
2.2. UIStackViewDistributionFillProportionally
2.2.1. 添加三个视图，并设置视图大小
/**
* 在stackview中添加视图，并设置布局属性
*/
-(void)makeUIStackViewAddViewsWithDistribution:(UIStackViewDistribution)distribution{ m_mainStackView.distribution = distribution; CGRect rectBlue = CGRectMake(0, 0, m_frameInfo.width/6 * 3, m_frameInfo.height);
CGRect rectGreen = CGRectMake(0, 0, m_frameInfo.width/6 * 2, m_frameInfo.height);
CGRect rectRed = CGRectMake(0, 0, m_frameInfo.width/6 * 1, m_frameInfo.height); UIView *blueView = [[UIView alloc] initWithFrame:rectBlue];
UIView *greenView = [[UIView alloc] initWithFrame:rectGreen];
UIView *redView = [[UIView alloc] initWithFrame:rectRed];
blueView.backgroundColor = [UIColor blueColor];
greenView.backgroundColor = [UIColor greenColor];
redView.backgroundColor = [UIColor redColor]; [m_mainStackView addArrangedSubview:blueView];
[m_mainStackView addArrangedSubview:greenView];
[m_mainStackView addArrangedSubview:redView]; }
代码如上时，并且属性为UIStackViewDistributionFillProportionally时，只显示第三个页面。
2.2.2. 只添加两个视图，并设置视图大小
并没有根据宽度来分配，当不加入第三个页面时，也就是最后一行代码被注释掉，显示前两个View，并且是平均分布的。这是为什么呢？
2.2.3. 视图UIView换成UILalbe
感觉像是，View并不作为元素来处理吗？如果换成UILable会如何呢?
/**
* 在stackview中添加视图，并设置布局属性
*/
-(void)makeUIStackViewAddViewsWithDistribution:(UIStackViewDistribution)distribution{ m_mainStackView.distribution = distribution; CGRect rectBlue = CGRectMake(0, 0, m_frameInfo.width/6 * 3, m_frameInfo.height);
CGRect rectGreen = CGRectMake(0, 0, m_frameInfo.width/6 * 2, m_frameInfo.height);
CGRect rectRed = CGRectMake(0, 0, m_frameInfo.width/6 * 1, m_frameInfo.height); UILabel *blueView = [[UILabel alloc] initWithFrame:rectBlue];
UILabel *greenView = [[UILabel alloc] initWithFrame:rectGreen];
UILabel *redView = [[UILabel alloc] initWithFrame:rectRed];
blueView.backgroundColor = [UIColor blueColor];
greenView.backgroundColor = [UIColor greenColor];
redView.backgroundColor = [UIColor redColor]; [m_mainStackView addArrangedSubview:blueView];
[m_mainStackView addArrangedSubview:greenView];
[m_mainStackView addArrangedSubview:redView]; }
这时，它们是平均分布的
2.2.4. 视图UIView换成UILalbe，并设置不同长度的文本
感觉很诡异吗？我猜是因为UILabel的text都为空的缘故。试试填入不同的文本。
也就是说根据内容的大小，而不是根据Frame的大小。
2.2.5. 创建UIView，UILalbe，并用UIView装载UILable,同时设置它们的大小
但是，上述理论也不完全正确，我们把UIView的大小设置一下，然后再装入UILabel：
/**
* 在stackview中添加视图，并设置布局属性
*/
-(void)makeUIStackViewAddViewsWithDistribution:(UIStackViewDistribution)distribution{ m_mainStackView.distribution = distribution; CGRect rectBlue = CGRectMake(0, 0, m_frameInfo.width/6 * 3, m_frameInfo.height);
CGRect rectGreen = CGRectMake(0, 0, m_frameInfo.width/6 * 2, m_frameInfo.height);
CGRect rectRed = CGRectMake(0, 0, m_frameInfo.width/6 * 1, m_frameInfo.height); UILabel *blueLable = [[UILabel alloc] initWithFrame:rectBlue];
UILabel *greenLable = [[UILabel alloc] initWithFrame:rectGreen];
UILabel *redLable = [[UILabel alloc] initWithFrame:rectRed];
blueLable.backgroundColor = [UIColor blueColor];
greenLable.backgroundColor = [UIColor greenColor];
redLable.backgroundColor = [UIColor redColor];
blueLable.text = @"1";
greenLable.text = @"11";
redLable.text = @"111"; UIView *blueView = [[UIView alloc] initWithFrame:rectBlue];
UIView *greenView = [[UIView alloc] initWithFrame:rectGreen];
UIView *redView = [[UIView alloc] initWithFrame:rectRed]; [blueView addSubview:blueLable];
[greenView addSubview:greenLable];
[redView addSubview:redLable]; [m_mainStackView addArrangedSubview:blueView];
[m_mainStackView addArrangedSubview:greenView];
[m_mainStackView addArrangedSubview:redView]; }
会出现如下状况：
这是什么状况呢? 乍看之下，还会有点梦。这时，起始设置UIView的Frame就有效果了。实际上，蓝色的UIView占了1/2；绿色的UIView占了 1/3；红色的UIView占了 1/6；而蓝色的UIView和绿色的UIView的UILable都被挡住了，因为这三个视图都是从（0，0）点开始的。
2.2.6. 创建UIView，UILalbe，并用UIView装载UILable, 都不设置大小
/**
* 在stackview中添加视图，并设置布局属性
*/
-(void)makeUIStackViewAddViewsWithDistribution:(UIStackViewDistribution)distribution{ m_mainStackView.distribution = distribution; CGRect rectBlue = CGRectMake(0, 0, m_frameInfo.width/6 * 3, m_frameInfo.height);
CGRect rectGreen = CGRectMake(0, 0, m_frameInfo.width/6 * 2, m_frameInfo.height);
CGRect rectRed = CGRectMake(0, 0, m_frameInfo.width/6 * 1, m_frameInfo.height); UILabel *blueLable = [[UILabel alloc] init];
UILabel *greenLable = [[UILabel alloc] init];
UILabel *redLable = [[UILabel alloc] init];
blueLable.backgroundColor = [UIColor blueColor];
greenLable.backgroundColor = [UIColor greenColor];
redLable.backgroundColor = [UIColor redColor];
blueLable.text = @"1";
greenLable.text = @"11";
redLable.text = @"111"; UIView *blueView = [[UIView alloc] init];
UIView *greenView = [[UIView alloc] init];
UIView *redView = [[UIView alloc] init]; [blueView addSubview:blueLable];
[greenView addSubview:greenLable];
[redView addSubview:redLable]; [m_mainStackView addArrangedSubview:blueView];
[m_mainStackView addArrangedSubview:greenView];
[m_mainStackView addArrangedSubview:redView]; }
效果如下；
什么都没有显示，这倒可以理解，因为内容都为空。
2.2.7. 创建UIView，UILalbe，并用UIView装载UILable, 只设置UILable的大小
/**
* 在stackview中添加视图，并设置布局属性
*/
-(void)makeUIStackViewAddViewsWithDistribution:(UIStackViewDistribution)distribution{ m_mainStackView.distribution = distribution; CGRect rectBlue = CGRectMake(0, 0, m_frameInfo.width/6 * 3, m_frameInfo.height);
CGRect rectGreen = CGRectMake(0, 0, m_frameInfo.width/6 * 2, m_frameInfo.height);
CGRect rectRed = CGRectMake(0, 0, m_frameInfo.width/6 * 1, m_frameInfo.height); UILabel *blueLable = [[UILabel alloc] initWithFrame:rectBlue];
UILabel *greenLable = [[UILabel alloc] initWithFrame:rectGreen];
UILabel *redLable = [[UILabel alloc] initWithFrame:rectRed];
blueLable.backgroundColor = [UIColor blueColor];
greenLable.backgroundColor = [UIColor greenColor];
redLable.backgroundColor = [UIColor redColor];
blueLable.text = @"1";
greenLable.text = @"11";
redLable.text = @"111"; UIView *blueView = [[UIView alloc] init];
UIView *greenView = [[UIView alloc] init];
UIView *redView = [[UIView alloc] init]; [blueView addSubview:blueLable];
[greenView addSubview:greenLable];
[redView addSubview:redLable]; [m_mainStackView addArrangedSubview:blueView];
[m_mainStackView addArrangedSubview:greenView];
[m_mainStackView addArrangedSubview:redView]; }
这就已经很诡异了，还能再诡异一点吗？
2.2.8. 创建UIView，UILalbe，并用UIView装载UILable, 只设置UIView的大小
/**
* 在stackview中添加视图，并设置布局属性
*/
-(void)makeUIStackViewAddViewsWithDistribution:(UIStackViewDistribution)distribution{ m_mainStackView.distribution = distribution; CGRect rectBlue = CGRectMake(0, 0, m_frameInfo.width/6 * 3, m_frameInfo.height);
CGRect rectGreen = CGRectMake(0, 0, m_frameInfo.width/6 * 2, m_frameInfo.height);
CGRect rectRed = CGRectMake(0, 0, m_frameInfo.width/6 * 1, m_frameInfo.height); UILabel *blueLable = [[UILabel alloc] init];
UILabel *greenLable = [[UILabel alloc] init];
UILabel *redLable = [[UILabel alloc] init];
blueLable.backgroundColor = [UIColor blueColor];
greenLable.backgroundColor = [UIColor greenColor];
redLable.backgroundColor = [UIColor redColor];
blueLable.text = @"1";
greenLable.text = @"11";
redLable.text = @"111"; UIView *blueView = [[UIView alloc] initWithFrame:rectBlue];
UIView *greenView = [[UIView alloc] initWithFrame:rectGreen];
UIView *redView = [[UIView alloc] initWithFrame:rectRed]; [blueView addSubview:blueLable];
[greenView addSubview:greenLable];
[redView addSubview:redLable]; [m_mainStackView addArrangedSubview:blueView];
[m_mainStackView addArrangedSubview:greenView];
[m_mainStackView addArrangedSubview:redView]; }
这时你能猜到什么情况吗？
2.2.9. 只添加Lable 字体居中
/**
* 在stackview中添加视图，并设置布局属性
*/
-(void)makeUIStackViewAddViewsWithDistribution:(UIStackViewDistribution)distribution{ m_mainStackView.distribution = distribution; CGRect rectBlue = CGRectMake(0, 0, m_frameInfo.width/6 * 3, m_frameInfo.height);
CGRect rectGreen = CGRectMake(0, 0, m_frameInfo.width/6 * 2, m_frameInfo.height);
CGRect rectRed = CGRectMake(0, 0, m_frameInfo.width/6 * 1, m_frameInfo.height); UILabel *blueLable = [[UILabel alloc] initWithFrame:rectBlue];
UILabel *greenLable = [[UILabel alloc] initWithFrame:rectGreen];
UILabel *redLable = [[UILabel alloc] initWithFrame:rectRed];
blueLable.backgroundColor = [UIColor blueColor];
greenLable.backgroundColor = [UIColor greenColor];
redLable.backgroundColor = [UIColor redColor];
blueLable.text = @"1";
greenLable.text = @"11";
redLable.text = @"111";
blueLable.textAlignment = NSTextAlignmentCenter;
greenLable.textAlignment = NSTextAlignmentCenter;
redLable.textAlignment = NSTextAlignmentCenter; [m_mainStackView addArrangedSubview:blueLable];
[m_mainStackView addArrangedSubview:greenLable];
[m_mainStackView addArrangedSubview:redLable]; }
效果如下
2.2.x. 总结
我觉得在UIStackView中，还是不要用UIView吧，直接用UILable这类控件就好了。并且，我能把握住的属性还是平均分布 UIStackViewDistributionFillEqually。如果要用此属性，还得总结。
2.3. UIStackViewDistributionEqualSpacing
从名字看，是各个元素直接的间隙相等。另外，还有一个隐含的意思，就是有间隙；那么，还有另外一个意思，就是UILable的长度是有限的，那么，怎么个有限法呢？就是根据内容的长度来设定的，内容多大，长度就多大。
2.3.1. UILable + 文字长度不同 + 不设置大小
/**
* 在stackview中添加视图，并设置布局属性
*/
-(void)makeUIStackViewAddViewsWithDistribution:(UIStackViewDistribution)distribution{ m_mainStackView.distribution = distribution; UILabel *blueLable = [[UILabel alloc] init];
UILabel *greenLable = [[UILabel alloc] init];
UILabel *redLable = [[UILabel alloc] init];
UILabel *blackLable = [[UILabel alloc] init];
UILabel *yellowLable = [[UILabel alloc] init];
UILabel *pinkLable = [[UILabel alloc] init]; blueLable.backgroundColor = [UIColor blueColor];
greenLable.backgroundColor = [UIColor greenColor];
redLable.backgroundColor = [UIColor redColor];
blackLable.backgroundColor = [UIColor blackColor];
yellowLable.backgroundColor = [UIColor yellowColor];
pinkLable.backgroundColor = [UIColor purpleColor]; blueLable.text = @"1";
greenLable.text = @"11";
redLable.text = @"111";
blackLable.text = @"1";
yellowLable.text = @"11";
pinkLable.text = @"111";
blueLable.textAlignment = NSTextAlignmentCenter;
greenLable.textAlignment = NSTextAlignmentCenter;
redLable.textAlignment = NSTextAlignmentCenter;
blackLable.textAlignment = NSTextAlignmentCenter;
yellowLable.textAlignment = NSTextAlignmentCenter;
pinkLable.textAlignment = NSTextAlignmentCenter; [m_mainStackView addArrangedSubview:blueLable];
[m_mainStackView addArrangedSubview:greenLable];
[m_mainStackView addArrangedSubview:redLable];
[m_mainStackView addArrangedSubview:blackLable];
[m_mainStackView addArrangedSubview:yellowLable];
[m_mainStackView addArrangedSubview:pinkLable]; }
效果如下：
可以看出，UIStackViewDistributionEqualSpacing属性的潜台词是，各个UILable是根据内容来设置大小的，内容多大，在这里，宽度就多大。剩余的空间是平均分配的。
2.3.2. UILable + 文字长度不同 + 设置UILable大小
/**
* 在stackview中添加视图，并设置布局属性
*/
-(void)makeUIStackViewAddViewsWithDistribution:(UIStackViewDistribution)distribution{ m_mainStackView.distribution = distribution; CGRect rectBlue = CGRectMake(0, 0, m_frameInfo.width/6 * 3, m_frameInfo.height);
CGRect rectGreen = CGRectMake(0, 0, m_frameInfo.width/6 * 2, m_frameInfo.height);
CGRect rectRed = CGRectMake(0, 0, m_frameInfo.width/6 * 1, m_frameInfo.height);
CGRect rectBlack = CGRectMake(0, 0, m_frameInfo.width/6 * 3, m_frameInfo.height);
CGRect rectYellow = CGRectMake(0, 0, m_frameInfo.width/6 * 2, m_frameInfo.height);
CGRect rectPurple = CGRectMake(0, 0, m_frameInfo.width/6 * 1, m_frameInfo.height); UILabel *blueLable = [[UILabel alloc] initWithFrame:rectBlue];
UILabel *greenLable = [[UILabel alloc] initWithFrame:rectGreen];
UILabel *redLable = [[UILabel alloc] initWithFrame:rectRed];
UILabel *blackLable = [[UILabel alloc] initWithFrame:rectBlack];
UILabel *yellowLable = [[UILabel alloc] initWithFrame:rectYellow];
UILabel *purpleLable = [[UILabel alloc] initWithFrame:rectPurple]; blueLable.backgroundColor = [UIColor blueColor];
greenLable.backgroundColor = [UIColor greenColor];
redLable.backgroundColor = [UIColor redColor];
blackLable.backgroundColor = [UIColor blackColor];
yellowLable.backgroundColor = [UIColor yellowColor];
purpleLable.backgroundColor = [UIColor purpleColor]; blueLable.text = @"1";
greenLable.text = @"11";
redLable.text = @"111";
blackLable.text = @"1";
yellowLable.text = @"11";
purpleLable.text = @"111";
blueLable.textAlignment = NSTextAlignmentCenter;
greenLable.textAlignment = NSTextAlignmentCenter;
redLable.textAlignment = NSTextAlignmentCenter;
blackLable.textAlignment = NSTextAlignmentCenter;
yellowLable.textAlignment = NSTextAlignmentCenter;
purpleLable.textAlignment = NSTextAlignmentCenter; [m_mainStackView addArrangedSubview:blueLable];
[m_mainStackView addArrangedSubview:greenLable];
[m_mainStackView addArrangedSubview:redLable];
[m_mainStackView addArrangedSubview:blackLable];
[m_mainStackView addArrangedSubview:yellowLable];
[m_mainStackView addArrangedSubview:purpleLable]; }
效果一样，说明设置Frame大小无用
2.4. UIStackViewDistributionEqualCentering
同样，该属性标明：实例中的元素UILable的长度是根据内容的大小来设置的，内容多大，宽度就多大。
2.3.1. UILable + 文字长度不同 + 不设置大小
只是更改了一个
UIStackViewDistributionEqualCentering属性
不再上代码
效果如下：
可以看出，各个UILable之间的间隙是不同的，但是每个UILabel中心店之间的距离是相同的。
2.3.2. UILable + 文字长度不同 + 设置大小
跟上面的效果一样。
3. UIStackView嵌套
其实，我们会经常用到UIStackView的嵌套，通常，在大的布局上，分成几个等大的部分，然后，每个部分可能会有些不同的设置。
iOS 之 UIStackView的更多相关文章
- iOS 9: UIStackView入门
本文转自http://www.cocoachina.com/ios/20150623/12233.html 本文由CocoaChina译者candeladiao翻译,欢迎参加我们的翻译活动.原文:iO ...
- ios项目里扒出来的json文件
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #000000 } p.p2 { margin: 0.0px 0. ...
- iOS 专题 之 界面开发 之 控件
iOS 之 UIViewController iOS 之 Navagation Button iOS 之 UIButton iOS 之 UITextField iOS 之 UIStackView iO ...
- iOS下的界面布局利器-MyLayout布局框架
Swift:TangramKit: https://github.com/youngsoft/TangramKit OC:MyLayout: https://github.com/youngsof ...
- iOS - FlexBox 布局之 YogaKit
由于刚开始的项目主要用的H5.javaScript技术为主原生开发为辅的手段开发的项目,UI主要是还是H5,如今翻原生.为了方便同时维护两端.才找到这个很不错的库. FlexBox?听起来像是一门H5 ...
- fir.im Weekly - 除了写代码，还需要了解什么
雾霾天,宜撸代码.吹牛,不宜出门约会(¬_¬)ﾉ 本期 fir.im Weekly 亦如往期,收集了优秀的 iOS/Android 开发资源,GitHub 源码.前端方面的热点分享.除了代码,也许你 ...
- iOS UIStackView的理解
iOS9 提供的UIStackview简化了布局操作,它有些像Android中的liner layout.以前不用UIStackview也是可以做出类似的效果的,不过要添加许多的约束,看得头都大了,使 ...
- iOS开发——UI篇OC篇&UIStackView详解
UIStackView详解 一.继承关系.遵守协议.隶属框架及可用平台 UIStackView 类提供了一个高效的接口用于平铺一行或一列的视图组合.Stack视图使你依靠自动布局的能力,创建用户接口使 ...
- iOS 开发之UIStackView的应用
————————————————UIStackView的应用———————————————— 一:先讲下优势: 对于排布列表式控件的布局需求,用UIStackView控件,开发中为我们省去了繁琐的代码 ...
随机推荐
- 设置span的宽度
设置span的宽度 在默认的情况下,利用css样式对span进行宽度设定是无效,但有时为了某种排版的要求,需要对span进行宽度设定,那么如何在html中利用css样式设定span的宽度? 思路:这看 ...
- 半透命opacity:(0-1)，对于IE6版本不支持需要用filter：alpha（opacity=0-100）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 开发板S3C2440挂起NFS步骤
第一.安装.配置.启动FTP.SSH或NFS服务 参考韦东山的嵌入式linux应用开发完全手册 http://pan.baidu.com/s/1o79h3n0 第二.windows.linux以及开发 ...
- ZOJ 3702 Gibonacci number(数学推导)
公式推导题,G(0) = 1,G(1) = t,给出一个 i 和 G(i),要求求出G(j)的值: G(0) = 0*t + 1 G(1) = 1*t + 0; 观察t的系数和常数值可以知道二者都遵循 ...
- Chapter 1 First Sight——3
Flying doesn't bother me; the hour in the car with Charlie, though, I was a little worried about. 坐飞 ...
- API 友好
API友好 新版ThinkPHP针对API开发做了很多的优化,并且不依赖原来的API模式扩展. 数据输出 新版的控制器输出采用Response类统一处理,而不是直接在控制器中进行输出,通过设置defa ...
- HDU 4006 The kth great number 优先队列、平衡树模板题（SBT）
The kth great number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65768/65768 K (Java/Oth ...
- oracle 主键自动增长
oracle 主键自动增长 2009-12-11 16:07:00| 分类: 数据库资料|字号 订阅 这几天搞Oracle,想让表的主键实现自动增长,查网络实现如下: create tabl ...
- grep过滤搜索
cat /proc/2666/maps | busybox grep libumcpart.so
- [Big Data]Hadoop详解一
从数据爆炸开始... 一. 第三次工业革命 第一次:18世纪60年代,手工工厂向机器大生产过渡,以蒸汽机的发明和使用为标志. 第二次:19世纪70年代,各种新技术新发明不断被应 ...