Collectionview 显示不同单元格与不同 iPad 设备的自定义日历

Question

我正在尝试在我的应用程序中创建自定义日历，并添加了以下代码。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout:
                        UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        return CGSize(width: collectionView.frame.size.width/7, height: 36)

    }

但在不同的 iPad 设备中，工作日显示的时间多于 7 和 7。有些 iPad 显示一周中的 5 天。它根据屏幕尺寸更改单元格尺寸。但我想添加 &所有 iPad 屏幕宽度的天数。然后我尝试了以下方法

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    if UIDevice().userInterfaceIdiom == .pad
    {
    if (UIDevice.current.userInterfaceIdiom == UIUserInterfaceIdiom.pad &&
        (UIScreen.main.bounds.size.height == 1366 || UIScreen.main.bounds.size.width == 1366))
    {
    print("iPad Pro : 12.9 inch")
    return CGSize(width: collectionView.frame.width/7 + 20, height: 36)
    }
    else if (UIDevice.current.userInterfaceIdiom == UIUserInterfaceIdiom.pad &&
             (UIScreen.main.bounds.size.height == 1024 || UIScreen.main.bounds.size.width == 1024))
        {
    print("iPad 2 || iPad Pro : 9.7 inch || iPad Air/iPad Air 2 || iPad Retina ")
    return CGSize(width: collectionView.frame.width/7 - 5, height: 36)
    }
    else if (UIDevice.current.userInterfaceIdiom == UIUserInterfaceIdiom.pad &&
             (UIScreen.main.bounds.size.height == 1180 || UIScreen.main.bounds.size.width == 1180))
        {
    print("iPad Air 4th gen")
    return CGSize(width: collectionView.frame.width/7 + 5, height: 45)
    }
    else if (UIDevice.current.userInterfaceIdiom == UIUserInterfaceIdiom.pad &&
             (UIScreen.main.bounds.size.height == 1194 || UIScreen.main.bounds.size.width == 1194))
        {
    print("iPad Pro 11")
    return CGSize(width: collectionView.frame.width/7 + 5, height: 45)
    }
    else if (UIDevice.current.userInterfaceIdiom == UIUserInterfaceIdiom.pad &&
             (UIScreen.main.bounds.size.height == 1112 || UIScreen.main.bounds.size.width == 1112))
        {
    print("iPad Air 3")
    return CGSize(width: collectionView.frame.width/7, height: 45)
    }
    else
        {
        print("iPad 3")
        return CGSize(width: collectionView.frame.width/7, height: 45)
        }
    }
    return CGSize(width: collectionView.frame.width/7, height: 45)
}

，使用此方法后，大多数 iPad 设备的电池续航时间正好为 7 天。但某些屏幕宽度为 1024 的设备（iPad 5、6、7 代）仍每周显示 6 天。我用模拟器尝试过。

Answer 1

您的答案可能暂时有效，但我建议不要使用硬编码值，例如 173、20、7 等，如果屏幕尺寸甚至方向发生变化，这些值可能不起作用。

主要要弄清楚的是在获取单元格尺寸之前您实际上需要使用多少可用宽度。

这就是我要做的：

extension CalendarVC: UICollectionViewDelegateFlowLayout
{
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize
    {
        var availableWidth = collectionView.bounds.size.width
        
        // Remove horizontal insets if any
        if let collectionViewLayout
            = collectionViewLayout as? UICollectionViewFlowLayout
        {
            let totalSectionInsets
                = collectionViewLayout.sectionInset.left + collectionViewLayout.sectionInset.right
            
            availableWidth -= totalSectionInsets
            
            // Remove the horizontal spacing between cells, which is a bit tricky
            // The horizontal spacing between cells is the interItemSpacing
            // There will always be numberOfColumns - 1 in spaces between cells
            // For 7 cells, there will be 6 spaces. For 5, there will be 4 etc
            let spaces = numberOfColumns - 1
            let totalSpacing = CGFloat(spaces) * collectionViewLayout.minimumInteritemSpacing
            
            availableWidth -= totalSpacing
        }
        
        // Remove the vertical content insets if any
        let horizontalContentInsets
            = collectionView.contentInset.left + collectionView.contentInset.right
        
        availableWidth -= horizontalContentInsets
        
        // Now we have the actual available width after all the insets and spacing
        // So calculate the cell width
        let cellDimension = availableWidth / CGFloat(numberOfColumns)
        
        // Keep the height same as width to get a square or set it as you wish
        return CGSize(width: cellDimension, height: cellDimension)
    }
}

这将为您提供手机肖像中的以下内容：

横向手机

iPad

在所有情况下，您都可以在不使用随机数的情况下获得 7 列

这是完整的解决方案：

// Cell class, not so important for you
fileprivate class DateCell: UICollectionViewCell
{
    static let reuseIdentifier = "DateCell"
    
    let date = UILabel()
    
    override init(frame: CGRect)
    {
        super.init(frame: frame)
        contentView.backgroundColor = .yellow
        configureLabel()
        layoutIfNeeded()
    }
    
    required init?(coder: NSCoder)
    {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func configureLabel()
    {
        contentView.addSubview(date)
        
        date.backgroundColor = .lightGray
        date.textColor = .black
        date.textAlignment = .center
        date.translatesAutoresizingMaskIntoConstraints = false
        
        addConstraints([
        
            date.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            date.topAnchor.constraint(equalTo: contentView.topAnchor),
            date.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            date.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        
        ])
    }
}

// View Controller
class CalendarVC: UIViewController
{
    var calendarCollectionView: UICollectionView!
    
    // Number of columns per row
    let numberOfColumns = 7
    
    // Padding between the cells horizontally
    // and vertically
    let padding: CGFloat = 10
    
    let sectionInset: CGFloat = 10
    
    var daysInMonth = 0
    
    override func viewDidLoad()
    {
        super.viewDidLoad()
        
        title = "CV Calendar"
        view.backgroundColor = .white
        
        configureDaysInMonth()
        configureCollectionView()
    }
    
    // I am just getting days of the month, not so important for you
    private func configureDaysInMonth()
    {
        let cal = Calendar(identifier: .gregorian)
        
        // Calculate start and end of the current year (or month with `.month`):
        if let range = cal.range(of: .day, in: .month, for: Date())
        {
            daysInMonth = range.count
        }
    }
    
    private func configureCollectionView()
    {
        calendarCollectionView = UICollectionView(frame: CGRect.zero,
                                                  collectionViewLayout: createLayout())
        
        calendarCollectionView.register(DateCell.self,
                                        forCellWithReuseIdentifier: DateCell.reuseIdentifier)
        
        calendarCollectionView.dataSource = self
        calendarCollectionView.delegate = self
        calendarCollectionView.backgroundColor = .white
        calendarCollectionView.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(calendarCollectionView)
        
        // Collection view auto layout
        view.addConstraints([
        
            calendarCollectionView.leadingAnchor
                .constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor,
                            constant: 0),
            
            calendarCollectionView.topAnchor
                .constraint(equalTo: view.topAnchor,
                            constant: 0),
            
            calendarCollectionView.trailingAnchor
                .constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor,
                            constant: 0),
            
            calendarCollectionView.bottomAnchor
                .constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor,
                            constant: 0)
            
        ])
    }
    
    private func createLayout() -> UICollectionViewFlowLayout
    {
        let flowLayout = UICollectionViewFlowLayout()
        flowLayout.minimumLineSpacing = padding
        flowLayout.minimumInteritemSpacing = padding
        flowLayout.scrollDirection = .vertical
        flowLayout.sectionInset = UIEdgeInsets(top: sectionInset,
                                               left: 0,
                                               bottom: 0,
                                               right: 0)
        
        return flowLayout
    }
}

// UICollectionView DataSource, not too important for you
extension CalendarVC: UICollectionViewDataSource
{
    func collectionView(_ collectionView: UICollectionView,
                        numberOfItemsInSection section: Int) -> Int
    {
        daysInMonth
    }
    
    func collectionView(_ collectionView: UICollectionView,
                        cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
    {
        let cell
            = collectionView.dequeueReusableCell(withReuseIdentifier: DateCell.reuseIdentifier,
                                                 for: indexPath) as! DateCell
        
        cell.date.text = "\(indexPath.row + 1)"
        
        return cell
    }
}

// UICollectionViewDelegateFlowLayout, same as above
extension CalendarVC: UICollectionViewDelegateFlowLayout
{
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize
    {
        var availableWidth = collectionView.bounds.size.width
        
        // Remove horizontal insets if any
        if let collectionViewLayout
            = collectionViewLayout as? UICollectionViewFlowLayout
        {
            let totalSectionInsets
                = collectionViewLayout.sectionInset.left + collectionViewLayout.sectionInset.right
            
            availableWidth -= totalSectionInsets
            
            // Remove the horizontal spacing between cells, which is a bit tricky
            // The horizontal spacing between cells is the interItemSpacing
            // There will always be numberOfColumns - 1 in spaces between cells
            // For 7 cells, there will be 6 spaces. For 5, there will be 4 etc
            let spaces = numberOfColumns - 1
            let totalSpacing = CGFloat(spaces) * collectionViewLayout.minimumInteritemSpacing
            
            availableWidth -= totalSpacing
        }
        
        // Remove the vertical content insets if any
        let horizontalContentInsets
            = collectionView.contentInset.left + collectionView.contentInset.right
        
        availableWidth -= horizontalContentInsets
        
        // Now we have the actual available width after all the insets and spacing
        // So calculate the cell width
        let cellDimension = availableWidth / CGFloat(numberOfColumns)
        
        // Keep the height same as width to get a square or set it as you wish
        return CGSize(width: cellDimension, height: cellDimension)
    }
}

Answer 2

我通过以下代码得到了完美的解决方案。

func collectionView(_ collectionView: UICollectionView, 布局 collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGS尺寸{
返回 CGSize(宽度: (self.contentView.frame.width - 173)/7, 高度: 45)
}