大家好,今天分享一下IOS9中新出的UIStackView,网络上相关的文章还是有一些,但大部分内容都差不多,所以我的讲解方式可能给他们不一样,那我尽量以最简单明了的方式让大家快速理解,这个我从描述UIStackView的定义的时候,相信你就能看的出来OK,我们开始吧。
1,UIStackView到底是个什么东西?
UIStackView看字面意思,就是在UIView中插入了一个Stack, Stack是什么意思了,查下字典,“堆叠,排列”, 没错,UIStackView就是用来排列其它子View的容器,而且这个排列是线性的,什么意思?也就是说要么横向排列,要么纵向排列,你不能横纵交替,像下图,
那也许你脑海里就在想“我好像在那儿看到UIStackView做出来的就是纵横交替的了,像下面这样子了”
那我告诉你,他就是用的两个UIStackView 容器做出来的,横向一个,纵向一个,那这样的话就可以做出很复杂的布局了。
2, 如何应用UIStackView到项目中?
我现在想纵向排列100个BUTTON,可以用UIStackView吧?当然可以,那就先NEW一个UIStackView对象吧,这个很容易想到,NEW之后了,要指明排列方向吧,这样它才知道是横着排了,还是竖着排。这两个设置就绪后,一个基本的容器就算建成了,接下来就就是将100个BUTTON放到容器里了,放进去就完了吗?对,放进去就完了。稍后我会把代码帖出来,再对着看一下就更明了了。
3,UIStackView如何结合UIScrollView使用?
100个BUTTON,在一屏上肯定是显示不全的,那怎么办了 UIStackView没有自带scrollView的,那就只能用自已结合ScrollView来实现了。好吧,其实实现也很简单,首先创建一个scrollView,然后把stackView放到scrollView中去就可以了,当然要使其滑动,需要正确设置scrollView的contentSize,描述就是这样的。作为程序员,我相信最拿手的活就是看代码了,好吧, 废话不多说,上代码(注意:在layout时,使用了masonry,此文不作讲解):
4,重要代码即注解
@available(iOS 9.0, *) //因为UIStackView是IOS9.0中才有的,所以这儿要申明一下
class TestStackViewController: BaseViewController {
var scrollView: UIScrollView!
var stackView: UIStackView!
override func viewDidLoad(){
super.viewDidLoad()
//创建scrollView, 置于self.view之上
scrollView = UIScrollView()
view.addSubview(scrollView)
self.scrollView.snp_makeConstraints { (make) -> Void in
make.edges.equalTo(self.view)
}
//创建容器,并设为竖直排列,置于scrollView上
stackView = UIStackView()
stackView.axis = .Vertical
scrollView.addSubview(stackView)
self.stackView.snp_makeConstraints { (make) -> Void in
make.top.equalTo(self.scrollView)
make.left.equalTo(self.scrollView)
make.right.equalTo(self.scrollView)
make.width.equalTo(self.scrollView)
}
//创建100个BUTTON
for index in 1 ..< 100 {
let button = UIButton(type: UIButtonType.System)
button.setTitle("Button" + String(index), forState: .Normal)
stackView.addArrangedSubview(button) //将BUTTON放于stackView容器中,此后不需要设置BUTTON的任何约束,就能实现从上到下排列显示,宽高都是自适应大小,注意这儿必须要用addArrangedSubview而不能用addSubView
button.frame = CGRectMake(0, 60, 300, 90) //不用设FRAME了,设了也不会起作用的,因为stackView会自动去添加一些约束。
button.backgroundColor = UIColor.randomColor()
button.snp_makeConstraints(closure: { (make) -> Void in
make.height.equalTo(60)//不能设FRAME,但设置约束就有效果了,所以在这儿可以更新BUTTON的显示
})
}
}
override func viewDidLayoutSubviews(){
super.viewDidLayoutSubviews()
//我们知道contentSize必须大于SIZE,在某个方向才能滑动。所以这儿需要设置contentSize,为什么要在这儿设了,因为这个地方刚好布局完成,所有的VIEW都有了明确的frame值,而你在viewDidLoad中去设置的话,frame值都还为0,结果会不违你所愿的。
scrollView.contentSize = CGSize(width: stackView.frame.width, height: stackView.frame.height)
}
}</span>
运行效果如下(可滑动):
5,UIStackView使用属性和方法说明:
//构造方法,views为需要排列到StackView中的子Views
public init(arrangedSubviewsviews: [UIView])
//返回StackView中装入的Views
public var arrangedSubviews:[UIView] { get }
//往StackView中装入一个View
public func addArrangedSubview(view: UIView)
//从StackView中移除一个View
public func removeArrangedSubview(view: UIView)
//插入一个View到指定的Index
public func insertArrangedSubview(view: UIView, atIndexstackIndex: Int)
//设置排列方向,横向还是纵向,默认是横向
public var axis: UILayoutConstraintAxis
//属性决定了其管理的视图在沿着其轴向上的布局
public var distribution: UIStackViewDistribution
//(对齐)属性决定了其管理的视图在垂直于其轴向上的布局;比如Center居中对齐, Fill,填满, Leading,起点对齐等。
public var alignment: UIStackViewAlignment
//设置每个View间的间距,如果是横向排列的话,就是横向间距,纵向的话,就是纵向间距。
public var spacing: CGFloat
public var baselineRelativeArrangement: Bool
public var layoutMarginsRelativeArrangement: Bool