Swift系列-UITableView+UICollectionView实现2D选择：横竖滚动更随心

2024-01-30 22:54:04

前言

在移动开发中，我们经常需要创建各种各样的选择界面。这些界面通常使用滚动视图来实现，以便用户可以轻松地浏览和选择项目。然而，传统的滚动视图只能在一个方向上滚动，这可能会限制用户的选择自由度。

为了解决这个问题，我们可以使用UITableView+UICollectionView实现2D选择功能。这样，用户就可以同时向四个方向滚动，以满足不同的选择需求。例如，用户可以左右滑动选择颜色，上下滑动选择大小。

实现步骤

1. 创建UITableView和UICollectionView

首先，我们需要创建一个UITableView和一个UICollectionView。UITableView将用于显示颜色列表，UICollectionView将用于显示大小列表。

let tableView = UITableView()
let collectionView = UICollectionView()

2. 设置UITableView和UICollectionView的代理和数据源

接下来，我们需要设置UITableView和UICollectionView的代理和数据源。代理负责处理滚动视图的滚动事件，而数据源负责提供滚动视图的数据。

tableView.delegate = self
tableView.dataSource = self
collectionView.delegate = self
collectionView.dataSource = self

3. 实现UITableView和UICollectionView的代理方法

现在，我们需要实现UITableView和UICollectionView的代理方法。这些方法负责处理滚动视图的滚动事件。

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    // 获取选中的颜色
    let color = colors[indexPath.row]

    // 更新UICollectionView的数据源
    collectionView.reloadData()
}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    // 获取选中的大小
    let size = sizes[indexPath.row]

    // 更新UI
}

4. 实现UITableView和UICollectionView的数据源方法

最后，我们需要实现UITableView和UICollectionView的数据源方法。这些方法负责提供滚动视图的数据。

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return colors.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "ColorCell", for: indexPath)

    // 设置单元格的内容
    cell.textLabel?.text = colors[indexPath.row]

    return cell
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return sizes.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withIdentifier: "SizeCell", for: indexPath)

    // 设置单元格的内容
    cell.textLabel?.text = sizes[indexPath.row]

    return cell
}