如何使用UITableView和UISegmentedControll进行分页

Question

我的视图控制器有一个带有6个按钮/段的UISegmentedControll。它在Segmented Controll下也有一个UITableView。如果我们通过单击切换段，则表视图将使用不同的数据重新加载。现在我们尝试实现一种方法，如果用户从左到右或从右到左滑动表视图，视图控制器中将出现类似行为的分页。表示表视图将与分段控件一起水平滚动。我们如何以最佳方式在我的应用程序中实现此功能？我的表有三个不同的自定义单元格，其中一个单元格内部也有一个UICollectionView。请帮助我。感谢。

Answer 1

我建议的想法是在tableView内使用collectionView。要遵循的步骤 - ：

1）在您的控制器上添加segmentedControl和collectionView。

2）通过控制从dataSource拖动到控制器 yello 图标来连接delegate和collectionView。

3）调整cell身高。

4）选择collectionView，然后转到属性检查器。查找 - ：1） 滚动方向 并使水平。 2）检查Paging Enabled参数。

5）在Constraints上申请views。

6）给出collectionView小区标识符。

7）为您的cell提供自定义collectionView小区类。

8）将所有Outlets连接到受尊重的views。

控制器类 - ：

import UIKit

class ViewController: UIViewController {

    // OUTLETS
    @IBOutlet weak var controls: UISegmentedControl!
    @IBOutlet weak var horizontalCollectionView: UICollectionView!

    // ARRAy OF TYPE UICOLOR
    var collectionViewColors = [UIColor.gray,UIColor.green,UIColor.red,UIColor.yellow,UIColor.blue,UIColor.brown]

    // ViewDidLoad
    override func viewDidLoad() {
        super.viewDidLoad()

    }
    //didReceiveMemoryWarning
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    // Function to calculate cell index on scroll end.
    func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>){
        let pagingIndex = targetContentOffset.pointee.x/self.view.frame.width
        // Set segmented controll current index
        controls.selectedSegmentIndex = Int(pagingIndex)
    }

}

// Collection view methods

extension ViewController : UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{
    // number of section
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    // number of items in section
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return collectionViewColors.count
    }
    // deque cell
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collection", for: indexPath) as! HorizontalCell
        cell.horizonatlColorsView.backgroundColor = collectionViewColors[indexPath.item]
        return cell
    }
    // set minimum line spacing to zero.
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
}

自定义单元格类 - ：

import UIKit

    class HorizontalCell: UICollectionViewCell {
        // UIView outlet
        @IBOutlet weak var horizonatlColorsView: UIView!
    }

设置好所有内容后，水平滚动即可获得所需的输出。此外，您现在可以在tableView内添加collectionView。

输出 - ：