Storyboard 方式
拖入一个 scrollView,设置其四个边距
设置 ScrollView
像普通的 view 设好约束后,如图 Xcode 会提示 UIScrollView 的可滚动大小是根据子视图的约束自动计算的。
报错
代码添加 UIScrollView 的约束时,需要设置一个 contentView(代码设置方式会放到后面),UIScrollView 的滚动区域由 contentView 决定。那么在 storyboard 里一样加入一个 view 作为 contentView
contentViewcontentView 的四边与 scrollView 边距为0,width 设为相等(因为是上下滑动,如果左右滑动,则将 height 设为相等
content 拖线到 scroll此时 scroll 的宽已经确定,但高还未确定,在 content 里拖入 subview,设置它们的顶边距与底边距
button 拖线到 content所有subview 都加在 contentView 上就好,一般是最上面的一个 subview 约束顶边距,最下面的一个 subview 约束底边距,这里只有一个 button,就都设置在 button 上了。把顶边距和底边距调高(如 1000)可以看到 content 被撑大。
设置完成后,选中 view,滑动鼠标滚轮,可以设置 view 超出屏幕的部分。选中 contentView 的子 view,滑动滚轮,也可以看到滑动效果
滑动效果其实只要照着代码来拖线,基本不会有问题
代码设置(需要 moya)
import Moya
private lazy var content: UIView = {
let v = UIView()
scroll.addSubview(v)
v.snp.makeConstraints { (make) in
make.leading.trailing.top.bottom.equalToSuperview()
make.width.equalToSuperview()
}
return v
}()
lazy var scroll: UIScrollView = {
var v = UIScrollView()
view.addSubview(v)
v.showsVerticalScrollIndicator = false
v.showsHorizontalScrollIndicator = false
v.snp.makeConstraints { (make) in
make.leading.trailing.top.bottom.equalToSuperview()
} return v
}()
// subviews
// ...
lazy var bottomView: UIView = {
var v = UIView()
content.addSubview(v) // 所有 subview 都加在 content 上
return v
}()
bottomView.snp.makeConstraints { (make) in
make.leading.equalTo(15)
make.trailing.equalTo(-15)
make.top.equalTo(tipLabel.snp.bottom).offset(8) // 确定顶边距
make.height.equalTo(40)
make.bottom.equalToSuperview().offset(-20) // 最下面的控件添加这一行
}
网友评论