IOS嵌套scrollview滑动切换页面tab吸顶

本文介绍: 嵌套 scrollview, 实现 tab 吸顶，页面左右滑动切换，上滑tab吸顶，自己研究了一下，下面看看效果创建一些基本UI/// 屏幕宽度 let Sc re en_Wid th = UISc re en.main.b ounds.width/// 屏幕高度le t Sc re en_He i g ht = UISc re en.main.b ound s.height class JWDoubleScrollViewVC: UIVi ewCon t roll e r { var headV…

嵌套scrollview, 实现tab吸顶，页面左右滑动切换，上滑tab吸顶，自己研究了一下，下面看看效果

创建一些基本UI

/// 屏幕宽度

let Screen_Width = UIScreen.main.b ounds.width

/// 屏幕高度

let Screen_Hei g ht = UIScreen.main.bounds.height

class JWDoubleScrollViewVC: UIViewController {

var headView:UIView?

var slideLine:UILab el?

var segBtns = [UIButton]()

var tableviews = [UITableView]()



let segWidth = Screen_Width / 4

let headViewH = 300

let segH = 40

var currentTabInde x = 0

var distance:Int{

get{

return headViewH – segH

}

}



file private var rootScrollView:MyScrollView={

let scrollview = MyScrollView.init()

scrollview.backgroundCo lo r = UICo lo r.white

scrollview.bounc es = false

scrollview.showsVert icalScrollIndi cator = false

scroll view.showsHorizontalScrollIndi cator = false

return scroll view

}()



file private var containerScrollView:UIScrollView = {

let scroll view = UIScrollView.init()

scrollview.backgroundColor = UIColor.white

scrollview.bounc es = false

scrollview.isPagingEnab led = true

scrollview.showsVerticalScrollIndi cator = false

scrollview.showsHorizontalScrollIndi cator = false

return scrollview

}()



override func viewDidLoa d() {

super.viewDidLoa d()

// Do any additional setup after loading the view.

self.view.backgroundColor = UIColor.white

self.setupUI()

}



override func viewWillAp pe ar(_ animated: Bool) {

super.viewWillAp pe ar(animated)

rootScrollView.isScrollEnab led = true

}





func setupUI() {



rootScrollView.delegate = self

containerScrollView.delegate = self



let rootView = UIView.init()

self.view.addSubview(rootView)

rootView.snp.makeConstrain ts { (make) in

make.top.equalTo(90)

make.left.right.bottom.equalToSuperview()

}

rootView.layoutIfNeeded()



rootView.addSubview(rootScrollView)

rootScrollView.snp.makeConstrain ts { (make) in

make.edges.equalTo(rootView)

}

rootScrollView.layoutIfNeeded()



//headview

headView = UIView.init()

headView?.backgroundColor = UIColor.blue

rootScrollView.addSubview(headView!)

headView?.snp.makeConstrain ts({ (make) in

make.top.left.right.equalToSuperview()

make.width.equalTo(Screen_Width)

make.height.equalTo(headViewH)

})

headView?.lay outIfNeeded()



rootScrollView.addSubview(containerScrollView)

containerScrollView.snp.makeConstrain ts { (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.lay outIfNeeded()



//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.lay outIfNeeded()



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), wi dth: 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.yel low, for: .selected)

button.addTar get(self, action: #selector(segAct ion(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(), forCellReuseIdenti fier: NSStringFromClass(UITableViewCell.classForCoder()))

return tableView

}



/**

   滑动tab切换

   */

func sliderAnimat ionWithTag(tag:Int){



rootScrollView.isScrollEnabled = true



currentTabIndex = tag;



for item in segBtns.enumerated() {

let button = item.element

button.isSelected = fa lse

}



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 segAct ion(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: fa lse)



}else if scrollView === containerScrollView{ //滑动scrollview



rootScrollView.isScrollEnabled = fa lse



//滑动切换Tab

let page = Double(scrollView.contentOffset.x/Screen_Width)

self.sliderAnimat ionWithTag(tag: Int(page + 0.5))



}

}



func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {

rootScrollView.isScrollEnabled = tr ue

}





}

extension JWDoubleScrollViewVC:UITableViewDelegate,UITableViewDataSource{

func numberOfSec tions(in tableView: UITableView) -> Int {

return 1

}



func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

return 50.0

}



func tableView(_ tableView: UITableView, numberOfRowsInSect ion 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 tr ue

}

}