帶有多個部分的水平滾動的collectionview

Question

我想像這樣開發屏幕（目標C）：

在這里有部分名稱：

1. 我們喜愛的新游戲
2. 我們喜愛的新應用

兩者都具有水平滾動並且彼此獨立。

我的問題是我應該用什么方法從以下兩個選項中實現這個。 如果有的話，請提供任何參考樣本：

1. 我可以使用單個UICollectionView並具有不同的部分（動態）來實現相同的行為。 但不同部分的滾動應該是獨立的。 因為第1部分可能有不同數量的項目（行），第2部分可能有不同數量的項目（行）
2. 我是否必須以編程方式獲取多個collectionview，然后在uiscrollview（垂直scrollview）中插入。 然后，abd定義水平滾動並通過分頁集合視圖添加單元格中的項目。

我目前通過下面的代碼完成了水平滾動的集合視圖：

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
    _collectionView=[[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];
    [_collectionView setDataSource:self];
    [_collectionView setDelegate:self];

    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
    [_collectionView setBackgroundColor:[UIColor redColor]];

    [self.view addSubview:_collectionView];

    // Do any additional setup after loading the view, typically from a nib.
}

#pragma mark Collection View Methods

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 15;
}

// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    cell.backgroundColor=[UIColor greenColor];
    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(50, 50);
}

請幫忙。

Answer 1

你要做的並不是那么困難。 我已經創建了你正在尋找的原型。 這就是storyboard's view controller及其文檔大綱的樣子：

這是每個組件的代碼

TableViewController

class TableViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

@IBOutlet weak var tableView: UITableView!

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

func numberOfSections(in tableView: UITableView) -> Int {
    return 5
}

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

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

    return cell
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 160
}

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return (section%2 == 0) ? "Games we love" : "Apps we love"
}
}

MyTableViewCell

class MyTableViewCell: UITableViewCell, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

@IBOutlet weak var collectionView: UICollectionView!

let imageNames = ["candy_crush", "cut_the_ropes", "game_1", "little_pet_shop", "zuba"]
let gameNames  = ["Candy Crush", "Cut the Ropes", "Arbitrary Game 1", "Littlest Pet Shop", "Zuba"]

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
}

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // Configure the view for the selected state
}

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

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionCell", for: indexPath) as! MyCollectionViewCell
    cell.imageView.image  = UIImage.init(named: imageNames[indexPath.row])
    cell.titleLabel.text  = gameNames[indexPath.row]
    cell.detailLabel.text = "Games"

    return cell
}
}

MyCollectionViewCell

class MyCollectionViewCell: UICollectionViewCell {

@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var detailLabel: UILabel!
}

這就是它在模擬器上的樣子

Answer 2

解決方法（使用UICollectionView和Swift 4）

我面臨同樣的問題，無法找到使其與UICollectionViewFlowLayout一起使用的UICollectionViewFlowLayout 。

如果要使用UICollectionView ，但SupplementaryView不夠靈活，可以執行以下操作：

我在CollectionView的左上方有一個固定的UILabel和一個浮動的UILabel ，它將相應地向右移動。 如果只有一個部分可見，則隱藏第二個標簽

我們可以攔截在collectionView:cellForItemAt indexPath:方法中創建/出列的所有單元格，但是會給你很多單元格框架（其中許多正在准備但仍然在屏幕外，你必須管理哪個框架對應於哪個部分如果水平滾動集合視圖中有多行，這可能會很棘手

您需要攔截節和單元格框以找到最低的x坐標，最可靠的方法是檢查collectionView的.visibleCells屬性。 這可能是很多迭代（取決於可見單元的數量），我很想找出一種更有效的方法。 （委托方法，CollectionViewCellsDidAppear類型的通知，或者能夠將Observer添加到.visibleCells屬性（鑒於它是只讀的，不可能）

到目前為止這是有效的（Swift 4），但還有改進的余地：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CellID", for: indexPath) as! GalleryCell
    cell.label?.text = String((itemsArrays[indexPath.section][indexPath.row]))
    var pointsDict = Dictionary<Int, CGFloat>()
    for item in collectionView.visibleCells {
        let point = item.convert(CGPoint.zero, to: self.superview)
        let section = collectionView.indexPath(for: item)!.section
        if pointsDict[section] != nil {
            if point.x < pointsDict[section]! {
                pointsDict[section] = point.x
            }
        } else {
            pointsDict[section] = point.x
        }
    }
    updateLabels(dict: pointsDict)
    return cell
}

此代碼將為您提供一個包含可見部分（鍵）的字典和每個部分（值）的最低x坐標以對齊浮動label2（我的label1在collectionView的左側有一個固定的x）。 您還可以相應地設置動畫，隱藏/顯示標簽

此解決方法不是最佳的，如果使用UICollectionViewFlowLayout的解決方案，我將發布其他信息