如何在iOS中实现以下布局？

我的iOS应用程序开发布局如下。

布局包含以下部分：

折叠工具栏：此

视图

的工作方式应与android中的相同，即在 滚动必须将其折叠

选项卡菜单：这是选项卡菜单。刷卡时，必须根据所选菜单更新

表视图

。在

滚动时

选项卡菜单必须固定在顶部

Tableview：这只是一个

Tableview

包含根据选项卡菜单中所选菜单的数据

底部选项卡：这是

uitabarmenu

我尝试了以下方法：

我使用了标签菜单库。我创建了VPProductList（选项卡栏的父视图和表视图的父视图）到设备屏幕高度的高度

---

当tableview位于

scrollview

内时，问题出现了。问题是

tableview

和

scrollview

在滚动时的行为不同。因此，要删除此选项，我首先禁用

tableview

的滚动，并在选项卡菜单视图位于屏幕的（0,0）点时，在

viewdicscroll

方法中启用。但是，必须滚动两次才能获得效果。这感觉有点油滑。如何使用这种方法实现平滑滚动？有没有图书馆可以解决这个问题

这就是你如何解决这个问题的方法

查看层次结构：

您可以使用

UICollectionView

创建

选项卡栏

。 选择

选项卡时处理数据的
UITableView
。
要处理
UICollectionView
和
UITableView
中的数据，请创建
ViewModel
。下面是一个例子，你可以

enum ListType: Int {
    case fruits, animals, vegetables
}

class ViewModel {
    let tabs: [ListType] = [.fruits, .animals, .vegetables]

    let fruits = ["Apple", "Banana", "Grapes", "Papaya", "Apple", "Banana", "Grapes", "Papaya", "Apple", "Banana", "Grapes", "Papaya"]
    let animals = ["Rabbit", "Monkey", "Bear", "Deer", "Rabbit", "Monkey", "Bear", "Deer", "Rabbit", "Monkey", "Bear", "Deer"]
    let vegetables = ["Carrot", "Potato", "Cucumber", "Spinach", "Carrot", "Potato", "Cucumber", "Spinach", "Carrot", "Potato", "Cucumber", "Spinach"]

    func numberOfTabs() -> Int {
        return self.tabs.count
    }

    func tab(at index: Int) -> ListType {
        return self.tabs[index]
    }

    func numberOfRows(for listType: ListType) -> Int {
        switch listType {
        case .fruits: return fruits.count
        case .animals: return animals.count
        case .vegetables: return vegetables.count
        }
    }

    func element(at index: Int, for listType: ListType) -> String? {
        switch listType {
        case .fruits: return fruits[index]
        case .animals: return animals[index]
        case .vegetables: return vegetables[index]
        }
    }
}

在上面的代码中，我创建了

一种
枚举列表类型
，用于标识
集合视图
中选项卡的
类型
，以及将在
表格视图
中显示的数据
一种
类视图模型
，用于处理
集合视图
和
表格视图
的
数据源
让我们创建一个带有一些
出口的
UIViewController
，即

class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var collectionView: UICollectionView!
    @IBOutlet weak var collapsingViewHeightConstraint: NSLayoutConstraint!

    private let viewModel = ViewModel()
    private var lastContentOffset: CGFloat = 0.0

    override func viewDidLoad() {
        super.viewDidLoad()
        self.collectionView.selectItem(at: IndexPath(row: 0, section: 0), animated: false, scrollPosition: .left)
    }
}

extension ViewController: UITableViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView == self.tableView {
            if (scrollView.contentOffset.y >= (scrollView.contentSize.height - scrollView.frame.size.height)) {
                //Scrolled to bottom
                UIView.animate(withDuration: 0.3) {
                    self.collapsingViewHeightConstraint.constant = 0.0
                    self.view.layoutIfNeeded()
                }
            }
            else if (scrollView.contentOffset.y < self.lastContentOffset || scrollView.contentOffset.y <= 0) && (self.collapsingViewHeightConstraint.constant != 150.0)  {
                //Scrolling up, scrolled to top
                UIView.animate(withDuration: 0.3) {
                    self.collapsingViewHeightConstraint.constant = 150.0
                    self.view.layoutIfNeeded()
                }
            }
            else if (scrollView.contentOffset.y > self.lastContentOffset) && self.collapsingViewHeightConstraint.constant != 0.0 {
                //Scrolling down
                UIView.animate(withDuration: 0.3) {
                    self.collapsingViewHeightConstraint.constant = 0.0
                    self.view.layoutIfNeeded()
                }
            }
            self.lastContentOffset = scrollView.contentOffset.y
        }
    }
}

添加
UITableViewDataSource的方法

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if let selectedIndex = self.collectionView.indexPathsForSelectedItems?.first?.row, let listType = ListType(rawValue: selectedIndex) {
            return self.viewModel.numberOfRows(for: listType)
        }
        return 0
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if let selectedIndex = self.collectionView.indexPathsForSelectedItems?.first?.row, let listType = ListType(rawValue: selectedIndex) {
            let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
            cell.textLabel?.text = self.viewModel.element(at: indexPath.row, for: listType)
            return cell
        }
        return UITableViewCell()
    }
}

UICollectionViewDataSource
和
UICollectionViewDelegate
方法

extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.viewModel.numberOfTabs()
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CustomCollectionCell
        cell.textLabel.text = String(describing: self.viewModel.tab(at: indexPath.row)).capitalized
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        collectionView.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)
        self.tableView.reloadData()
    }
}

要在
tableView
scroll
上处理
折叠视图
，请实现
scrollViewDidScroll（:）
方法，并基于
tableView
的
lastContentOffset
处理
折叠和展开
，即

class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var collectionView: UICollectionView!
    @IBOutlet weak var collapsingViewHeightConstraint: NSLayoutConstraint!

    private let viewModel = ViewModel()
    private var lastContentOffset: CGFloat = 0.0

    override func viewDidLoad() {
        super.viewDidLoad()
        self.collectionView.selectItem(at: IndexPath(row: 0, section: 0), animated: false, scrollPosition: .left)
    }
}

extension ViewController: UITableViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView == self.tableView {
            if (scrollView.contentOffset.y >= (scrollView.contentSize.height - scrollView.frame.size.height)) {
                //Scrolled to bottom
                UIView.animate(withDuration: 0.3) {
                    self.collapsingViewHeightConstraint.constant = 0.0
                    self.view.layoutIfNeeded()
                }
            }
            else if (scrollView.contentOffset.y < self.lastContentOffset || scrollView.contentOffset.y <= 0) && (self.collapsingViewHeightConstraint.constant != 150.0)  {
                //Scrolling up, scrolled to top
                UIView.animate(withDuration: 0.3) {
                    self.collapsingViewHeightConstraint.constant = 150.0
                    self.view.layoutIfNeeded()
                }
            }
            else if (scrollView.contentOffset.y > self.lastContentOffset) && self.collapsingViewHeightConstraint.constant != 0.0 {
                //Scrolling down
                UIView.animate(withDuration: 0.3) {
                    self.collapsingViewHeightConstraint.constant = 0.0
                    self.view.layoutIfNeeded()
                }
            }
            self.lastContentOffset = scrollView.contentOffset.y
        }
    }
}

扩展视图控制器：UITableViewDelegate{
func scrollViewDidScroll（scrollView:UIScrollView）{
如果scrollView==self.tableView{
if（scrollView.contentOffset.y>=（scrollView.contentSize.height-scrollView.frame.size.height））{
//滚动到底部
UIView.animate（持续时间：0.3）{
self.collasingViewHeightConstraint.constant=0.0
self.view.layoutifneed（）
}
}
如果（scrollView.contentOffset.y

查看本教程：谢谢，但我需要在折叠工具栏和tableview之间实现选项卡菜单。有办法吗？谢谢。它工作得很好。但是，有没有办法在水平滑动tableview时显示页面滑动效果？你只需要在tableview中水平滑动？我试图在水平滑动tableview时获得这种滑动效果。当然可以@PGDev