天天看點

UIStackView 結合UIScrollView滑動顯示

  大家好,今天分享一下IOS9中新出的UIStackView,網絡上相關的文章還是有一些,但大部分内容都差不多,是以我的講解方式可能給他們不一樣,那我盡量以最簡單明了的方式讓大家快速了解,這個我從描述UIStackView的定義的時候,相信你就能看的出來OK,我們開始吧。

1,UIStackView到底是個什麼東西?

   UIStackView看字面意思,就是在UIView中插入了一個Stack, Stack是什麼意思了,查下字典,“堆疊,排列”, 沒錯,UIStackView就是用來排列其它子View的容器,而且這個排列是線性的,什麼意思?也就是說要麼橫向排列,要麼縱向排列,你不能橫縱交替,像下圖,



UIStackView 結合UIScrollView滑動顯示

那也許你腦海裡就在想“我好像在那兒看到UIStackView做出來的就是縱橫交替的了,像下面這樣子了”

UIStackView 結合UIScrollView滑動顯示

  那我告訴你,他就是用的兩個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>
           

運作效果如下(可滑動):

UIStackView 結合UIScrollView滑動顯示

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