浮动在 UIView 而不是 Paging 上的水平滚动视图

Question

我正在尝试做一个类似于分页类型的水平滚动视图，我在其中添加了 3 个视图。我已将滚动视图放在 UIView(myView) 上方的情节提要中并设置了约束。以下是我的约束和相同的代码 -

ScrollView 约束

我的代码相同 -

@IBOutlet weak var scrollView: UIScrollView!
@IBOutlet weak var contentView: UIView!
override func viewDidLoad()
{
    super.viewDidLoad()

    
    scrollView.frame = CGRectMake(0, 0, myView.frame.width, myView.frame.height)
    
    let view1 = UIView(frame: CGRectMake(0, 0, scrollView.frame.width, scrollView.frame.height))
    view1.backgroundColor = UIColor.blackColor()
    
    let view2 = UIView(frame: CGRectMake(scrollView.frame.width, 0, scrollView.frame.width, scrollView.frame.height))
    view2.backgroundColor = UIColor.redColor()
    
    
    let view3 = UIView(frame: CGRectMake(scrollView.frame.width*2, 0, scrollView.frame.width, scrollView.frame.height))
    view3.backgroundColor = UIColor.whiteColor()
    
    self.scrollView.addSubview(view1)
    self.scrollView.addSubview(view2)
    self.scrollView.addSubview(view3)
    
    scrollView.contentSize = CGSizeMake(self.scrollView.frame.width*3, scrollView.frame.height)
    
    // Do any additional setup after loading the view.
}

我的问题 -

1) 当我在较小的屏幕上运行滚动视图时，它会浮动。

2)我的view1,view2,view3的宽度和myView的不一样。由于 myView 使用 (0,0,0,0) ping 到视图，因此视图“view1,view2,view3”应该具有 myView 的宽度和高度，其高度应该等于 (mainView - TopView) 和宽度主视图。

请帮忙，因为我非常需要这个解决方案，但我不知道该怎么做？谢谢。

Answer 1

您对 MyView 使用约束，因此您可能应该对其他视图使用约束。使用制图在运行时进行约束的最简单方法 https://github.com/robb/Cartography 不要忘记在故事板中为滚动视图设置高度限制。

在你的 viewDidLoad 之后需要这样写：

    let views = [UIView(), UIView(), UIView()]
    views.forEach {
        self.scrollView.addSubview($0)
        constrain($0) { view1 in
            view1.left == view1.superview!.left
            view1.right == view1.superview!.right
            view1.height == view1.superview!.height
        }
    }

    constrain(views[0], views[1], views[2]) { view1, view2, view3 in
        view1.top == view1.superview!.top
        view2.top == view1.bottom
        view3.top == view2.bottom
        view3.bottom == view3.superview!.bottom
    }