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.
Related
I need to make UICollectionView cells in oval shape where height is fixed but width is dynamic and it has a limit also, if text longer than that, then text should scroll. Any third party option available for this or need to create own using UICollectionView. Please guide.
Below is the image what i am trying to achieve. I want to know before starting should i look for third parties or use UICollectionView to make own. I have short time to complete that's why to avoid time on searching asking in starting itself which direction to follow.Please guide.
You can use a UICollectionViewFlowLayout and Auto Layout to achieve this.
Create a UICollectionViewCell with a container view.
Pin this container view the edges of the cell with auto layout
Add a UILabel to this container view and pin it to all edges of the container view (give it a background color to distinguish from the cell background)
In the UICollectionViewCell subclass you'll want to round the corners of the container view, e.g. self.containerView.layer.cornerRadius = self.containerView.height / 2
In the UICollectionViewFlowLayoutDelegate method, estimatedSizeForItem return an approximate size for the cell (auto layout will calculate the actual size.)
The important thing to remember is your cell needs to have enough constraints so that the auto layout engine can calculate the actual height and width based on the content.
Edit: If you want a fixed height, ensure your label can only have a single line. Or add a height constraint.
Finally, i found a library TagListView that can be installed through cocoapods with lots of customisation and swift 4 support also.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let nw = intersts[indexPath.row]
let options = NSStringDrawingOptions.usesFontLeading.union(.usesLineFragmentOrigin)
let size = CGSize(width: 250, height: 1500)
let estimatedFrame = NSString(string: nw).boundingRect(with: size, options: options, attributes: [NSAttributedStringKey.font : UIFont.systemFont(ofSize: 17)], context: nil)
let attributes = [NSAttributedStringKey.font : UIFont.systemFont(ofSize: 17)]
let yourLabelSize: CGSize = nw.size(withAttributes:attributes )
var width1 = yourLabelSize.width + 30
if width1 < 30 {
width1 = 30
}
return CGSize(width: estimatedFrame.width+20, height: estimatedFrame.height+20)
}
I just extend or implement #Tim answer. So after you build the cell as described in his answer, then specify the cell width and height to be flexible using the sample code below i.e similar to what he described
let collectionViewLayout = UICollectionViewFlowLayout()
collectionViewLayout.scrollDirection = .horizontal
let itemWidth = Constants.myCollectionViewItemWidth
let itemHeight = Constants.myCollectionViewItemHeight
collectionViewLayout.estimatedItemSize = CGSize(width: itemWidth, height: itemHeight)
myCollectionView.collectionViewLayout = collectionViewLayout
Can you solve the following problem: I have a UICollectionView with a fixed number of CollectionView Cells - but the hight of the devices change and I have to dynamically calculate the last(buttom) cell.
------
I: Cell 1
------
I: Cell 2
------
I: Cell 3, This cell has a dynamic hight
I
------
I have tried the following:
note: let view = self.cells[indexPath.row] is a fixed list of UIView that I add to the UICollectionView contextView in cellForItemAt
Also the code is in a class that implement UICollectionViewDelegateFlowLayout
self.collectionView?.isScrollEnabled = false
var totalHight: CGFloat = 0
public func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
let view = self.cells[indexPath.row]
self.totalHight = self.totalHight + view.frame.size.height
if (self.totalHight > self.frame.size.height){
let diff = self.totalHight - self.frame.size.height
let height = (view.frame.size.height - diff)
view.frame.size = CGSize(width: self.frame.size.width,
height: height)
self.totalHight = 0
return view.frame.size
}else{
return CGSize(width: self.frame.size.width, height: view.frame.size.height)
}
}
I can't tell if that code you've tried is in your view controller or a custom layout. What was the result?
This can be done with a custom UICollectionViewLayout instance. You can probably get by with subclassing UICollectionViewFlowLayout and overriding
collectionView:layout:sizeForItemAtIndexPath:
Then you can look at the remaining space on the screen. It will probably pose problems if the content ends up exceeding the available space.
One approach you might look at is getting the layout attributes for the previous cell, and that will give you its frame, something like this:
let previousIndexPath = IndexPath(row: indexPath.row - 1, section: indexPath.section)
let attribs = layoutAttributesForItem(at: previousIndexPath)
let previousFrame = attribs.frame
let availableHeight = totalHeight - previousFrame.size.height
return CGSize(width: previousFrame.width, height: availableHeight)
See more here:
https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/UsingtheFlowLayout/UsingtheFlowLayout.html
https://developer.apple.com/documentation/uikit/uicollectionviewlayout/1617797-layoutattributesforitem
Edit: as an aside, it sounds like maybe using UIStackView and autolayout constraints would make this thing much easier, since your content is static and doesn't scroll.
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'm trying to create a collection view with cells that can autosize. previously i had used sizeForItemAtIndexPath but could not get the cell height exactly right for a textView with attributedString. I've decided to abandon that approach and use the auto-sizing feature. I have found some information here but mostly with objective-C. I am only familiar with Swift. Even so, I have picked through it and it is still not working.
What I have done so far is to include the following code in my viewDidLoad:
if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
flowLayout.estimatedItemSize = CGSize(
width: self.view.frame.size.width, height: 100)
}
the cell width is showing correctly however all the cell heights are stuck at 100 regardless of the content.
Is there something else I need to do to allow the autosizing to kick in? I'm pretty sure my storyboard constraints are set up correctly.
In addition to setting the estimatedItemSize, you should also make sure that you are not providing an item size via a delegate or datasource method. The point of the self-sizing mechanism is that UIKit will use the estimated item size as its initial estimate, and then calculate the exact height based on the Auto Layout constraints you've configured on the cell's contentView. Also, you need a Base SDK of iOS 8 or later.
This repo reproduces Apple's example from the WWDC session where they introduced self-sizing cells.
One workaround might be to size the collectionView cells height and width in proportion to the screen size:
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let deviceSize = UIScreen.mainScreen().bounds.size
//let cellSize = sqrt(Double(deviceSize.width * deviceSize.height) / (Double(33)))
let cellWidth = ((deviceSize.width / 2) - 10)
let cellHeight = (deviceSize.height / 4)
return CGSize(width: cellWidth , height: cellHeight)
}