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

Question

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

iosswiftxcodeuiscrollviewtabmenu

6

我需要为iOS应用程序开发设计以下布局。

布局包括以下部分：

可折叠工具栏：此视图应该像在Android中一样工作，即在滚动时必须折叠。
选项卡菜单：这是选项卡菜单。在滑动时，tableview必须根据所选菜单进行更新。在滚动时，选项卡菜单必须固定在顶部。
表格视图：这只是一个包含根据选项卡菜单选择的数据的tableview。
底部选项卡：这是UITabbarMenu。

我尝试了以下方法：

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

当 tableview 在 scrollview 中时出现了问题。问题是 tableview 和 scrollview 在滚动时表现不同。所以，我首先禁用了 tableview 的滚动，在 viewDidScroll 方法中根据选项卡菜单视图是否在屏幕的 (0,0) 点启用滚动。但是，必须滚动两次才能产生效果。这感觉有些不连贯。有什么方法可以实现平滑的滚动? 有没有库可以解决这个问题？

- user3853770

请查看此教程：https://medium.com/if-let-swift-programming/how-to-create-a-stretchable-tableviewheader-in-ios-ee9ed049aba3 - inexcitus

谢谢，但我需要在可折叠工具栏和表视图之间实现选项卡菜单。有什么办法吗？ - user3853770

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PGDev · Accepted Answer

这是如何处理它的方法。

查看层次结构：

您可以使用UICollectionView创建Tabbar。当选择tab时，使用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]
        }
    }
}

在上述代码中，我创建了：

一个枚举类型 ListType来标识在 collectionView 中的选项卡类型和要在 tableView 中展示的数据。
一个 ViewModel 类来处理 collectionView 和 tableView 的数据源。

让我们创建一个带有一些 outlets 的 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)
    }
}

为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时的collapsing view，需要实现scrollViewDidScroll(_:)方法，并根据tableView的lastContentOffset来处理collapse和expand。

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
        }
    }
}