Question

我已经完成了带有分页的水平UICollectionView的水平设置，但是目前每页的项目是从上到下，从左到右排列的。现在，我希望这些项目从左到右，从上到下排列。

示例：

当前：

      page 1             page 2
 cell 1 | cell 3 || cell 5 | cell 7
 cell 2 | cell 4 || cell 6 | cell 8

我的期望：

      page 1             page 2
 cell 1 | cell 2 || cell 5 | cell 6
 cell 3 | cell 4 || cell 7 | cell 8

我已经找到解决方案很多天了，但是对于我的案例，SWIFT没有任何结果。

这是我的屏幕截图：

Screenshot 1

Screenshot 2

我在git上的源代码：https://github.com/lhvan89/UICollectionview

//
//  ViewController.swift
//  CollectionView
//
//  Created by mac on 6/19/19.
//  Copyright © 2019 lhvan89. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var itemsCollectionView: UICollectionView!
    @IBOutlet weak var pageControl: UIPageControl!

    private let numberOfItemPerpage = 15

    var listItems: [Item] = [
        Item(title: "Behance", image: "behance", badge: 0),
        Item(title: "Deviantart", image: "deviantart", badge: 1),
        Item(title: "Dribbble", image: "dribbble", badge: 2),
        Item(title: "Dropbox", image: "dropbox", badge: 3),
        Item(title: "Facebook", image: "facebook", badge: 4),
        Item(title: "Flickr", image: "flickr", badge: 5),
        Item(title: "Foursquare", image: "foursquare", badge: 6),
        Item(title: "Google-plus", image: "google-plus", badge: 7),
        Item(title: "Instagram", image: "instagram", badge: 8),
        Item(title: "Line", image: "line", badge: 9),
        Item(title: "Linkedin", image: "linkedin", badge: 10),
        Item(title: "Myspace", image: "myspace", badge: 11),
        Item(title: "Path", image: "path", badge: 12),
        Item(title: "Pinterest", image: "pinterest", badge: 13),
        Item(title: "Quora", image: "quora", badge: 14),
        Item(title: "Skype", image: "skype", badge: 15),
        Item(title: "Snapchat", image: "snapchat", badge: 16),
        Item(title: "Soundcloud", image: "soundcloud", badge: 17),
        Item(title: "Spotify", image: "spotify", badge: 18),
        Item(title: "Swarm", image: "swarm", badge: 19),
        Item(title: "Telegram", image: "telegram", badge: 20),
        Item(title: "Tumblr", image: "tumblr", badge: 21),
        Item(title: "Twitter", image: "twitter", badge: 22),
        Item(title: "Viber", image: "viber", badge: 23),
        Item(title: "Vimeo", image: "vimeo", badge: 24),
        Item(title: "Vine", image: "vine", badge: 25),
        Item(title: "Whatsapp", image: "whatsapp", badge: 26),
        Item(title: "Yelp", image: "yelp", badge: 27),
        Item(title: "Youtube", image: "youtube", badge: 28),
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        itemsCollectionView.dataSource = self
        itemsCollectionView.delegate = self

         pageControl.numberOfPages = listItems.count/numberOfItemPerpage + (listItems.count % numberOfItemPerpage == 0 ? 0 : 1)

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

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        itemsCollectionView.reloadData()
    }
}

extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return listItems.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "itemCollectionViewCell", for: indexPath) as? itemCollectionViewCell else { return UICollectionViewCell() }
        cell.loadData(item: listItems[indexPath.row])
        return cell
    }
}

extension ViewController: UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let x = scrollView.contentOffset.x
        let w = scrollView.bounds.size.width
        let currentPage = Int(ceil(x/w))
        self.pageControl.currentPage = currentPage
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let itemWidth = collectionView.frame.size.width / 3
        let itemHeight = (collectionView.frame.size.height / 5) - 4
        return CGSize(width: itemWidth, height: itemHeight)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }

}

感谢您的帮助！

Answer 1

创建自定义集合视图单元格，该单元格包含由四个模型组成的数组：

|项目1 |项目2 |

|项目3 |项目4 |

将其注册为您的收藏视图。用您的数据对其进行配置（设置项目1具有models数组的第一个元素，第二项具有models数组的第二个元素...。）

现在，在您描述的情况下，您的收藏夹具有2个单元格和2个模型阵列：

单元格1：

|项目1 |项目2 |

|项目3 |项目4 |

单元格2：

|项目5 |项目6 |

|项目7 |项目8 |

模型1：[项目1的数据，项目2的数据，项目3的数据，项目4的数据]

models2：[项目5的数据，项目6的数据，项目7的数据，项目8的数据]

/////////////////////

另一个更简单的解决方案是重新排列数据源：

[data1，data2，data3，data4，data5，data6，data7，data8]

->

[data1，data3，data2，data4，data5，data7，data6，data8]

用于重新排列的代码（适用于您的自定义案例，在单个页面中包含4个元素，不通用！）：

import Foundation

func rearranged(_ data: [Int]) -> [Int] {
    var result = data
    var i = 0
    while i + 1 < data.count {
        if (i + 1) % 2 == 0 && (i + 1) % 4 != 0 {
            let tmp = data[i]
            result[i] = result[i + 1]
            result[i + 1] = tmp
            i += 1
        }
        i += 1
    }
    return result
}
var dataFromServer: [Int] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
let data = rearranged(dataFromServer)
print(data)

如何使用分页设置水平UICollectionView，但是每页的项目从左到右，从上到下排列

1 个答案: