I have an issue with a UICollectionView that doesn't want to scroll horizontally. I want to show 5 cells that I can scroll between. What is preventing my collectionview from scrolling?
import UIKit
class FeaturedCell: UICollectionViewCell, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout
{
// Attributes
lazy var featuredVideos = UICollectionView(frame: .zero)
// Superclass initializer
required init?(coder aDecoder: NSCoder)
{
fatalError("init(coder:) has not been implemented")
}
// Custom initializer
required override init(frame: CGRect)
{
super.init(frame: frame)
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .Horizontal
featuredVideos = UICollectionView(frame: self.frame, collectionViewLayout: layout)
featuredVideos.dataSource = self
featuredVideos.delegate = self
// Setting the collection view's scrolling behaviour
featuredVideos.pagingEnabled = true
featuredVideos.scrollEnabled = true
featuredVideos.setContentOffset(CGPoint(x: 0,y: 0), animated: true)
featuredVideos.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "cellId")
addSubview(featuredVideos)
setConstraints("H:|[v0(\(frame.width))]|", subviews: featuredVideos)
setConstraints("V:|[v0(345)]", subviews: featuredVideos)
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 5
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell
{
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cellId", forIndexPath: indexPath)
if indexPath.item == 1 { cell.backgroundColor = .lightGrayColor() } else { cell.backgroundColor = .brownColor() }
return cell
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
return CGSizeMake(frame.width/3, frame.height)
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat
{
return 10
}
}
Edit : UICollectionView actually doesn't react to any interaction, i tried "didSelectAtIndexPath", doesn't trigger.
To realize UICollectionView with UICollectionView in UICollectionViewCell try this idea (both of the collectionViews are scrollable):
CollectionViewController.swift
import UIKit
class CollectionViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout
{
var featuredVideos: UICollectionView?
override func viewDidLoad() {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .Horizontal
featuredVideos = UICollectionView(frame: UIScreen.mainScreen().bounds, collectionViewLayout: layout)
featuredVideos!.dataSource = self
featuredVideos!.delegate = self
// Setting the collection view's scrolling behaviour
featuredVideos!.pagingEnabled = true
featuredVideos!.scrollEnabled = true
featuredVideos!.setContentOffset(CGPoint(x: 0,y: 0), animated: true)
featuredVideos!.registerClass(CollectionViewCell.self, forCellWithReuseIdentifier: "cellId")
view.addSubview(featuredVideos!)
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 5
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell
{
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cellId", forIndexPath: indexPath) as! CollectionViewCell
cell.initCell()
if indexPath.item%2 == 0
{
cell.backgroundColor = .lightGrayColor()
}
else
{
cell.backgroundColor = .brownColor()
}
return cell
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
return CGSizeMake(300, UIScreen.mainScreen().bounds.height)
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat
{
return 10
}
}
CollectionViewCell.swift
class CollectionViewCell: UICollectionViewCell, UICollectionViewDataSource, UICollectionViewDelegate
{
var collectionView: UICollectionView?
func initCell () {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .Horizontal
var collectionViewBounds = self.bounds
collectionViewBounds.size.height -= 80
collectionViewBounds.origin.y = 40
collectionView = UICollectionView(frame: collectionViewBounds, collectionViewLayout: layout)
collectionView!.dataSource = self
collectionView!.delegate = self
// Setting the collection view's scrolling behaviour
collectionView!.pagingEnabled = true
collectionView!.scrollEnabled = true
collectionView!.setContentOffset(CGPoint(x: 0,y: 0), animated: true)
collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "cellWithCollectionView")
addSubview(collectionView!)
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell
{
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cellWithCollectionView", forIndexPath: indexPath)
if indexPath.item%2 == 0
{
cell.backgroundColor = .blueColor()
}
else
{
cell.backgroundColor = .whiteColor()
}
return cell
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
return CGSizeMake(100, collectionView.frame.height)
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat
{
return 10
}
}
I've found the problem.
In the parent view, I added a border to this view (which is a UICollectionViewCell in the parent view) inside the cellForItemAtIndexPath(), and that caused the view to only load the first cells and refuse any interaction.
I fixed it by adding the border in the init() inside the "child view" which worked just fine.
Thank you all for your help :)
If you are using Scroll View delegate methods, then this problem may come.
So, resolve by adding this line into those delegate methods :
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if scrollView.isKind(of: UICollectionView.self)
{
return
};
}
Related
I am having a collection view. I want to create cells of collection view as TAGS. I Have written but it does not calculate the width & also left,irght margin among cells. Please tell me how can I improve it ?
extension StoreItemCell:UICollectionViewDelegate {
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let width = CGSize(
return self.sizingCell!.systemLayoutSizeFitting(UILayoutFittingCompressedSize)
}
}
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
self.tagsCollectionView.delegate = self
self.tagsCollectionView.dataSource = self
let cellNib = UINib(nibName: Titles.CellIdentifier.TagCell, bundle: nil)
self.tagsCollectionView.register(cellNib, forCellWithReuseIdentifier: Titles.CellIdentifier.TagCell)
self.tagsCollectionView.backgroundColor = UIColor.clear
self.sizingCell = (cellNib.instantiate(withOwner: nil, options: nil) as NSArray).firstObject as! TagCell?
self.flowLayout.sectionInset = UIEdgeInsetsMake(8, 8, 8, 8)
self.flowLayout.minimumInteritemSpacing = 15
}
Please tell me how can I improve it. I have attached the screenshot for my design.
Add this one
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let Labell : UILabel = UILabel()
Labell.text = self.TagsArray[indexPath.item] as? String
let labelTextWidth = Labell.intrinsicContentSize.width
return CGSize(width: labelTextWidth + 10, height: 30)
}
create UILabel in
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
{
}
Your code should be in your parent class, not in cell class,
extension YourViewController:UICollectionViewDelegate {
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return //YourCellSize here
}
}
You have to use that delegate method in your parent class. Not in Cell Class.
I have a UICollectionView setup like so:
In viewDidLoad:
func setupCollectionView() {
collectionView.delegate = self
collectionView.dataSource = self
collectionView.register(UINib(nibName: "NewQuizzesCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "NewQuizzesCollectionViewCell")
let flowLayout = UICollectionViewFlowLayout()
flowLayout.scrollDirection = .horizontal
flowLayout.minimumInteritemSpacing = 20
flowLayout.minimumLineSpacing = 20
collectionView.isPagingEnabled = true
collectionView.setCollectionViewLayout(flowLayout, animated: false)
}
And my delegates:
extension NewQuizzesViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 3
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell: NewQuizzesCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "NewQuizzesCollectionViewCell", for: indexPath) as! NewQuizzesCollectionViewCell
cell.backgroundColor = colors[indexPath.row]
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.frame.size.width*0.8, height: collectionView.frame.size.height*0.8)
}
}
When I run the app it looks like this:
My question is, how can I make the cells centered? I noticed I can adjust the spacing between the cells, but how would I add spacing to the left of the red cell? Any pointers on this would be really appreciated. Thanks!
Try this delegate function will help and you need to set width of cell according to you wants
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionat section: Int) -> CGFloat {
return 0
}
Hope it will help you
you try that code that may help you..
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
let offSet = self.collectionView.contentOffset
let width = self.collectionView.bounds.size.width
let index = round(offSet.x / width)
let newPoint = CGPoint(x: index * size.width, y: offSet.y)
coordinator.animate(alongsideTransition: { (UIViewControllerTransitionCoordinatorContext) in
},completion: {(UIVIewTransitionCoordinatorContext) in
self.collectionView.reloadData()
self.collectionView.setContentOffset(newPoint, animated: true)
})
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.frame.size.width, height: collectionView.frame.size.height)
}
for swift 3.0
minimumLineSpacingForSectionAt function use for set spacing between the cells of UICollectionView Layout..
and you need to add subclass of UICollectionViewDelegateFlowLayout so you can use the function minimumLineSpacingForSectionAt like this
class HomeBestSallingCatgCell: DatasourceCell ,UICollectionViewDelegate,UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
.......
......
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0 //set return 0 for no spacing you can check to change the return value
}
}
i hope it will useful for you
cellForItemAt indexPath does not call if I'm using UICollectionViewDelegateFlowLayout.
In this case:
class Something: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
}
it calls my cellforItemAtIndexPath, but does not call my
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
}
but if I include UICollectionViewDelegateFlowLayout:
class Something: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
}
it will call:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
}
but will not call cellForItemAtIndexPath. I do not understand the problem. Is that a bug of iOS or I do not see anything?
For me, when creating the collectionView with layout, it should be let layout = UICollectionViewFlowLayout(), not let layout = UICollectionViewLayout() which is so easy to neglect. I was trapped in this like more than twice.
Try this code.
import UIKit
let kSCREENWIDTH = UIScreen.main.bounds.size.width
let kSCREENHEIGHT = UIScreen.main.bounds.size.height
let COLLECTION_CELL = "collectionCell"
class DemoController: UIViewController {
var collectionView : UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
setupCollectionView()
}
/// create programatically collection view
fileprivate func setupCollectionView() {
let layout = UICollectionViewFlowLayout()
// layout.itemSize = CGSize(width:(kSCREENWIDTH-20)/2,height:150)
layout.sectionInset = UIEdgeInsetsMake(5, 7, 5, 7)
layout.minimumLineSpacing = 5
layout.minimumInteritemSpacing = 1
collectionView = UICollectionView.init(frame: self.view.bounds, collectionViewLayout: layout)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.backgroundColor = UIColor.white
self.view .addSubview(collectionView)
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: COLLECTION_CELL)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
//MARK: UICollectionViewDelegate
extension DemoController : UICollectionViewDelegate {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
// add your code here
}
}
//MARK: UICollectionViewDataSource
extension DemoController : UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
/// add your code here
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: COLLECTION_CELL, for: indexPath)
cell.backgroundColor = UIColor.lightGray
print("Here cellForItemAt Works")
return cell
}
}
//MARK: UICollectionViewDelegateFlowLayout
extension DemoController : UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
print("Here sizeForItemAt Works")
return CGSize(width: 150, height: 150)
}
}
In my case contentInset was not proper for the UICollectionView sub class.
Try adding below code in you sub class
override func layoutSubviews() {
super.layoutSubviews()
self.contentInset = UIEdgeInsetsMake(0, 0, 0, 0)
}
override func reloadData() {
DispatchQueue.main.async {
super.reloadData()
}
}
Hope this helps someone!
Returning a size of CGSize(width: 0, height: 0) caused the delegate cellForItemAt not to get called in my case.
For example:
This would result in the issue.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 0, height: 0)
}
Where as this would not.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 10, height: 10)
}
I have some strange problems with collectionView.
Firstly, I have a UIView subclass with collectionView inside it. It looks like this
class UsersListMenu:UIView, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout{
lazy var collectionView:UICollectionView = {
var layout = UICollectionViewFlowLayout()
layout.scrollDirection = .Horizontal
var collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.translatesAutoresizingMaskIntoConstraints = false
return collectionView
}()
let cellId = "cellId"
let menuArrayItems = ["Подходящие", "Онлайн", "Новые", "Рядом", "Избранные"]
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(collectionView)
collectionView.leadingAnchor.constraintEqualToAnchor(leadingAnchor).active = true
collectionView.trailingAnchor.constraintEqualToAnchor(trailingAnchor).active = true
collectionView.topAnchor.constraintEqualToAnchor(topAnchor).active = true
collectionView.bottomAnchor.constraintEqualToAnchor(bottomAnchor).active = true
collectionView.registerClass(UsersListMenuCell.self, forCellWithReuseIdentifier: cellId)
collectionView.backgroundColor = .whiteColor()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(cellId, forIndexPath: indexPath) as! UsersListMenuCell
cell.label.text = menuArrayItems[indexPath.item]
return cell
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 5
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSizeMake(100, 40)
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
return UIEdgeInsetsZero
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
return 0
}
}
As you see cell height is set to 40. Then I create instance of that view in my ViewController
class UsersListViewController: UIViewController {
var menu:UsersListMenu = {
var menu = UsersListMenu()
menu.translatesAutoresizingMaskIntoConstraints = false
return menu
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(menu)
menu.topAnchor.constraintEqualToAnchor(view.topAnchor, constant: 80).active = true
menu.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor).active = true
menu.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor).active = true
menu.heightAnchor.constraintEqualToConstant(40).active = true
}
}
The problem that menu looks blank - cells cannot be seen
unless I set height of menu in view controller to 100
menu.heightAnchor.constraintEqualToConstant(100).active = true
then it look like this
What happens here ?
I have a UICollectionView with vertical cells alignment, but I want also vertical section alignment, I also want to keep the sections inside the current frame of the UICollectionView, that means if a section reach the end and it's longer then the collection itself, then it will go to next line.
This is how it looks right now:
This is the final result I want to end up with:
This is my code so far:
class LettersCollectionTestViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
#IBOutlet weak var collectionContainer: UIView!
var collectionView: UICollectionView?
private let ReuseIdentifierCollectionLetterCell = "LetterCollectionViewCell"
var collectionWords: NSArray?
var itemSize: CGFloat = 25.0
var itemSpacing: CGFloat = 5.0
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
let logoWord: String = "This is just this"
self.collectionWords = logoWord.componentsSeparatedByString(" ")
self.initializeCollection()
}
func initializeCollection() {
let collectionViewLayout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
collectionViewLayout.itemSize = CGSizeMake(self.itemSize, self.itemSize)
collectionViewLayout.minimumInteritemSpacing = 0
collectionViewLayout.minimumLineSpacing = self.itemSpacing
collectionViewLayout.scrollDirection = UICollectionViewScrollDirection.Vertical
let collectionView: UICollectionView = UICollectionView(frame: self.collectionContainer.bounds, collectionViewLayout: collectionViewLayout)
collectionView.delegate = self;
collectionView.dataSource = self;
collectionView.showsHorizontalScrollIndicator = false
collectionView.showsVerticalScrollIndicator = false
collectionView.registerClass(LetterCollectionViewCell.self, forCellWithReuseIdentifier: self.ReuseIdentifierCollectionLetterCell)
collectionView.registerNib(UINib(nibName: self.ReuseIdentifierCollectionLetterCell, bundle: nil), forCellWithReuseIdentifier: self.ReuseIdentifierCollectionLetterCell)
self.collectionView = collectionView
self.collectionContainer.addSubview(collectionView)
}
// MARK: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
print("clicked item at index: \(indexPath.row)")
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell: LetterCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier(self.ReuseIdentifierCollectionLetterCell, forIndexPath: indexPath) as! LetterCollectionViewCell
let scalingTransform: CGAffineTransform = CGAffineTransformMakeScale(-1, 1)
cell.transform = scalingTransform
return cell
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return (self.collectionWords?.objectAtIndex(section).length)!
}
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return (self.collectionWords?.count)!
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: self.itemSpacing, left: self.itemSpacing, bottom: self.itemSpacing, right: self.itemSpacing)
}
}
What do I need to do? I know I should create a custom FlowLayout, but where should I start? I never did it before.
Thanks in advance!