I am working with UICollectionView which has custom UICollectionViewLayout.I need spacing around UICollectionViewCell like i can get if i use UICollectionViewFlowLayout with this minimumInteritemSpacingForSectionAtIndex and minimumLineSpacingForSectionAtIndex.
This properties are not in UICollectionViewLayout. So how i can manage spacing between UICollectionViewCell in swift 2.1 or any idea?
I have tried this
let bcolor : UIColor = UIColor.whiteColor()
dataCell.layer.borderColor = bcolor.CGColor
dataCell.layer.borderWidth = 0.9
dataCell.layer.cornerRadius = 3
any better idea?
After a stupid amount of research I think that this code provides a skeleton for what you need:
import UIKit
class UICVC: UICollectionViewController, UICollectionViewDelegateFlowLayout {
// You probably want to implement this
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: 100, height: 100)
}
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
return CGFloat(10)
}
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
return CGFloat(10)
}
}
let uicv = UICollectionView()
uicv.delegate = UICVC()
This code ensures that the Collection View's cells are the right size. Assuming your collection view is a standard grid, this should work well for sizing the cells. Positioning of content within cells is another matter, of course.
Related
I am having issue removing these white lines (see image bellow).
Here is my issue:
White Lines
My code parts: (in my ViewController)
let layout = UICollectionViewFlowLayout()
layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = 0
layout.itemSize = CGSize(width: UIScreen.main.bounds.width/5, height: UIScreen.main.bounds.width/5)
extension TestVC: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return cellres.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: Cells.identifier, for: indexPath) as! Cells
cell.configure(with: cellres[indexPath.row])
return cell
}
}
extension TestVC: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
}
-I am using a xib file for my cells.
-Those white lines are not borders of my cell, because every number is a different cell (25 in total).
I have no idea where they are coming from and tried many things in the xib file check options and in my storyboards options as well.
Thank you.
Use CollectionViewDelegateFlowLayout to give minimum line spacing.
extension TestVC:UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
}
Set the cell background and/or collectionView background colors to clear.
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.
Does anyone know how to integrate a collectionView into the top section of a tableView? I'm trying to get a top section/row that has horizontally scrolling images, and other section/rows below it to just be normal tableview rows. Like what you might see in an app like facebook messenger or tinder/bumble's matches/conversations page.
I understand how to produce UICollectionView and UITableView separately, but between the multiple functions/delegates/datasources, I can't figure out how to properly layer the code.
I am working programmatically rather than on storyboard. I know there are other posts on inserting UICollectionView in UITableViewCell, but they're either storyboard implementations, or on outdated versions of Swift - would be awesome if someone could do a run-through so that anyone looking in the future could also understand the logic even if some of the code becomes outdated.
declare collectionView in the TableViewCell swift file.
var viewPhotos: UICollectionView!
func reset(with cellData: CellData) {
self.data = cellData
viewPhotos.dataSource = self
viewPhotos.delegate = self
viewPhotos.reloadData()
}
in the init function or awakeFromNib check if photoCollectionView is initialized and add it to the cell.
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
viewPhotos = UICollectionView(frame: self.bounds, collectionViewLayout: layout)
viewPhotos.collectionViewLayout = layout
viewPhotos.showsHorizontalScrollIndicator = false
viewPhotos.isPagingEnabled = true
viewPhotos.register(PhotoCollectionViewCell.self, forCellWithReuseIdentifier: PhotoCollectionViewCell.cellIdentifier)
Add UICollectionView Datasource and Delegate To the UITableViewCell
extension TableViewCell: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView,numberOfItemsInSection > section: Int) -> Int {
return photoUrls?.count ?? 0
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell: PhotoCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: PhotoCollectionViewCell.cellIdentifier, for: indexPath) as! PhotoCollectionViewCell
if let value = photoUrls {
cell.reset(with url: value[indexPath.row]);
}
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: kPhotoWidth, height: kPhotoHeight)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets.init(top: 0, left: 0, bottom: 0, right: 0)
}
func collectionView(_ collectionView: UICollectionView, layout > collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0.0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0.0
}
}
PhotoCollectionViewCell
create a PhotoCollectionViewCell derived from UICollectionViewCell
and add a UIImageView, and make all edge constraints to 0 to the
superview. load UIImageView based on photoUrl.
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
I am working on a horizontal collection view which have cells with dynamic size depends on the label size. I want to set cell in the center of the collection view. I am able to achieve this using
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets { return UIEdgeInsetsMake(0, leftinset, 0, leftinset) }
Now I want to maintain cell spacing. I had Tried
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
return 0.0
}
But it is not working in this collection view it also reflect on my other collection view. Can any one help me
This is my current output
Image of output
Use this methods..
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat
{
return 0.0
}