最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

[未解决]如何让UICollectionView支持自动布局

iOS crifan 859浏览 0评论

折腾:

[已解决]tableview中内嵌的UICollectionView中的UICollectionViewCell不显示

期间,如果去掉自动布局,

虽然界面乱,但是可以执行到:

collectionView的cellForItemAtIndexPath

界面是可以显示的

现在希望:

让UICollectionView和支持自动布局

swift UICollectionView autolayout

UICollectionView Tutorial Part 1: Getting Started

Dynamic-Collection-View-Cell-With-Auto-Layout-Demo/ViewController.swift at master · honghaoz/Dynamic-Collection-View-Cell-With-Auto-Layout-Demo

UICollectionViewFlowLayout autolayout

ios – Specifying one Dimension of Cells in UICollectionView using Auto Layout – Stack Overflow

blommegard/SBTableLayout: A customizable UICollectionViewLayout to use instead of UITableView

ios – Auto Layout in UICollectionViewCell not working – Stack Overflow

uicollectionview autolayout

uicollectionview – UICollectionViewCell dynamic height with autolayout – Stack Overflow

 uicollectionview autolayout not call cellForItemAtIndexPath

autolayout uicollectionview not call cellForItemAtIndexPath

ios – UICollectionView in embedded view controller does NOT call cellForItemAtIndexPath – Stack Overflow

到最后,也还是没有实现:

当父视图,不制定collectionView的frame的时候,让CollectionView内部自动布局,适配父视图

而只能做到:

当设置CollectionView的时候,主动,事先的设置对应的宽和高

才能CollectionView内部才可以自动根据item的size,去布局。。。

目前用:

//

//  OptionTableViewCell.swift

//  SalesApp

//

//  Created by licrifan on 16/5/26.

//  Copyright © 2016年 licrifan. All rights reserved.

//

import UIKit

import Cartography

let OptionTableViewCellId:String = "OptionTableViewCellId"

let OptionSubViewPaddingX:CGFloat = 10

let OptionTitlePaddingTop:CGFloat = 15

let OptionTitleHeight:CGFloat = 30

let OptionOptionListHeight:CGFloat = 80

let OptionOptionListPaddingTop:CGFloat = 10

let OptionOptionListPaddingBottom:CGFloat = 15

let OptionCollectionViewCellId:String = "OptionCollectionViewCellId"

let OptionCellBackgroundColorNotSelected:UIColor = UIColor(hexString: "#F6F6F6")!

let OptionCellBackgroundColorSelected:UIColor = UIColor(hexString: "#D91479")!

let OptionCellItemLabelFont:UIFont = UIFont.systemFontOfSize(13)

let OptionCellItemLabelWidth:CGFloat = 60

let OptionCellItemLabelHeight:CGFloat = 30

let MainScreenWidth:CGFloat = UIScreen.mainScreen().bounds.width

let FilterCustomerTableViewWidth:CGFloat = MainScreenWidth * 0.8

let OptionCellInsets:UIEdgeInsets = UIEdgeInsetsMake(5, 5, 5, 5)

class OptionTableViewCell: UITableViewCell, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

//class OptionTableViewCell: UITableViewCell, UICollectionViewDataSource, UICollectionViewDelegate {

    var title:String

    var optionList:[String]

    var titleLabel:UILabel

    var optionListCollectionView:UICollectionView

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {

        title = ""

        optionList = [String]()

        titleLabel = UILabel()

        let collectionViewFrame:CGRect = CGRectMake(0, OptionTitleHeight, FilterCustomerTableViewWidth, OptionOptionListHeight)

        //collection view layout

        let flowLayout:UICollectionViewFlowLayout = UICollectionViewFlowLayout()

//        flowLayout.scrollDirection = .Horizontal

        flowLayout.scrollDirection = .Vertical

        flowLayout.sectionInset = OptionCellInsets

        flowLayout.minimumInteritemSpacing = 10

        flowLayout.minimumLineSpacing = 5

        //flowLayout.itemSize = CGSize(width: 60, height: OptionCellItemLabelHeight)

        //        flowLayout.itemSize = CGSize(width: 30, height: OptionCellItemLabelHeight)

        optionListCollectionView = UICollectionView(frame: collectionViewFrame, collectionViewLayout: flowLayout)

        super.init(style: style, reuseIdentifier: reuseIdentifier)

        self.selectionStyle = UITableViewCellSelectionStyle.None

        self.imageView?.image = nil

        self.imageView?.hidden = true

        self.textLabel?.text = nil

        self.textLabel?.hidden = true

        self.detailTextLabel?.text = nil

        self.detailTextLabel?.hidden = true

        self.accessoryType = UITableViewCellAccessoryType.None

        self.accessoryView = nil

    }

    required init?(coder aDecoder: NSCoder) {

        fatalError("init(coder:) has not been implemented")

    }

    convenience init(title:String, optionList:[String], reuseIdentifier:String?){

        self.init(style: UITableViewCellStyle.Subtitle, reuseIdentifier:reuseIdentifier)

        self.title = title

        self.optionList = optionList

        //1. title

        self.titleLabel.text = self.title

        self.titleLabel.font = UIFont.systemFontOfSize(17)

        self.contentView.addSubview(self.titleLabel)

        self.titleLabel.frame = CGRectMake(OptionSubViewPaddingX, 0, MainScreenWidth, OptionTitleHeight)

//        constrain(self.titleLabel) {titleLabel in

//            titleLabel.top == titleLabel.superview!.top + OptionTitlePaddingTop

//            titleLabel.left == titleLabel.superview!.left + OptionSubViewPaddingX

//            titleLabel.height == OptionTitleHeight

//        }

//        self.titleLabel.backgroundColor = UIColor.yellowColor()

        //2. option list

        self.optionListCollectionView.delegate = self

        self.optionListCollectionView.dataSource = self

        self.optionListCollectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: OptionCollectionViewCellId)

        self.optionListCollectionView.backgroundColor = UIColor.clearColor()

//        self.optionListCollectionView.backgroundColor = UIColor.greenColor()

        self.contentView.addSubview(self.optionListCollectionView)

//        constrain(self.optionListCollectionView, self.titleLabel) {optionListCollectionView, titleLabel in

//            optionListCollectionView.top == titleLabel.bottom + OptionOptionListPaddingTop

//            optionListCollectionView.left == titleLabel.left

//            optionListCollectionView.right == optionListCollectionView.superview!.right – OptionSubViewPaddingX

//            optionListCollectionView.bottom == optionListCollectionView.superview!.bottom – OptionOptionListPaddingBottom

//        }

    }

    /*************************************************************************

     * UICollectionViewDataSource Functions

     *************************************************************************/

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        return self.optionList.count

    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        gLog.verbose("collectionView=\(collectionView), indexPath=\(indexPath)")

        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(OptionCollectionViewCellId, forIndexPath: indexPath)

        cell.backgroundColor = OptionCellBackgroundColorNotSelected

        cell.layer.cornerRadius = 12

        cell.layer.borderWidth = 1

        cell.layer.borderColor = UIColor.clearColor().CGColor

        if indexPath.row < self.optionList.count {

            let curOption = self.optionList[indexPath.row]

            let curOptionLabel = UILabel()

            curOptionLabel.text = curOption

            curOptionLabel.font = OptionCellItemLabelFont

            curOptionLabel.textAlignment = .Center

            cell.contentView.addSubview(curOptionLabel)

            constrain(curOptionLabel) {curOptionLabel in

//                curOptionLabel.top == curOptionLabel.superview!.top + 5

//                curOptionLabel.left == curOptionLabel.superview!.left + 5

//                curOptionLabel.center == curOptionLabel.superview!.center

//                curOptionLabel.right == curOptionLabel.superview!.right – 5

//                curOptionLabel.bottom == curOptionLabel.superview!.bottom – 5

                curOptionLabel.top == curOptionLabel.superview!.top

                curOptionLabel.left == curOptionLabel.superview!.left

                curOptionLabel.center == curOptionLabel.superview!.center

                curOptionLabel.right == curOptionLabel.superview!.right

                curOptionLabel.bottom == curOptionLabel.superview!.bottom

            }

        }

        return cell

    }

    /*************************************************************************

     * UICollectionViewDelegate Functions

     *************************************************************************/

    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {

        gLog.verbose("collectionView=\(collectionView), indexPath=\(indexPath)")

        if let selectedCell = collectionView.cellForItemAtIndexPath(indexPath) {

            selectedCell.backgroundColor = OptionCellBackgroundColorSelected

        }

    }

    /*************************************************************************

     * UICollectionViewDelegateFlowLayout Functions

     *************************************************************************/

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

        gLog.verbose("collectionView=\(collectionView), collectionViewLayout=\(collectionViewLayout), indexPath=\(indexPath)")

//        let cellSize = CGSizeMake(OptionCellItemLabelWidth, OptionCellItemLabelHeight)

        var cellSize = CGSizeMake(0, OptionCellItemLabelHeight)

        let curOptionStr = self.optionList[indexPath.row]

        let optionStrSize = calcLabelTextSize(curOptionStr, font: OptionCellItemLabelFont)

        cellSize.width = (optionStrSize.width + OptionCellInsets.left + OptionCellInsets.right) * 1.1

        gLog.verbose("optionStrSize=\(optionStrSize), cellSize=\(cellSize)")

        return cellSize

    }

}

效果是:

然后去经过一番调整,但是还是不够好:

-》

还是需要手动去设置item的大小,以及间距如何。。。

-》所以,干脆还是手动去画对应的不同点item,用button去画,自己计算宽度,高度,间距,行高等等,就好了。

抽空自己重新去画。。。

后来也没有自己去画

只是调整了frame大小,达到自己的效果:

【已解决】swift中实现列表中显示多个可选择的选项

但是最终还是无法实现CollectionView的自动布局。。

转载请注明:在路上 » [未解决]如何让UICollectionView支持自动布局

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
57 queries in 0.132 seconds, using 18.83MB memory