How do you center the 3 cells? Its to the left.
How do you set same spacing on all sides of each cell?
Second cell that says no results found. how would you make that centered and take up whole screen? Right now its cut off in the top left corner.
you need to make use of collectionView flowLayout
let width = UIScreen.main.bounds.size.width
//MARK:- Collection View Flow Layouts
extension HomeVC : UICollectionViewDelegateFlowLayout
{
//MARK: Setting size of cell
public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
{
return CGSize(width: width/3-16, height: width/3-16)
}
//MARK: Setting space Around Corners of Cells
public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets
{
return UIEdgeInsetsMake(8, 8, 8, 8)
}
//MARK: Setting space between two sections
public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat
{
return 0
}
//MARK: Setting Space between two Cels
public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat
{
return 8
}
}
StoryBoard Design
Output:
You can also use like this:
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
let width = UIScreen.main.bounds.size.width
layout.itemSize = CGSize(width: width/3.05, height: width/3.05)
layout.sectionInset = UIEdgeInsets(top: 2, left: 1, bottom: 2, right: 1)
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 2
collectionView!.collectionViewLayout = layout
collectionView.reloadData()
Output:
Hope this helps.
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 am using UICollectionViewDelegateFlowLayout delegate to make it square but strange spacing is showing at the end.
My Code
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if collectionView == self.bannerClcView {
let cellSize = CGSize.init(width: view.frame.size.width, height: view.frame.size.height)
return cellSize
}else if collectionView == self.category {
let cellSize = CGSize.init(width: (self.category.frame.size.width/3), height: category.frame.size.width/3)
return cellSize
}else {
let cellSize = CGSize.init(width: (recomended_Ads_Clc.frame.size.width/2), height: 220)
return cellSize
}
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
How can I remove the spacing? Please help.
If you open your Storyboard where you've laid out your UICollectionView and select its trailing constraint, I image you'll see something like this in the Attributes inspector:
You'll need to uncheck "Relative to margin" to remove the extra space you're seeing.
Your mistake is with the source view that you compute the width property for the cell inside the function
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
instead of
let cellSize = CGSize.init(width: (recomended_Ads_Clc.frame.size.width/2), height: 220)
return cellSize
write return CGSize(width: (collectionView.frame.width / 2) - 10, height: 220)
And compute the height as you want. 10 will be the space between the cells
I'm testing this on iPhone XR simulator. I have 3 rows of images and I want them displayed in 3 columns, 2 points distance top, left, right and bottom. This used to work but for some reason it doesn't now.
extension ProfileVC : UICollectionViewDelegateFlowLayout {
override func size(forChildContentContainer container: UIContentContainer, withParentContainerSize parentSize: CGSize) -> CGSize {
return CGSize(width: collectionView.bounds.width / 3, height: collectionView.bounds.width / 3)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 2, left: 2, bottom: 2, right: 2)
}
}
This is my result:
Try implementing sizeForItemAt indexPath method to fix your collection view for a three columns only with item size dynamically based on screen width.
get the screen width or collection view width, then subtract your preferred spaces (8) then divide by 3 (3 columns).
Also, from your storyboard or nib file set minSpacing for lines = 2 and section insets for top = 2 and comment your above methods and implement only this method
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width = (collectionView.frame.width - 8) / 3
return CGSize(width: width, height: width)
}
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)
}
I'm having trouble setting my UICollectionViewCells to be all the same width and height so that there are no lines/spacing between each cell. Testing on an smaller iPhone like 5S and SE shows no lines between the cells, but larger iPhones such as 6,7 Pluses do - image description below. My view controller adopts UICollectionViewDelegateFlowLayout, and it has a collectionView.
In viewDidLoad, I set the collectionView's delegate to be the view controller.
override func viewDidLoad() {
super.viewDidLoad()
self.viewController.delegate = self
}
I use the following methods to set the cell size and spacing.
let screenWidth:CGFLoat = UIScreen.main.bounds.width
let cellsPerRow:CGFLoat = 4
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let side:Double = Double(self.screenWidth/self.cellsPerRow)
return CGSize(width: side, height: side)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0.0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0.0
}
iPhone 5S, No Lines
iPhone 7 Plus, Lines
Any recommendations or advice to get rid of these line/spacing is greatly appreciated!