IOS嵌套scrollview滑动切换页面tab吸顶
嵌套scrollview, 实现tab吸顶，页面左右滑动切换，上滑tab吸顶，自己研究了一下，下面看看效果
创建一些基本UI
/// 屏幕宽度
let Screen_Width = UIScreen.main.bounds.width
/// 屏幕高度
let Screen_Height = UIScreen.main.bounds.height
class JWDoubleScrollViewVC: UIViewController {
var headView:UIView?
var slideLine:UILabel?
var segBtns = [UIButton]()
var tableviews = [UITableView]()
let segWidth = Screen_Width / 4
let headViewH = 300
let segH = 40
var currentTabIndex = 0
var distance:Int{
get{
return headViewH - segH
}
}
fileprivate var rootScrollView:MyScrollView={
let scrollview = MyScrollView.init()
scrollview.backgroundColor = UIColor.white
scrollview.bounces = false
scrollview.showsVerticalScrollIndicator = false
scrollview.showsHorizontalScrollIndicator = false
return scrollview
}()
fileprivate var containerScrollView:UIScrollView = {
let scrollview = UIScrollView.init()
scrollview.backgroundColor = UIColor.white
scrollview.bounces = false
scrollview.isPagingEnabled = true
scrollview.showsVerticalScrollIndicator = false
scrollview.showsHorizontalScrollIndicator = false
return scrollview
}()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
self.view.backgroundColor = UIColor.white
self.setupUI()
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
rootScrollView.isScrollEnabled = true
}
func setupUI() {
rootScrollView.delegate = self
containerScrollView.delegate = self
let rootView = UIView.init()
self.view.addSubview(rootView)
rootView.snp.makeConstraints { (make) in
make.top.equalTo(90)
make.left.right.bottom.equalToSuperview()
}
rootView.layoutIfNeeded()
rootView.addSubview(rootScrollView)
rootScrollView.snp.makeConstraints { (make) in
make.edges.equalTo(rootView)
}
rootScrollView.layoutIfNeeded()
//headview
headView = UIView.init()
headView?.backgroundColor = UIColor.blue
rootScrollView.addSubview(headView!)
headView?.snp.makeConstraints({ (make) in
make.top.left.right.equalToSuperview()
make.width.equalTo(Screen_Width)
make.height.equalTo(headViewH)
})
headView?.layoutIfNeeded()
rootScrollView.addSubview(containerScrollView)
containerScrollView.snp.makeConstraints { (make) in
make.left.right.bottom.equalToSuperview()
make.top.equalTo(headView!.snp.bottom)
make.width.equalTo(Screen_Width)
make.height.equalTo(rootScrollView.frame.height)
}
containerScrollView.layoutIfNeeded()
//tab背景view
let btnContainerView = UIView.init()
rootScrollView.addSubview(btnContainerView)
btnContainerView.snp.makeConstraints { (make) in
make.left.right.equalToSuperview()
make.height.equalTo(segH)
make.bottom.equalTo(headView!.snp.bottom)
make.width.equalTo(Screen_Width)
}
btnContainerView.layoutIfNeeded()
for i in 0...3 {
//添加Tab
let button = self.createButton(i)
btnContainerView.addSubview(button)
segBtns.append(button)
//添加tableview
let tableview = self.createTableView(i)
containerScrollView.addSubview(tableview)
tableviews.append(tableview)
}
//tab底部横线
slideLine = UILabel.init(frame: CGRect.init(x: 0, y: CGFloat(segH - 6), width: segWidth, height: 4))
slideLine?.backgroundColor = .white
slideLine?.layer.cornerRadius = 4/2
slideLine?.layer.masksToBounds = true
btnContainerView.addSubview(slideLine!)
//设置scrollview滑动区域
containerScrollView.contentSize = CGSize.init(width: CGFloat(segBtns.count) * Screen_Width, height: 0)
}
/**
创建Tab
*/
func createButton(_ i:Int) -> UIButton {
let button = UIButton.init(type: .custom)
button.frame = CGRect.init(x: CGFloat(i)*segWidth, y: 0, width: segWidth, height: CGFloat(segH))
button.setTitle(String.init(format: "第%i个", i), for: .normal)
button.titleLabel?.textAlignment = .center
button.tag = 1000 + i
button.backgroundColor = .red
button.setTitleColor(UIColor.white, for: .normal)
button.setTitleColor(UIColor.yellow, for: .selected)
button.addTarget(self, action: #selector(segAction(button:)), for:.touchUpInside)
return button
}
/**
创建tableview
*/
func createTableView(_ i:Int) ->UITableView{
let tableView = UITableView.init(frame: .zero, style: .plain)
tableView.frame = CGRect.init(x: CGFloat(i)*Screen_Width, y: 0, width: Screen_Width, height: rootScrollView.frame.height - CGFloat(segH))
tableView.delegate = self
tableView.dataSource = self
tableView.backgroundColor = .green
tableView.sectionHeaderHeight = 0
tableView.sectionFooterHeight = 0
//tableView.bounces = false
tableView.backgroundColor = UIColor.white
tableView.register(UITableViewCell.classForCoder(), forCellReuseIdentifier: NSStringFromClass(UITableViewCell.classForCoder()))
return tableView
}
/**
滑动tab切换
*/
func sliderAnimationWithTag(tag:Int){
rootScrollView.isScrollEnabled = true
currentTabIndex = tag;
for item in segBtns.enumerated() {
let button = item.element
button.isSelected = false
}
let button = segBtns[tag]
button.isSelected = true
UIView.animate(withDuration: 0.25) { [weak self] in
self!.slideLine?.center = CGPoint.init(x: CGFloat(button.center.x), y: CGFloat((self!.slideLine?.center.y)!))
}
}
@objc func segAction(button:UIButton) {
//滑动到指定页面
containerScrollView.setContentOffset(CGPoint.init(x:CGFloat(button.tag - 1000) * Screen_Width, y: 0), animated: true)
}
//tablview是否可以滑动
func canTableViewScroll() -> Bool {
return rootScrollView.contentOffset.y >= CGFloat(self.distance)
}
//主rootscrollview是否可以滑动
func canRootViewScroll() -> Bool {
return tableviews[currentTabIndex].contentOffset.y <= 0
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/
}
此部分处理嵌套scrollview手势页面交互
extension JWDoubleScrollViewVC:UIScrollViewDelegate{
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if scrollView.isKind(of: UITableView.classForCoder()){ //tableview
let offY = tableviews[currentTabIndex].contentOffset.y;
if offY < 0 {
tableviews[currentTabIndex].contentOffset = .zero;//去掉tableview上方弹性
}
guard !canTableViewScroll() else {
return
}
scrollView.contentOffset.y = 0
}else if scrollView === rootScrollView{ //主scrollview
guard !canRootViewScroll() else {
return
}
let sliderSafeArea = (self.distance);
scrollView.setContentOffset(CGPoint.init(x: 0, y: sliderSafeArea), animated: false)
}else if scrollView === containerScrollView{ //滑动scrollview
rootScrollView.isScrollEnabled = false
//滑动切换Tab
let page = Double(scrollView.contentOffset.x/Screen_Width)
self.sliderAnimationWithTag(tag: Int(page + 0.5))
}
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
rootScrollView.isScrollEnabled = true
}
}
extension JWDoubleScrollViewVC:UITableViewDelegate,UITableViewDataSource{
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 50.0
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 30
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let tableviewcell = tableView.dequeueReusableCell(withIdentifier: NSStringFromClass(UITableViewCell.classForCoder()), for: indexPath)
tableviewcell.textLabel?.text = String.init(format: "第%i个", indexPath.row)
tableviewcell.backgroundColor = .orange
return tableviewcell
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.deselectRow(at: indexPath, animated: false)
}
}
class MyScrollView:UIScrollView,UIGestureRecognizerDelegate{
//当前scrollview与其他scrollview都响应手势操作
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
}
demo 地址：jwsource/JSDoubleScrollView