This question already has answers here:
Left Align Cells in UICollectionView
(24 answers)
Closed 5 years ago.
I have a UICollectionView like this:
These are the three different cases for it. Light grays shows the borders of the collection view and dark gray is for cells.
I have set min spacing and section insets to 0. But still I am getting these unwanted insets, and it seems it only happens when there are more than 1 cell.
I calculate the item sizes like this:
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
guard let item = place?.publicTransports?[indexPath.row] else {
return CGSize.zero
}
var lines = ""
for (i, line) in item.lines.enumerate() {
lines.appendContentsOf(line)
if i != item.lines.count - 1 {
lines.appendContentsOf(", ")
}
}
let linesString = lines as NSString
return CGSize(width: linesString.sizeWithAttributes(nil).width + 35 + 20, height: collectionView.bounds.height/2)
}
Any suggestions?
It seems the question should read, left align a UICollectionView.
The simplest solution is to go to:
https://github.com/mokagio/UICollectionViewLeftAlignedLayout
And subclass your layout to this, this will ensure your UICollectionView left aligns, you should set all your insets to 0 first then begin changing them according to your design.
Related
This question already has answers here:
AutoSizing cells: cell width equal to the CollectionView
(2 answers)
Closed 3 years ago.
I'm working on a rebuild of UI on mobile App. I've changed my tableView by CollectionView (for have two columns of cells)
I've achieve the work to have dynamic heigh on cell and that work perfectly, as you can see (iOS left and Android right) I'm trying to achieve the android UI with iOS.
Currently that what I have follow to achieve that :
https://www.vadimbulavin.com/collection-view-cells-self-sizing/
I've trying to set fixed width but that's automatically shape to the content.
I think that probably a little thing but I havent work from long time on iOS, so I'm looking for explain to achieve the fixed width size
The controller contain only that :
#IBOutlet weak var collectionViewFlowLayout: UICollectionViewFlowLayout!{
didSet {
self.collectionViewFlowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
}
}
I havent do the 'max width' part of tutorial.
All label inside cell have left right constraint fixed, 0 lines and word wrap line break
Thank !
Have a nice day
Benjamin
Well, as i see from screenshot, you already have auto height on each cell.
Set fixed width for CollectionViewCell:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
var height:CGFloat = 0.0
if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
height = layout.itemSize.height
}
let screenSize = UIScreen.main
let wi = screenSize.bounds.size.width/2 // can calculate gap between two columns
return CGSize(width: wi, height: height)
}
You need to do a custom layout of class UICollectionViewLayout and set it to your collection view. There are a lot of Pinterest like collection view tutorials. You can check this
I'm trying to create an UI like below.
For this purpose I'm using UICollectionView and FlowLayout.
For showing the first cell with full width and remaining cell as 3 column, I've implemented the sizeForItemAtIndexPath: and minimumInteritemSpacingForSectionAtIndex methods:
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
var cellSize = CGSizeZero
if indexPath.item == 0
{
let width = self.cvMedia.frame.width - 20
let height = (width * 9)/16
cellSize = CGSize(width: width, height: height)
}
else
{
let width = self.cvMedia.frame.width / 3 - 20
let height = (width * 16)/9
cellSize = CGSize(width: width, height: height)
}
return cellSize
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat
{
return 20.0
}
But I'm getting the following output in iPhone 6SPlus and iPhone 6Plus:
I tried by changing the item spacing from 20 to 19 and it worked on simulator, but on actual device it still shows the same behaviour. If I change the spacing values I'm getting the correct output on some device versions, and not working on some versions. I can add a device version check and based on that I can return the value. But it is not an elegant solution and it will break on future versions. Can anyone help me to solve this issue ? Thanks in advance.
You should use the collection view's width as your parameter when making this layout.
For instance,
You need 3 cells to fit the view.
The cells must have 20pt spacing in between them.
Solution:
Calculate the size of the cell at runtime either on viewWillAppear() or cellForRowAtIndexPath()
Scenario:
Width of device is 320pt. Collectionview's width is 300pt( spacing 10pt L & R) Spacing : 20pt between cells. Cell's needed 3!!
Cell Size: ?
Now..Start calculating in either method.
Cell Spacing = (3-1) * 20 = 2 * 20 = 40pt
Remaining collection view width = 300pt - 40pt = 260pt
Cell size = 260pt/3 = 86.667 pt. (86pt apprx).
In Code:
cellWidth = ( collectionView?.bounds.width - minimumSpacing * (numberOfCellsInARow - 1 ) ) / numberOfCellsInARow
Also, this only gives the cellWidth. You need cellHeight as well.
You might already have an aspect ratio for the cell. Using that, calculate the cellHeight as well.
Kind Regards,
Suman Adhikari
Check out this and change the values for min spacing to 0 for both cells and lines
In my app I am using using UICollectionView. I want to set fix space between UICollectionViewCell. so how can I do this?
here is my code:
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
return 20
}
by this line I can set space between cell?
here is my screenshot please see this. and let me know how can i set fix distance in both landscape or portrait mode
Maybe,you need implementation follow method.
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
You can adjust the spacing between UICollectionCell by using the storyboard Min. spacing property of UICollectionView.
Here you have to set Min spacing value for cells and lines.
Hope it would help you.
You can also manage the spacing using the size inspector of Collection View
http://i.stack.imgur.com/Nvp3g.png
If you want exact spacing between the cells you need to calculate the size for the cells that will best fit to allow for the spacing you need without wrapping while considering the sectionInsets and CollectionView bounds. eg.
let desiredSpacing: CGFloat = 20.0
if let layout = self.collectionView?.collectionViewLayout as? UICollectionViewFlowLayout {
layout.minimumLineSpacing = desiredSpacing
let totalCellsContentWidth = self.collectionView!.bounds.width - layout.sectionInset.left - layout.sectionInset.right
let numberOfCellsPerRow: CGFloat = 10
let numberOfSpacesPerRow = numberOfCellsPerRow - 1
let cellWidth = (totalCellsContentWidth - (numberOfSpacesPerRow * desiredSpacing) / numberOfCellsPerRow)
layout.itemSize = CGSize(width: cellWidth, height: cellWidth)
}
Assuming your cells are the same size the minimumLineSpacing is simple but would otherwise expand to fit the largest cell on the row before wrapping to the next line. As you can see it's the cell spacing that is a bit more complicated.
I am trying to achieve a custom layout like this one :
I am trying to implement it via a UICollectionView. First I use this code to have the desired size :
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize{
return CGSizeMake((collectionView.frame.size.width / 2) - 2 , (collectionView.frame.size.height / 3) - 2)
}
It's working fine.
The problem is that my picture is not properly centered. I did it this way :
Let me explain :
One constraint to align the center of the uiimage on X
One constraint to do the same thing on Y
One constraint to keep the image ratio
One constrain to say that the height of the image is 70% of the cell height
And the result is very not the one expected :
i did it using custom layout.
let collLayout:UICollectionViewFlowLayout = layout as! UICollectionViewFlowLayout
collLayout.scrollDirection = .Vertical
collLayout.minimumInteritemSpacing = 10
let width = (frame.size.width - 3*collLayout.minimumInteritemSpacing)*0.5
collLayout.itemSize = CGSizeMake(width, width)
collLayout.sectionInset = UIEdgeInsetsMake(0, 10, 0, 10)
And then initialize your collection view with this custom layout.
I have seen some questions similar to this one but none have really helped me. The last item in my collection view is always lower than the other items, as you can see in the image below:
If I increase the height of the UICollectionView then the last image alligns correctly but there is a huge gap between at the top and bottom of the UICollectionView as seen in the image below:
The sizing of the cells are controlled by this code:
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let image = UIImage(data: imageArray[indexPath.row])
var size = image?.size
let height = size!.height
let width = size!.width
let imagewidth = (width / height) * 214
return CGSize(width: imagewidth, height: 214)
}
From what I understand, this should be making the height of each of the images the same, meaning it doesn't matter what the height of the original image is.
I also have another collection view in which the last item is aligned correctly and is set up in the exact same way so I'm a bit confused. What do you think the problem is? I have read that this could be a bug, but is there anyway around it? I am still learning about Swift and programming in general so if you have any other tips for me, they would be massively appreciated.
Thanks
If there is a huge gap between at the top and bottom of the UICollectionView , you can solve the problem via setting viewController's automaticallyAdjustsScrollViewInsets false.
override func viewDidLoad() {
super.viewDidLoad()
//remove the blank of top and bottom in collectionView
self.automaticallyAdjustsScrollViewInsets = false
}