以编程方式使用滚动视图

时间:2017-11-16 18:09:32

标签: ios swift uiview pure-layout

我正在尝试使用仅以编程方式创建的UI开发应用程序。 我想创建一个简单的视图,它是一个UIScrollView(能够在键盘出现时滚动视图)和一个containerView(UIView),我们可以在其中找到一个按钮。

我使用PureLayout更容易设置约束,swift 4,Xcode 9.2 beta

在此视图的类下面

class SimpleView: UIScrollView {

var containerView: UIView!
var signInButton: UIButton!
var signInLabel: UILabel!

var screenSize: CGSize = CGSize.zero

var shouldSetupConstraints = true

override init(frame: CGRect) {
    super.init(frame: frame)

    self.screenSize = frame.size

    self.containerView = UIView(frame: CGRect.zero)
    self.signInButton = UIButton(frame: CGRect.zero)
    self.signInLabel = UILabel(frame: CGRect.zero)

    self.addSubview(self.containerView)

    self.containerView.addSubview(self.signInButton)

    self.signInButton.addSubview(self.signInLabel)
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}

override func updateConstraints() {
    if(shouldSetupConstraints) {

        self.layoutSignInButton()
        self.layoutSignInLabel()

        shouldSetupConstraints = false
    }
    super.updateConstraints()


}


private func layoutContainerView() {
    self.containerView.autoPinEdgesToSuperviewEdges()
    self.containerView.backgroundColor = UIColor.yellow
}

private func layoutSignInButton() {
    self.signInButton.autoPinEdge(toSuperviewEdge: .right)
    self.signInButton.autoPinEdge(toSuperviewEdge: .left)
    self.signInButton.autoPinEdge(toSuperviewEdge: .top)
    self.signInButton.autoSetDimension(.height, toSize: 55.0)

    self.signInButton.backgroundColor = UIColor(hex: "#FD9FA2")
}

private func layoutSignInLabel() {
    self.signInLabel.autoPinEdgesToSuperviewEdges()

    self.signInLabel.shadowColor = UIColor(hex: "#9A615E")
    self.signInLabel.shadowOffset = CGSize(width: 0.0, height: 2)
    self.signInLabel.text = NSLocalizedString("SIGN IN", comment: "")
    self.signInLabel.textAlignment = .center
    self.signInLabel.textColor = UIColor.white
    self.signInLabel.font = UIFont.boldSystemFont(ofSize: 15.0)
    self.signInLabel.backgroundColor = UIColor.clear
}

}

下面嵌入前一个视图的UIViewController子类的代码

class SignInViewController: UIViewController {

var simpleView: SimpleView!

override func viewDidLoad() {
    super.viewDidLoad()

    self.simpleView = SimpleView(frame: self.view.bounds) // with SimpleView(frame: self.view.frame) has the same behaviour
    self.view.addSubview(self.simpleView)

    self.simpleView.autoPinEdgesToSuperviewEdges()
    self.navigationController?.navigationBar.isHidden = true

}
}

不幸的是,结果不是预期的结果:见下文

我错过了什么? 缺少不同的点:   - 按钮的位置很奇怪(按钮和按钮的顶部/左侧之间的空间部分隐藏在屏幕之外)   - 容器视图不可见(backgroundColor = UIColor.yellow无效)

提前谢谢你!

////////////////////////////编辑////////////////// //////////////

使用UIView代替UIScrollView

的完全相同代码的屏幕截图
Class SimpleView: UIView {

enter image description here

1 个答案:

答案 0 :(得分:0)

UIScrollView的内容还必须定义滚动视图的.contentSize`。

我不使用PureLayout,所以我不知道语法是什么,但在你的layoutContainerView()函数中,你还需要这样做:

self.containerView ... set width dimension to SuperviewWdith

这会将containerView内容设置为滚动视图的宽度,这应该会修复宽度部分。

我假设您将向containerView添加元素并设置其约束以控制它的高度。