Swift 3 iOS 10 - 带有图像和文本的 UICollectionView 无法正确显示
Posted
技术标签:
【中文标题】Swift 3 iOS 10 - 带有图像和文本的 UICollectionView 无法正确显示【英文标题】:Swift 3 iOS 10 - UICollectionView with image and text doesn't show up properly 【发布时间】:2017-07-20 09:40:05 【问题描述】:我是一名初学者 ios 开发人员,在实现 UICollectionView 时遇到了困难。这里是如何显示的:
这是我在 Storyboard 中的设计方式:
我正在尝试根据本教程实现这一点:
UICollectionView with Swift: Build Carousel Like Home Screen - iOS
这是我的 ViewController 类:
class SelectMorphologyViewController: UIViewController
@IBOutlet weak var collectionView: UICollectionView!
var morphology = Morphology.getMorphology()
override func viewDidLoad()
super.viewDidLoad()
// Do any additional setup after loading the view.
struct Storyboard
static let cellIdentifier = "Morphology cell"
extension SelectMorphologyViewController : UICollectionViewDataSource
func numberOfSections(in collectionView: UICollectionView) -> Int
return 1
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
return morphology.count
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: Storyboard.cellIdentifier, for: indexPath) as! MorphologyCollectionViewCell
cell.morphology = self.morphology[indexPath.item]
return cell
模型类:
class Morphology
var title = ""
var image : UIImage!
init(title : String , image : UIImage)
self.title = title
self.image = image
static func getMorphology() -> [Morphology]
return [Morphology(title : "Les épaules qui s’alignent avec les hanches." , image : UIImage (named: "8")!), Morphology(title : "Les épaules et des hanches dans le même alignement et une taille très peu marquée. " , image : UIImage (named: "h")!),Morphology(title : "Une petite poitrine, une taille fine et des épaules sont dans l’alignement des hanches." , image : UIImage (named: "x")!),Morphology(title : "Une carrure est plus large que les hanches." , image : UIImage (named: "v")!),Morphology(title : "Une carrure plus étroite que les hanches. " , image : UIImage (named: "a")!),Morphology(title : "La femme ronde :) " , image : UIImage (named: "o")!)]
最后是我的 CollectionViewCell 类:
class MorphologyCollectionViewCell: UICollectionViewCell
var morphology : Morphology!
didSet
updateUI()
@IBOutlet weak var image: UIImageView!
@IBOutlet weak var title: UILabel!
private func updateUI()
image?.image! = morphology.image
title?.text! = morphology.title
这是我的故事板设置的一些图像:
【问题讨论】:
添加一些你在做什么的代码, 您能否添加您的collectionView 委托和数据源代码,以及与您的collection view 布局相关的情节提要设置? ***.com/questions/44559745/… 你是否在 CollectionView 上添加了布局约束 【参考方案1】:您应该尝试 sizeForItemAt indexPath 像这样:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
return CGSize(width: self.view.frame.width, height: self.view.frame.height)
【讨论】:
我只是添加了这个功能,没有任何变化【参考方案2】:如果您发布了一些代码,我的回答会更准确
似乎问题在于 UICollectionViewCell 的大小。故事板不会反映单元格将如何呈现,它对您来说更像是一种视觉效果。为了修复它,您可能需要实现:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
【讨论】:
【参考方案3】:试试这个:
添加此功能并根据需要进行更改
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize
return CGSize(width: CGFloat(collectionView.frame.size.width / 2 - 5), height: CGFloat(135)) // 2 is for number of cell in one row you can change as per your needs
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
insetForSectionAt section: Int) -> UIEdgeInsets
return UIEdgeInsetsMake(0, 0, 0, 0)
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
minimumInteritemSpacingForSectionAt section: Int) -> CGFloat
return 10.0
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
minimumLineSpacingForSectionAt section: Int) -> CGFloat
return 10.0
【讨论】:
以上是关于Swift 3 iOS 10 - 带有图像和文本的 UICollectionView 无法正确显示的主要内容,如果未能解决你的问题,请参考以下文章
如何在不使用 UIWebView 的情况下在 iOS 10 中显示带有 HTML 标签的文本(使用 swift)
使用自动布局创建带有文本和图像的 iOS 7 UIButton
如何在 Xcode 8 和 iOS 10 中使用 AFNetworking 类和 Swift 3 上传图像