大家好,今天分享一下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