升级iOS9.0后,增加了一些新特性.让们来一点点的了解一下吧.今天我们先学习一下UIstackView,因为它是新特性里给我们在布局方面带来很大便利的控件.以前我们要想布局三个视图(图1)我们会给他们三个视图设置相互的约束关系,如果其中的一个约束发生变化其他也会发生变化 ,这样我们又要重新改一下约束.
图1
但是在UIStackView我们实现这个效果就很简单了.使用UIStackView方式不外乎代码和xib.我们先以xib为例写一下,这样比较直观.
一.xib 实现
1.xib拖拽UIStackView
图2
然后再设置关于UIStackView的几个重要的属性:
UIStackView属性
axis: 设置UIStackView布局的方向：水平方向或垂直方向。
alignment:主要设置非轴方向子视图的对齐方式。
distribution:设置轴方向上子视图的分布比例.如果axis是水平方向，也即设置子视图的宽度，如果axis是垂直方向，则是设置子视图的高度。
spacing:控制子视图之间的间隔大小.
详细的属性介绍请看:iOS中UIStackView相关属性理解 .
二. 代码的方式实现
1.UIStackView 的实例
UIStackView *stackView = [[UIStackView alloc] initWithFrame:CGRectMake(0, 80, 300, 300)];
//设置水平方向
stackView.axis = UILayoutConstraintAxisVertical;
stackView.spacing = 10.0;
stackView.alignment = UIStackViewAlignmentFill;
stackView.distribution = UIStackViewDistributionFillEqually;
[self.view addSubview:stackView];
UILabel *topView = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
topView.backgroundColor = [UIColor cyanColor];
UILabel *middleView = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 80, 70)];
middleView.backgroundColor = [UIColor orangeColor];
UILabel *bottomView = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 60, 60)];
bottomView.backgroundColor = [UIColor yellowColor];
[stackView addArrangedSubview:topView];
[stackView addArrangedSubview:middleView];
[stackView addArrangedSubview:bottomView];
出来的效果是这样的:
运行效果
具体的其他属性的组合和样式大家参考iOS中UIStackView相关属性理解自己设置一下,顺便练习一下.
三.总结
1.从上面的的代码中大家可能注意到了为什么所有的view起始点都是(0,0)但是却没有覆盖在一起呢?
是因为我们在往UIStackView中添加的视图的时候调用的是:
[stackView addArrangedSubview:topView];
而不是
[self.view addSubview:stackView];
此处千万不要惯性思维用addSubview:这个方法.否则的效果就是这样的:
用addSubview:后的效果
这个时候我们就范老毛病了(哎,我加的没错啊,代码是一样一样的啊,咋回事啊!)你好好看看是一样一样的吗.(坏笑)
2.UIStackView的使用很灵活,千万不要有一个UIStackView就可以解决所有布局的思想误区.其实UIStackView的子View也同样可以是UIStackView.只有多个UIStackView组合才能实现比较复杂的界面效果.就看你是怎么构思的了.在写界面前一定要构思好再动手去做.磨刀不误砍柴工嘛.
3.有些人觉得让我空想构思也不太熟练啊,好吧,我有高招甩你个链接多练习练习就好了.我也是在学习中.UIStackView Tutorial: Introducing Stack Views
好了大概就写到这里了.有哪里做的不好的地方请大家都提出来,我会认真改正的.多谢!
网友评论