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

Question

我有一个用于 iOS 应用程序开发的布局如下。

布局包含以下部分：

1. 折叠工具栏：这view应该像在 android 中一样工作，即滚动时它必须折叠。
2. 选项卡菜单：这是选项卡菜单。刷卡时，tableview必须根据所选菜单进行更新。选项scrolling卡菜单必须固定在顶部。
3. Tableview：这只是一个tableview包含选项卡菜单中选择的菜单的数据。
4. 底部选项卡：这是UITabbarMenu。

我尝试使用以下方法：

我使用Pagingkit库作为选项卡菜单。tabbar我将 vProductList （和的父视图tableview）的高度创建为设备屏幕的高度。

当 tableview 位于 inside 时，问题就出现了scrollview。问题是滚动时的tableview行为scrollview不同。tableview因此，为了消除此问题，我首先禁用滚动，并viewDidScroll在选项卡菜单视图位于屏幕的 (0,0) 点的情况下在方法中启用。但是，必须滚动两次才能获得效果。这感觉有点问题。如何用这种方法实现平滑滚动？有没有什么库可以解决这个问题？

Answer 1

这就是你可以解决这个问题的方法。

\n\n

查看层次结构：

\n\n

\n\n

您可以使用 aUICollectionView创建Tabbar.\nA来处理 a 为时UITableView的数据。\n要处理和中的数据，请创建. 这是一个示例，说明如何可以，tabselectedUICollectionViewUITableViewViewModel

\n\n

enum ListType: Int {\n    case fruits, animals, vegetables\n}\n\nclass ViewModel {\n    let tabs: [ListType] = [.fruits, .animals, .vegetables]\n\n    let fruits = ["Apple", "Banana", "Grapes", "Papaya", "Apple", "Banana", "Grapes", "Papaya", "Apple", "Banana", "Grapes", "Papaya"]\n    let animals = ["Rabbit", "Monkey", "Bear", "Deer", "Rabbit", "Monkey", "Bear", "Deer", "Rabbit", "Monkey", "Bear", "Deer"]\n    let vegetables = ["Carrot", "Potato", "Cucumber", "Spinach", "Carrot", "Potato", "Cucumber", "Spinach", "Carrot", "Potato", "Cucumber", "Spinach"]\n\n    func numberOfTabs() -> Int {\n        return self.tabs.count\n    }\n\n    func tab(at index: Int) -> ListType {\n        return self.tabs[index]\n    }\n\n    func numberOfRows(for listType: ListType) -> Int {\n        switch listType {\n        case .fruits: return fruits.count\n        case .animals: return animals.count\n        case .vegetables: return vegetables.count\n        }\n    }\n\n    func element(at index: Int, for listType: ListType) -> String? {\n        switch listType {\n        case .fruits: return fruits[index]\n        case .animals: return animals[index]\n        case .vegetables: return vegetables[index]\n        }\n    }\n}\n

\n\n

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

\n\n

\n
1. anenum ListType标识types of tabsincollectionView和要在 中呈现的数据tableView。
\n
2. aclass ViewModel处理dataSource和。collectionView​tableView
\n

\n\n

让\xe2\x80\x99sUIViewController用一些创建一个outlets，即

\n\n

class ViewController: UIViewController {\n    @IBOutlet weak var tableView: UITableView!\n    @IBOutlet weak var collectionView: UICollectionView!\n    @IBOutlet weak var collapsingViewHeightConstraint: NSLayoutConstraint!\n\n    private let viewModel = ViewModel()\n    private var lastContentOffset: CGFloat = 0.0\n\n    override func viewDidLoad() {\n        super.viewDidLoad()\n        self.collectionView.selectItem(at: IndexPath(row: 0, section: 0), animated: false, scrollPosition: .left)\n    }\n}\n

\n\n

添加方法UITableViewDataSource

\n\n

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

\n\n

UICollectionViewDataSource和UICollectionViewDelegate方法

\n\n

extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate {\n    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {\n        return self.viewModel.numberOfTabs()\n    }\n\n    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {\n        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CustomCollectionCell\n        cell.textLabel.text = String(describing: self.viewModel.tab(at: indexPath.row)).capitalized\n        return cell\n    }\n\n    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {\n        collectionView.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)\n        self.tableView.reloadData()\n    }\n}\n

\n\n

要处理collapsing viewon tableView scroll，请实现scrollViewDidScroll(_:)方法并collapse and expand根据 thelastContentOffset处理tableView，即

\n\n

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

\n\n

\n