CollectionView 中的多个标签和 ImageView iOS

Question

我打算制作这样一个 1 行 12 列的集合视图 -

其中，在 The two labels I want to print 2 string 中，将在它们之间打印图像。

我实现了两个数据源方法 -

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

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionview_cell", for: indexPath) as! CustomCollectionViewCell
    cell.forecastHourlyTemp.text = "\(self.HourlyData[indexPath.row].temp)°C"
    cell.forecastHourlyTime.text = self.HourlyData[indexPath.row].dt.fromUnixTimeToTime()
    cell.forecastHourlyWeatherIcon.image = UIImage(named: self.HourlyData[indexPath.row].weather[0].icon)
    
    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: view.frame.width, height: 200)
    }

但是它只显示图片而不是显示这三个 -

在一些地方，人们只使用图像/单个标签来演示集合视图。那么是否可以在collectionview中一次显示3个view item？

Answer 1

经过各种测试，我发现问题出在高度上。当 collectionView 的尺寸大于 cell 高度时，它会缩小并变成两列。所以一开始我固定collectionView的区域等于cell的高度。

我在尝试打印列表中的各种项目（如 1、2、3）时找到了这个解决方案，然后突然发现了这个解决方案。

Answer 2

最好在布局机制内调整集合项目的大小。因此，您可能想要创建一个自定义 FlowLayout 并将其除以 3:

class WeatherCollectionViewFlowLayout: UICollectionViewFlowLayout {
    override func prepare() {
        super.prepare()

        guard let collectionView = collectionView else { return assertionFailure("Collection view not found") }

        let availableWidth = collectionView.bounds.width
        let availableHeight = collectionView.bounds.height
        let itemWidth: CGFloat = (availableWidth/3).rounded(.down)
        itemSize = CGSize(width: itemWidth, height: availableHeight)

        sectionInset = .zero
        minimumLineSpacing = .zero
        minimumInteritemSpacing = .zero 
    }
}

那么你应该将它作为 collectionView 的布局传递。

在情节提要中：

或代码：

CollectionView(frame: frame, collectionViewLayout: WeatherCollectionViewFlowLayout())

所以不需要任何固定宽度。

一些笔记

不要忘记项目超过所需数量的状态！
如果您只想安装它，请不要忘记禁用弹跳！
如果您想使用间距

availableWidth

availableHeight

不要重复自己！排除所有重复数据：

let forecast = self.HourlyData[indexPath.row]

cell.forecastHourlyTemp.text = "\(forecast.temp)°C"
cell.forecastHourlyTime.text = forecast.dt.fromUnixTimeToTime()
cell.forecastHourlyWeatherIcon.image = UIImage(named: forecast.weather[0].icon)

对您在代码中定义的所有内容使用 lowerCamelcase，types 除外：

HourlyData -> hourlyData

尽可能摆脱 self！
尽可能删除 return 关键字：

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

如果您已经知道集合项的大小，请尝试不要使用委托方法调整集合项的大小！

CollectionView 中的多个标签和 ImageView iOS

multiple labels & ImageView in CollectionView iOS

ios

collectionview

一些笔记