Here is how I setup my collectionview:
let layout = NSCollectionViewFlowLayout.init()
layout.scrollDirection = .vertical
layout.minimumLineSpacing = 20
layout.minimumInteritemSpacing = 20
pCollectionView.collectionViewLayout = layout
pCollectionView.backgroundColors = [NSColor.clear]
pCollectionView.dataSource = self
pCollectionView.delegate = self
pCollectionView.isSelectable = true
And in the collectionview's delegate:
func collectionView(_ collectionView: NSCollectionView, layout collectionViewLayout: NSCollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> NSSize {
return NSSize(width: 240, height: 135)
}
At first, it looks good.
But after I resized the App's window, weired things come up.Here is how it looks like:
How can I fix this? Thanks.
You will have to set the size of the cells according to the size of the collectionView.frame
layout.minimumLineSpacing = 20
layout.minimumInteritemSpacing = 20
Is not a constraint and will not keep the cells like you want them.
You will have to :
extension YourViewController: UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
//work out the size of cell according to how many you want in a row
return CGSize(width: screenWidth/3, height: cellHeight)
}
}
After a while, I found it is completely my fault.
In the collectionview's delegate method, I forgot to use func makeItem(withIdentifier identifier: NSUserInterfaceItemIdentifier, for indexPath: IndexPath) -> NSCollectionViewItem, instead I am using init(nibName: nil, bundle: nil) every time!.
I felt such a fool.
Related
I have a cUIolectionView that sometimes has only 1 item. If that is the case, the item is aligned in the middle, see picture:
But what I want, is that the item is aligned to the left.
I have found this answer on StackOverflow, leftAlign cells in UIColectioniew - StackOverFlow, but when I added the class given in the accepted answer to my codeBase, and added this to the viewControler:
let leftAlignLayout = AlignedCollectionViewFlowLayout(horizontalAlignment: .left, verticalAlignment: .top)
gamesColectionView.collectionViewLayout = leftAlignLayout
it did align the way I wanted, but it made the cells very small(see picture)
I also tried to add this from Github: AlignedCollectionViewFlowLayout - GitHub but that had the same result.
I tried fixing that bug by adding this to my viewController File:
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 130, height: 130)
}
but that didn't work.
does anybody have a suggestion on how I can fix this? I don't know what I did wrong or what I forgot to do.
thanks a lot!
BSM
You can manage your cell with below code. Do not forget to add UICollectionViewDelegateFlowLayout
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
// your code here
}
Try this:
var layout: UICollectionViewFlowLayout = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.minimumLineSpacing = 8.0
layout.minimumInteritemSpacing = 8.0
let width = (UIScreen.main.bounds.size.width - 40.0) / 4
layout.estimatedItemSize = CGSize(width: width, height: 98.0)
return layout
}()
And:
override func viewDidLoad() {
super.viewDidLoad()
self.collectionView?.collectionViewLayout = layout
self.collectionView!.contentInset = UIEdgeInsets(top: 0, left: 0, bottom:0, right: 0)
}
You don't need to use sizeForItemAt. If you want more you can look my project. Check constraints of your imageView with it's superview
You don't need to do anything special to get the collectionViewCells left aligned.
If the constraints are proper, the cells will automatically start rendering from the left.
class VC: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 130, height: 130)
}
}
Simply set the scrollDirection to vertical or horizontal as per your requirement within the storyboard itself.
There is no need to use any 3rd party library to get that working.
I've been trying to figure out how to accomplish this kind of gridView display for my app,
Image example of what i need to accomplish
i have this block of codes, which came from another question relating to gridView,
but the texts inside each views are not displaying properly
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let flowayout = collectionViewLayout as? UICollectionViewFlowLayout
let space: CGFloat = (flowayout?.minimumInteritemSpacing ?? 0.0) + (flowayout?.sectionInset.left ?? 0.0) + (flowayout?.sectionInset.right ?? 0.0)
let width = self.collectionView.frame.size.width
let size:CGFloat = (width - space) / 2.0
if indexPath.row == 0 {
return CGSize(width: width, height: width / 2.0)
}
return CGSize(width: size, height: size)
}
Well , This is something you have just give layout to collection view but you have to use CustomCell to proper design inside items of collectionview, also for above layout guide i would suggest to use Extension like this
Extension Yourviewcontroller: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width = self.collectionView.frame.size.width
let size:CGFloat = (width - space) / 2.0
if indexPath.row == 0 {
return CGSize(width: width, height: width / 2.0)
}
return CGSize(width: size, height: size)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 10
}
}
Regarding custom cell creation use this link https://www.ioscreator.com/tutorials/custom-collection-view-cell-ios-tutorial ,
In your case just use one cell with one image and 2 lables below and make them centerAlign(Using constraint) And use that cell on your viewcontroller as below
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! CollectionViewCell
cell.imageView.image = Yourimage
cell.lableName.text = yourlable
cell.lableDetail.text = yourdetailtext
return cell
}
let me know if you need any other help on this
I am looking to put a header on my collection view's sections. I have a collectionview embedded inside a tablebview. Using the section headers of the tableview puts the header too far from the content. Putting the section header as part of the collection view; however, is putting that header on top of the collection view cell itself. I am looking for some space between the section header and the section detail.
func setup() {
let layout = UICollectionViewFlowLayout()
layout.itemSize = THUMB_SIZE
layout.minimumLineSpacing = 25
layout.sectionInset.right = layout.itemSize.width / 2
layout.scrollDirection = .horizontal
collectionView = UICollectionView(frame: self.bounds, collectionViewLayout: layout)
collectionView.backgroundColor = UIColor(named: "collectionView")
collectionView.delegate = self
collectionView.dataSource = self
collectionView.remembersLastFocusedIndexPath = true
collectionView.register(MainCVCell.self, forCellWithReuseIdentifier: "cvCell")
self.addSubview(collectionView)
self.collectionView.register(HeaderCVCell.self, forCellWithReuseIdentifier: "headerCell")
}
// MARK: - Collectionview Delegate & Datasource
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return topics.shows.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cvCell", for: indexPath) as! MainCVCell
cell.show = topics.shows[indexPath.row]
cell.selectedIndex = indexPath.row
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
delegate.selectedMedia(showID: topics.shows[indexPath.row])
}
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
let footerView = collectionView.dequeueReusableCell(withReuseIdentifier: "headerCell", for: indexPath)
if kind == UICollectionView.elementKindSectionHeader {
let headerView = collectionView.dequeueReusableCell(withReuseIdentifier: "headerCell", for: indexPath) as! HeaderCVCell
headerView.headerText = topics.title
return headerView
} else {
return footerView
}
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSize(width: 172, height: 60)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
return .zero
}
Now for collection view header cell:
class HeaderCVCell: UICollectionViewCell {
var headerText:String! {
didSet {
setup()
}
}
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
private func setup() {
let headerLabel = UILabel()
headerLabel.text = headerText
headerLabel.textColor = .white
headerLabel.sizeToFit()
self.subviews.forEach {$0.removeFromSuperview()}
self.addSubview(headerLabel)
}
}
One thing I noted by putting a background color on the header cell itself, is that the height of the header cell is equaling the height of the collection view. There does not though seem to be anyway that I can adjust the height of the header view cell independently of the collection view cells. If I change layout.itemSize it changes the size for both the header and the content. If I use layout.headerReferenceSize, it does not change anything. I am also using the delegate method as you can see from the code. Per the documentation it appears that it won't look at the height when in a horizontal scrolling situation such as this is. I have also tried to set the frame of the header cell directly but this is ignored.
Net, my section header is crashing into my regular content in the collection view. I suspect this might be because the height of the header is the height of the collection view and thus it is being positioned as high as it can go. I cannot change the height nor find any other way to separate the header from the content.
I have a similar set up and in my Header file, I have the size set with:
override func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: frame.width / 2 + 60, height: frame.height)
}
And, if you want to create some spacing, you can use insets. Setting the top to a negative number should show some space after the header.
override func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
I'm trying to auto-resize the cell of a collection view. In the iPhone 8 the design is okay, but when I try it on other devices, especially with the iPhone SE, the cell is not autoresizing and often the cell is too big or too small. I'm working with:
extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate {
If what you are trying to do is this
No matter the screen size, I always want 2 (or say n) items a row !
Then you need UICollectionViewFlowLayout
You can try the following piece of code
let itemSize = UIScreen.main.bounds.width/2 - 3
let layout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
layout.itemSize = CGSize(width: itemSize, height: itemSize)
layout.minimumInteritemSpacing = 3
layout.minimumLineSpacing = 3
collectionView.collectionViewLayout = layout
In the above code , replace 2 on line:
let itemSize = UIScreen.main.bounds.width/2 - 3
with the number of items you want in a single row
You can place this code in viewDidLoad() or viewDidAppear()
This is happening due to the mismatch between your
EdgeInset
Cell Spacing
Width of your Cell
Solution:-
Add the UICollectionViewDelegateFlowLayout delegate and add these methods and update your values according to your requirement like :-
let edge : CGFloat = 10.0
let spacing : CGFloat = 10.0
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 0, left: edge, bottom: 0, right: edge)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return spacing
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let noOfColumn = 2
let collectionviewWidth = collectionView.frame.width
let bothEdge = CGFloat(edge + edge) // left + right
let excludingEdge = collectionviewWidth - bothEdge
let cellWidthExcludingSpaces = excludingEdge - ((noOfColumn-1) * spacing)
let finalCellWidth = cellWidthExcludingSpaces / noOfColumn
let height = finalCellWidth
return CGSize(width: finalCellWidth, height: height)
}
Add UICollectionViewDelegateFlowLayout method
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: value, height: value)
}
Try this it will work:
First you have to Add the UICollectionViewDelegateFlowLayout delegate and then use following delegate method it will work fine for me.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let padding: CGFloat = 10
let collectionViewSize = collectionView.frame.size.width - padding
return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
}
Xcode 10 / Swift 4
Implement the below method,, it is autoresized base on the screen you have.
// Collection View Layout
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let screenWidth = UIScreen.main.bounds.width
return CGSize.init(width: (screenWidth-55) / 2, height: (screenWidth-55) / 2 * 1.481)
}
Hi I am creating an app which requires a grid of images. As an example I am using a 2x2 grid of images in cells of a UICollectionView. I would like to know how I could decrease the annoying space in the middle and also make them have equal widths and heights to fit the whole screen. I know that I can do this with Interface builder. However, I want to do this programmatically because as the app progresses, there will be different levels and different number of squares - possibly a 10x10 also. I am new to UICollectionViews. I have referenced to many other questions, however most are in Objective C and there few that are in Swift don't seem to work with Swift 3.
Here is my full code:
import UIKit
class GameViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout{
#IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
collectionView.delegate = self
collectionView.dataSource = self
let collectionViewLayout = self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout
collectionViewLayout.minimumLineSpacing = 0
collectionViewLayout.minimumInteritemSpacing = 0
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 2;
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 2
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
let image = cell.viewWithTag(1) as! UIImageView
image.image = #imageLiteral(resourceName: "coffee")
return cell;
}
func collectionView(_collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: self.collectionView.frame.size.width/2, height: self.collectionView.frame.size.height/2)
//this method is not getting called
}
}
I am also uploading an image of how it currently is and how I want it to be-
I hope you guys will help me- it will be very useful... Thanks!
I conformed to UICollectionViewDelegateFlowLayout and called sizeforitematindexpath but it did not work.
On adding a breakpoint I realized that the method was not getting called. So is there anything wrong I'm doing here. Also Xcode gives me this warning -
Make sure that:
Confirming to UICollectionViewDelegateFlowLayout.
collectionView's width = screen's width.
Min Spacing for cells is zero. You can change it from the Interface Builder (Select the collectionView -> show size inspector -> set min spacing to 0), or by implementing minimumInteritemSpacingForSectionAt returning zero.
If you want to fill the whole Screen height (I am asking because this is not what provided in your screenshot), collectionView's height = screen's height.
Finally, implement sizeForItemAtIndexPath method:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.frame.width / 2, height: 100)
}
Use following code in viewDidLoad
let collectionViewLayout = self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout
collectionViewLayout.minimumLineSpacing = 0
collectionViewLayout.minimumInteritemSpacing = 0
collectionViewLayout.itemSize = CGSize(width: UIScreen.main.bounds.width/2, height: UIScreen.main.bounds.width/2)
Use "UICollectionViewDelegateFlowLayout" Delegate for set size for CollectionView cell size
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: UIScreen.main.bounds.width/2, height: UIScreen.main.bounds.width/2)
}
I hope this will helpfull for you.
You can use the following to size the cells:
extension GameViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let cellWidth = self.collectionView.bounds.width / 2
return CGSize(width: cellWidth, height: cellWidth)
}
}
Also, add the following lines at the end of viewDidLoad() to get rid of the unwanted white space:
let collectionViewLayout = self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout
collectionViewLayout.minimumLineSpacing = 0
collectionViewLayout.minimumInteritemSpacing = 0