本文正在参加「金石计划 . 瓜分6万现金大奖」
前言
接上一篇,Swift:使用enum抹平数组元素差异,我通过将业务数数据,封装成为一个枚举带参的数组集合,将这个数组作为数据源去驱动UITableView显示页面,并且保证了页面的灵活性。
在留言中,有掘友提出可以通过使用UIScrollView+UIStackView
的方法来构建页面。觉得是一个非常不错的点子,于是立即实践了一下。
基本思路
我们先还是回到业务数据枚举:
enum BusinessPart {
case a(APart)
case b(BPart)
case c(CPart)
case d(DPart)
}
我们的DataSource
数据源是这样的:
let dataSource = [a(aPart), b(bPart), c(cPart), d(dPart)]
如何将一个dataSource变成一个view呢?我们可以尝试在enum BusinessPart
添加这样一个分类:
extension BusinessPart {
var view: UIView {
switch self {
case .a(let aPart):
let aView = AView()
aview.aPart = aPart
return aView
case .b(let bPart):
let bView = BView()
bView.bPart = bPart
return bView
case .c(let cPart):
let cView = CView()
cView.cPart = cPart
return cView
case .d(let dPart):
let dView = DView()
dView.dPart = dPart
return dView
}
}
}
写完这个分类后,我们就可以通过map
函数来将枚举数组转换成为view数组了:
let views = ds.map { $0.view }
后面将其加入到UIStackView就可以了:
let stackView = UIStackView(arrangedSubviews: views)
至于如何配置stackView的间距,方向,这些大家看看UIStackView
的API就可以啦。
UIScrollView+UIStackView,ScrollView如何滑动
如果大家之前有过通过SnapKit
在UIScrollView
上添加子View
的经历,一般都会知道,要保证ScrollView
可以正常滑动,一般情况下,我们需要先要在ScrollView
上面添加一个contentView
,接着再将子View
添加了到contentView
上。
并且在最后一个子View
进行布局的时候,对contentView
的布局做一次布局更新,保证contentView
的底部等于最后一个子View
的底部。
大家想如何保证ScrollView可以滑动?由ScrollView的contentSize
属性决定。
很久之前看过@bestswifter大神的博客(该博客目前好像没有维护了),在ScrollView中添加contentView
,并且在contentView添加子View
,最后更新contentView
的layout以达到更新ScrollView的contentSize
的更新,从而保证可以滑动。
而这个细节在UIScrollView+UIStackView
的布局结构上同样需要注意!!!
scrollView.addSubview(stackView)
stackView.snp.makeConstraints { make in
make.edges.equalToSuperview()
}
在stackView.axis = .vertical
时,你会发现ScrollView在纵向根本就无法滚动,必须像之前UIScrollView
上面添加子View
的经验,添加一个contentView
才行:
private func verticalLayout() {
stackView.axis = .vertical
stackView.spacing = 20
stackView.alignment = .fill
view.addSubview(scrollView)
scrollView.snp.makeConstraints { make in
make.edges.equalToSuperview()
}
let contentView = UIView()
scrollView.addSubview(contentView)
contentView.snp.makeConstraints { make in
make.edges.equalToSuperview()
make.width.equalTo(kScreenWidth)
}
contentView.addSubview(stackView)
stackView.snp.makeConstraints { make in
make.edges.equalToSuperview()
make.bottom.equalTo(contentView.snp.bottom)
}
for _ in 0..<20 {
stackView.addArrangedSubview(circle)
}
}
不过同时你会发现,如果stackView.axis = .horizontal
时,就算不添加contentView
,ScrollView在横向还是可以正常滑动:
private func horizontalLayout() {
stackView.axis = .horizontal
stackView.spacing = 20
stackView.alignment = .center
view.addSubview(scrollView)
scrollView.snp.makeConstraints { make in
make.edges.equalToSuperview()
}
scrollView.addSubview(stackView)
stackView.snp.makeConstraints { make in
make.edges.equalToSuperview()
}
for _ in 0..<20 {
stackView.addArrangedSubview(circle)
}
}
以上两点大家在平时使用的时候都需要加以注意。
总结
本篇文章其实对上一篇文章里UI布局层面上的一点扩展,UIScrollView+UIStackView
也可以说是一种不错的布局方案。
同时对于UIScrollView+UIStackView
布局中的注意事项做了简单的解释。
不过我个人对于这种数据驱动型的页面构建,还是更倾向于使用UITableView
这种通过数据源构建页面。因为当做进行下拉刷新操作的时候,UITableView
就是傻瓜操作,但是如果是UIStackView
,相当于要对stackView进行UI上的重构,从用户感知体验和性能上都差一些。
参考文档
UIStackView inside UIScrollView
UIKit: Programmatically embed a UIStackView in an UIScrollView using AutoLayout
自己写的项目,欢迎大家star⭐️
RxStudy:RxSwift/RxCocoa框架,MVVM模式编写wanandroid客户端。
GetXStudy:使用GetX,重构了Flutter wanandroid客户端。
本文正在参加「金石计划 . 瓜分6万现金大奖」