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控件,开发中为我们省去了繁琐的代码 ...
随机推荐
- WebClient 访问间歇性返回403解决方案
说明:前段时间做的一个项目莫名的返回403的错误,这种情况也多大是程序员最不喜欢的了,没办法先来分析一下错误信息.之前的代码如下: WebClient webclient = new WebClien ...
- svn up 提示：Skipped '.'
>svn up Skipped '.' >svn cleanup '.' is not a working copy directory >svn co https://192.16 ...
- 【gcd】 最大公约数
int gcd(int a,int b) { int r; ) { r=a%b; a=b; b=r; } return a; }
- KVO & 通知 小记
KVO的全称是Key-Value Observing,它实现了一种机制,对所关心的属性对象添加观察者,当属性值发生变化时会得到通知,我们可以对变化做相应的处理.看过设计模式的同学应该知道,这是一种典型 ...
- cc2530 寄存器PICTL理解
- Qt5：Qt中一些函数功能介绍
1 .setContentsMargins 该函数用于设置窗口客户区中,四周空白边框的尺寸 , 类似于 word 中的 页边距设置 2.canonical Path 返回文件路径的规范路径 , 也就 ...
- 神经网络joone_engin模式识别示范，eclipse
链接: http://pan.baidu.com/s/1kVRducv 密码: junw
- 理解MySQL——索引与优化(转)
转自:http://www.cnblogs.com/hustcat/archive/2009/10/28/1591648.html 写在前面:索引对查询的速度有着至关重要的影响,理解索引也是进行数据库 ...
- jQuery方式事件冒泡的2个方法
方式1:通过 event.stopPropagation(); $("div").click(function (event) { slide.call(this); event ...
- html精确定位
1.offsetwidth.offsetHeight是指包含border的元素宽高. 2.clientWidth.clientHeight是指不包含border的元素宽高. 3.scrollWidth ...