ios – 使用UICollectionView具有不同单元大小的部分

ios – 使用UICollectionView具有不同单元大小的部分,第1张

概述我必须在 Swift项目中创建一个带有两个不同部分的视图. 第一个有七个方形的细胞.第二个有三个矩形的单元格.单元格内的数据是静态的. 在所有情况下,这些部分应该适合整个屏幕宽度(主要是横向模式). 我没有太多使用UICollectionViewController的经验,所以我决定使用一个UICollectionViewController类和两个可重用单元来完成此 *** 作,但是当我设置第一个单元格 @H_403_6@ 我必须在 Swift项目中创建一个带有两个不同部分的视图.
第一个有七个方形的细胞.第二个有三个矩形的单元格.单元格内的数据是静态的.
在所有情况下,这些部分应该适合整个屏幕宽度(主要是横向模式).

我没有太多使用UICollectionVIEwController的经验,所以我决定使用一个UICollectionVIEwController类和两个可重用单元来完成此 *** 作,但是当我设置第一个单元格宽度时,第二个单元格也受到影响,然后单元格宽度被剪切.

我的观点是否正确?
我应该使用不同的UICollectionVIEwControllers(每个部分一个)?

更新:我的控制器代码

import UIKitclass InverterController: UICollectionVIEwController,UICollectionVIEwDelegateFlowLayout {    let moduleCell = "moduleCell"    let parameterCell = "parameterCell"    func collectionVIEw(collectionVIEw: UICollectionVIEw,layout collectionVIEwLayout: UICollectionVIEwLayout,referenceSizeforheaderInSection section: Int) -> CGSize {        if section > 0 {            return CGSizeZero        } else {            return CGSize(wIDth: collectionVIEw.frame.wIDth,height: CGfloat(195))        }    }    func collectionVIEw(collectionVIEw: UICollectionVIEw,sizeforItemAtPath indexPath: NSIndexPath) -> CGSize {        var newSize = CGSizeZero        if indexPath.section == 0 {            newSize =  CGSizeMake(CGfloat(105),CGfloat(105))        } else {            newSize = CGSizeMake(CGfloat(313),CGfloat(200))        }        return newSize    }    overrIDe func collectionVIEw(collectionVIEw: UICollectionVIEw,vIEwForSupplementaryElementOfKind kind: String,atIndexPath indexPath: NSIndexPath) -> UICollectionReusableVIEw {        switch kind {            case UICollectionElementKindSectionheader:                let headerVIEw = collectionVIEw.dequeueReusableSupplementaryVIEwOfKind(kind,withReuseIDentifIEr: "inverterheader",forIndexPath: indexPath)                return headerVIEw            default:                assert(false,"Unexpected element kind")        }    }    /**     Two sections in this UICollectionVIEw: First one for clock items,second one for other parameters.     */    overrIDe func numberOfSectionsInCollectionVIEw(collectionVIEw: UICollectionVIEw) -> Int {        return 2    }    /**     First section contains one cell     Second section contains three cells     */    overrIDe func collectionVIEw(collectionVIEw: UICollectionVIEw,numberOfItemsInSection section: Int) -> Int {        var items = 0        if section == 0 {            items = 7        } else {            items = 3        }        return items    }    overrIDe func collectionVIEw(collectionVIEw: UICollectionVIEw,cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionVIEwCell {        var cellIDentifIEr = ""        if indexPath.section == 0 {            cellIDentifIEr = moduleCell        } else {            cellIDentifIEr = parameterCell        }        let cell = collectionVIEw.dequeueReusableCellWithReuseIDentifIEr(cellIDentifIEr,forIndexPath: indexPath)        cell.layer.cornerRadius = 6        cell.layer.masksToBounds = true        return cell    }}

CollectionVIEw的Interface Builder配置

模拟器截图(非期望的结果;所有单元格具有相同的宽度)

解决方法 您可以使用collectionVIEw(collectionVIEw:UICollectionVIEw,layout collectionVIEwLayout:UICollectionVIEwLayout,sizeforItemAtIndexPath indexPath:NSIndexPath) – > CGSize委托方法来调整单元格大小.

在你的情况下你可以写这样的东西:

func collectionVIEw(collectionVIEw: UICollectionVIEw,sizeforItemAtIndexPath indexPath: NSIndexPath) -> CGSize {    let wIDth : CGfloat    let height : CGfloat    if indexPath.section == 0 {        // First section        wIDth = collectionVIEw.frame.wIDth/7        height = 50        return CGSizeMake(wIDth,height)    } else {        // Second section        wIDth = collectionVIEw.frame.wIDth/3        height = 50        return CGSizeMake(wIDth,height)    }}

将此代码放在collectionVIEwController类中.将高度设置为细胞高度应该是多少.如果在collectionVIEw中使用单元格或插图之间的间距,则可能需要调整宽度.

总结

以上是内存溢出为你收集整理的ios – 使用UICollectionView具有不同单元大小的部分全部内容,希望文章能够帮你解决ios – 使用UICollectionView具有不同单元大小的部分所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1072992.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存