这是如何处理它的方法。
查看层次结构:
![enter image description here](https://istack.dev59.com/MfdAl.webp)
您可以使用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)) {
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) {
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 {
UIView.animate(withDuration: 0.3) {
self.collapsingViewHeightConstraint.constant = 0.0
self.view.layoutIfNeeded()
}
}
self.lastContentOffset = scrollView.contentOffset.y
}
}
}
![enter image description here](https://istack.dev59.com/lThZC.gif)