如何使用Storyboard布局比Xcode 7.2上的屏幕更高的屏幕内容?

时间:2016-09-02 23:36:50

标签: ios xcode uiscrollview uistoryboard

我使用swift 2.0进行编程,我对在视图控制器上添加更多对象感到困惑。例如,我的视图控制器上需要14个按钮,并且需要约束。但我能在故事板上的视图控制器中逐个添加7个按钮。因为没有更多的地方在视图控制器上添加对象。那么,如何在故事板上的视图控制器中添加多个对象?请参考以下屏幕截图。感谢您的帮助朋友。

在故事板上查看控制器:

enter image description here

我只能添加7个具有适当约束的按钮。但我需要添加14个具有适当约束的按钮。当滚动视图控制器时,按钮8到14将分别一个一个地显示按钮1到7。

iPhone 5上没有滚动视图的输出

enter image description here

带有滚动视图的iPhone 4s输出:

enter image description here 我在iPhone 5上需要这样,但需要14个按钮。 8到14个按钮分别排列1到7个按钮。

3 个答案:

答案 0 :(得分:3)

你可以将它放在故事板中。

  1. 单击viewController,然后在 Size Inspector 中,将模拟大小设置为 Freeform ,并将宽度设置为3201136的高度。这将给你一个高瘦的布局。

    Freeform layout

  2. 添加一个scrollView。将scrollView调整为全屏。将其四边都固定在superView上。

  3. 向scrollView添加UIView。这是你的contentView。将内容视图调整为全屏。将其四边都固定在scrollView上。
  4. 在contentView和scrollView之间设置 Equal Widths 约束。这只允许它垂直滚动。
  5. 为contentView设置1136的高度限制。
  6. 在高大的viewController中布置14个按钮。

    Xcode showing the tall viewController with 14 buttons

  7. 运行时,您的contentView将滚动。

    demo in iPhone 5 simulator

答案 1 :(得分:1)

您可以使用一些代码而非故事板轻松添加按钮。

    let scrView = UIScrollView(frame: CGRect(x: 0, y: 0, width: SCR_W, height: SCR_H))
    for idx in 1...14 {
        let button = UIButton(frame: CGRectMake(0, 0, btnWidth, btnHeight))
        button.center = CGPointMake(SCR_W/2, offset * idx)
        button.setTitle("Button\(idx)", forState: .Normal)
        button.tag = idx
        button.addTarget(self, action: #selector(self.onClick(_:)), forControlEvents: .TouchUpInside)
        scrView.addSubview(button)
    }

    scrView.contentSize = CGSizeMake(SCR_W, offset * 14)
    self.view.addSubView(scrView)

    -------->

    func onClick(let btn:UIButton) -> Void {
    switch btn.tag {
       case 1:
       case 2:
       case 3: 
     ...  ... ...
       default:

    }
}

答案 2 :(得分:0)

您可以在Storyboard中更改viewController大小。

选择viewController并将大小更改为Freedom(图1)

enter image description here

import android.support.v7.app.AppCompatActivity; 

选择viewController视图并更改框架。 (fig2。)

enter image description here

   fig1.