在 iOS 中使用 Swift 3 的 CollectionView 动态高度 [英] CollectionView dynamic height with Swift 3 in iOS

查看:50
本文介绍了在 iOS 中使用 Swift 3 的 CollectionView 动态高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

最近,我正在尝试做一些项目来练习.所以我看了课程Developing Apps for iOS",斯坦福大学,CS193P,2017.

现在,我正在做Smashtag"项目,但我在其中遇到了一些问题.我想使用带有两个 UICollectionViewFlowLayout 的 CollectionView 来通过 SegmentedControl 在 CollectionView 的每个 xib 中显示两种类型(一种类似于 tableView,另一种是显示方形图像).

我的问题如下:

<块引用>

  1. 如何让 CollectionViewCell 像 TableView 的 UITableViewAutomaticDimension 一样以动态高度显示?

    这就是我刚刚在下面尝试的:

    我尝试使用 UICollectionViewFlowLayoutAutomaticSize 将 CollectionView 的 autoResize 设置设置为类似于 TableView 的 autoDimension.(@available(iOS 10.0, *))

enum CollectionViewType {案例推文案例图片}//MARK: - 决定什么样的 FlowLayoutfunc决定FlowLayout(类型:CollectionViewType)->UICollectionViewFlowLayout {//仅用于 .image 类型var howManyImageShowing = 3var imageShowingWidth:双{返回双(self.view.frame.width)/双(howManyImageShowing)}//.tweet 是一种类似 TableViewCell 的显示类型 ->这让我很困惑!!//另一种类型只是在正方形中显示图像 ->我这里没有问题让estimatedItemSize = type == .tweet ?CGSize(宽度:self.view.frame.width,高度:155.0):CGSize(宽度:imageShowingWidth,高度:imageShowingWidth)让 collectionViewLayout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()collectionViewLayout.sectionInset = UIEdgeInsets(顶部:0,左侧:0,底部:0,右侧:0)//--------- 像 TableView 一样进行此设置 ---------//------------ 像下面这样的东西------------/*tableView.estimatedRowHeight = 155.0tableView.rowHeight = UITableViewAutomaticDimension*/collectionViewLayout.estimatedItemSize = EstimatedItemSizecollectionViewLayout.itemSize = UICollectionViewFlowLayoutAutomaticSize//-------------------------------------------------------collectionViewLayout.minimumLineSpacing = 0collectionViewLayout.minimumInteritemSpacing = 0返回集合视图布局}

我的 CollectionViewCell xib 的约束在这里:但是当我运行这个应用程序时它有错误

我不知道我错过了什么或误解了什么.

<块引用>

  1. 为什么这个解决方案会奏效?

    我已经在 Stack Overflow 中搜索了很多这个问题的解决方案,但我只是找到了这个,让我很困惑:(

    此解决方案为视图提供了一个 宽度约束,该约束位于 CollectionViewCell xib 中,并将此约束的常量设置为一个值,然后它就可以工作了!我无法配置为什么 Width Constraint 会使单元格的高度动态化?这让我真的很困惑,我觉得这很奇怪......

    https://github.com/tttsunny/CollectionViewAutoSizingTest

class Cell: UICollectionViewCell {@IBOutlet 弱变量 headerLabel:UILabel!@IBOutlet 弱变量 descriptionLabel:UILabel!@IBOutlet 弱 var widthConstraint: NSLayoutConstraint!覆盖 funcawakeFromNib() {super.awakeFromNib()//初始化代码self.contentView.translatesAutoresizingMaskIntoConstraints = false让 screenWidth = UIScreen.main.bounds.size.widthwidthConstraint.constant = screenWidth - (2 * 12)}}

<块引用>

  1. 如何在不使用 UICollectionViewFlowLayoutAutomaticSize 的情况下实现 CollectionViewCell 动态高度.(@available(iOS 10.0, *)) ?

    因为我不仅要在 iOS 10 中处理不同的 iOS 版本,还要在 iOS 10 以下.

我真的很想成为 iOS 开发专家和优秀的开发人员,但我仍在学习和尝试.任何答复我将不胜感激.

谢谢!!

解决方案

使用以下代码根据显示的文字改变高度:

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) ->CGFloat {返回 0}func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) ->CG尺寸{返回 CGSizeMake(view.frame.width , 64)}覆盖 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) ->CG尺寸{让approximateWidthOfContent = view.frame.width - x//x 是左边标志的宽度让大小 = CGSize(宽度:approximateWidthOfContent,高度:1000)//1000 是较大的任意值,在内容量非常大的情况下应采用让属性 = [NSFontAttributeName: UIFont.systemFont(ofSize: 15)]让estimatedFrame = NSString(string: user.bioText).boundingRect(with: size, options: .usesLineFragmentOrigin, attributes: attributes, context: nil)返回CGSize(宽度:view.frame.width,高度:estimatedFrame.height + 66)}

Recently, I'm trying to do some projects for practicing. So I watched the course "Developing Apps for iOS", Stanford University, CS193P, 2017.

And now, I'm doing "Smashtag" project but I have some problems in it. I want to use a CollectionView with two UICollectionViewFlowLayout to show two types in each xib (one is like tableView, another is showing a image in square) of CollectionView by SegmentedControl.

My problems below :

  1. How to make CollectionViewCell showing in dynamic height just like TableView's UITableViewAutomaticDimension?

    And this is what I just tried below :

    I tried to make CollectionView's autoResize setting as like TableView's autoDimension with using UICollectionViewFlowLayoutAutomaticSize. ( @available(iOS 10.0, *) )

enum CollectionViewType {
  case tweet
  case image
}

// MARK: - Decide What Kind Of FlowLayout
func decideFlowLayout(type: CollectionViewType) -> UICollectionViewFlowLayout {

    // just for .image type
    var howManyImageShowing = 3  
    var imageShowingWidth: Double {
        return Double(self.view.frame.width) / Double(howManyImageShowing)
    }

    // .tweet is a type showing like TableViewCell -> this make me confused !!
    // another type is just showing a image in square -> I have no problem here
    let estimatedItemSize = type == .tweet ? CGSize(width: self.view.frame.width, height: 155.0) :
                                                CGSize(width: imageShowingWidth, height: imageShowingWidth)

    let collectionViewLayout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    collectionViewLayout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)

    // --------- Make this setting as TableView does --------- 
    // ------------ Somethis just like this below ------------
    /*
        tableView.estimatedRowHeight = 155.0
        tableView.rowHeight = UITableViewAutomaticDimension
    */

    collectionViewLayout.estimatedItemSize = estimatedItemSize
    collectionViewLayout.itemSize = UICollectionViewFlowLayoutAutomaticSize
    // ------------------------------------------------------- 

    collectionViewLayout.minimumLineSpacing = 0
    collectionViewLayout.minimumInteritemSpacing = 0

    return collectionViewLayout
}

Constraint of my CollectionViewCell xib here : But it has bug when I run this app

I don't know what I miss or misunderstand.

  1. Why this solution will work ?

    I already search so many solutions of this problem in Stack Overflow but I just find this and make me really confused :(

    This solution give the view a Width Constraint which is in CollectionViewCell xib and set this constraint's constant a value and it works! I can not configure out why Width Constraint will make the cell's height in dynamic? This make me really confused, I think this is weird...

    https://github.com/tttsunny/CollectionViewAutoSizingTest

class Cell: UICollectionViewCell {
    @IBOutlet weak var headerLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!
    @IBOutlet weak var widthConstraint: NSLayoutConstraint!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        self.contentView.translatesAutoresizingMaskIntoConstraints = false
        let screenWidth = UIScreen.main.bounds.size.width
        widthConstraint.constant = screenWidth - (2 * 12)
    }
}

  1. How to do CollectionViewCell dynamic height without using UICollectionViewFlowLayoutAutomaticSize. ( @available(iOS 10.0, *) ) ?

    Because I want to handle different iOS Versions not only in iOS 10 but also below iOS 10.

I really want to be pro in iOS development and a great developer but I'm still learning and trying. Any replies I will be greatly appreciated.

Thank you !!

解决方案

Use the following code to change the height according to the text displayed:

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    return CGSizeMake(view.frame.width , 64)
}
override func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
{
  let approximateWidthOfContent = view.frame.width - x
    // x is the width of the logo in the left 

  let size = CGSize(width: approximateWidthOfContent, height: 1000)

  //1000 is the large arbitrary values which should be taken in case of very high amount of content 

 let attributes = [NSFontAttributeName: UIFont.systemFont(ofSize: 15)]            
 let estimatedFrame = NSString(string: user.bioText).boundingRect(with: size, options: .usesLineFragmentOrigin, attributes: attributes, context: nil)
 return CGSize(width: view.frame.width, height: estimatedFrame.height + 66)          
 }

这篇关于在 iOS 中使用 Swift 3 的 CollectionView 动态高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆