CollectionViewLayout Height - swift

I want to custom a lot of layout size for each row of my collectionView by using UICollectionViewDelegateFlowLayout like below:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width = view.frame.width
if indexPath.row == 0 {
return CGSize(width: width, height: 300)
}else if indexPath.row == 1 {
return dynamicSize // i want this size wrap its content
}
return CGSize(width: width, height:100)
}
I want dynamicSize that can wrap its content for some row.
Anyone know how to do this?
Here is image of cell that i want dynamic size to wrap it.

I suggest you to use tableview instead of collectionview. It is very easy for you.
And for cellForHeight returns UITableViewAutomaticDimension. It will calculate your cell height itself and adjust it accordingly.
Note: Make sure your constraints are proper.
Edit: By using collectionview with two columns.
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
var text = "Do any additional setup after loading the view, typically from a nib."
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets{
return UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize{
let cellWidth = self.view.frame.size.width/2 - 10
let textHeight = text.height(withConstrainedWidth: cellWidth, font: UIFont.systemFont(ofSize: 16))
let constantHeight : CGFloat = 40 + 25 + 10 // top name view + bottom like button + margins height
let totHeight = constantHeight + textHeight
return CGSize(width: cellWidth, height: totHeight)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCollectionViewCell", for: indexPath) as! MyCollectionViewCell
cell.label.text = text
cell.layer.borderWidth = 1.0
cell.layer.borderColor = UIColor.black.cgColor
return cell
}
}
extension String {
func height(withConstrainedWidth width: CGFloat, font: UIFont) -> CGFloat {
let constraintRect = CGSize(width: width, height: .greatestFiniteMagnitude)
let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSAttributedStringKey.font: font], context: nil)
return ceil(boundingBox.height)
}
func width(withConstrainedHeight height: CGFloat, font: UIFont) -> CGFloat {
let constraintRect = CGSize(width: .greatestFiniteMagnitude, height: height)
let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSAttributedStringKey.font: font], context: nil)
return ceil(boundingBox.width)
}
}
Output:

Use this delegate method. this will work for me.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: Your cellWidth, height: YourcellHeight);
}

Related

How to override the default position of UICollectionViewCells?

I have a vertical UICollectionView which contains 5 different types of cells. The 4 of them take the whole width of the UICollectionView, so the func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize gets the work done.
The other 2 are of the same size but their default position needs to be changed; I want them to be aligned from left to right, instead of the centered default.
Here's how I set up my UICollectionView:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
switch typesOfCellsArray[indexPath.row] {
case .createVoiceRoom:
return CGSize(width: collectionView.frame.width, height: 70)
case .voiceRooms:
let height: CGFloat = content.voiceRooms.count > 3 ? 256 : 128
return CGSize(width: collectionView.frame.width, height: height)
case .seeMoreVoiceRooms:
return CGSize(width: collectionView.frame.width, height: 50)
case .newStatus:
let width = collectionView.frame.width / 4
return CGSize(width: width, height: width + 40)
case .status:
let width = collectionView.frame.width / 4
return CGSize(width: width, height: width + 40)
}
}
Here's how they look:
And here's what I want:
I think I need to subclass UICollectionViewLayout to achieve that, but I've failed... Here's what I did:
class HomeCollectionViewLayout: UICollectionViewLayout {
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
guard let collectionView = collectionView else { return nil }
let layoutAttributes = super.layoutAttributesForElements(in: rect)
layoutAttributes?.forEach({ attributes in
if collectionView.cellForItem(at: attributes.indexPath) is NewHomeStatusCollectionViewCell {
let column = attributes.indexPath.row % 3
attributes.frame.origin.x = CGFloat(column-1) * attributes.frame.width
}
})
return layoutAttributes
}
}
Of course, I have set this class as the UICollectionView layout. Any ideas?
You can insert each of you cell into separate section and then control following:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets { }
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat { }
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { }

Swift - How to adjust UICollectionViewCell's ratio for different IOS device sizes

I'm using a
CollectionView
as a menu bar at the bottom of my
ViewController
I've created a custom class and have made 5 evenly spaced cells which fills the entire CollectionView on an iPhone 8 with the following, which is the desired result -
layout.itemSize = CGSize(width: self.frame.width / 5, height: self.frame.height)
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0
self.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
self.scrollIndicatorInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
self.collectionViewLayout = layout;
However when I run the project on any iPhone with a larger screen I get the following result:
My question is, how could I scale the cells up to fit without any margins, even if it requires the CollectionView to increase it's height, I would like the images (which will be placed in the cells) to maintain their aspect ratio from the iPhone 8 screen.
Could I just increase the size of each CollectionViewCell with code?
If so is there a way to do so without working out the width/height of each iPhone released to date?
Or can someone please recommend a different way to accomplish this? if I'm approaching this the wrong way.
Thanks in advance!
It seems that the view's width isn't correct in the place you put the line
layout.itemSize = CGSize(width: self.frame.width / 5, height: self.frame.height)
so replace it with
layout.itemSize = CGSize(width: UIScreen.main.bounds.width / 5, height: self.frame.height)
you can also implement
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize
with conform to UICollectionViewDelegateFlowLayout
Here is my code for CollectionView. You can modify as per your requirement.
class HomeViewController: UIViewController,UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
#IBOutlet weak var homeCollectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
homeCollectionView.delegate = self;
homeCollectionView.dataSource = self;
homeCollectionView.reloadData()
}
//MARK:- COLLECTION VIEW
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 3
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{
if let count = myArray.count{
return count
}
return 0
}
func collectionView(_ collectionView: UICollectionView,
viewForSupplementaryElementOfKind kind: String,
at indexPath: IndexPath) -> UICollectionReusableView {
switch kind {
case UICollectionElementKindSectionHeader:
let headerView = homeCollectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "HomeHeaderCell", for: indexPath) as! HomeHeaderCell
headerView.UpdateHeaderCell(indexPath: indexPath)
headerView.btn_SeeAll.addTarget(self, action: #selector(SeeAllDestinations), for: .touchUpInside)
return headerView
case UICollectionElementKindSectionFooter:
let footerView = homeCollectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "HomeFooterCell", for: indexPath) as! HomeFooterCell
return footerView
default:
return UICollectionReusableView()
}
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSize(width: collectionView.frame.width, height: 80)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
return CGSize(width: collectionView.frame.width, height: 10)
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
let myCell:HomeTopDestinationsCell = collectionView.dequeueReusableCell(withReuseIdentifier: "HomeTopDestinationsCell", for: indexPath) as! HomeTopDestinationsCell
myCell.backgroundColor = UIColor.colorFromCode(0xf1f1f1)
myCell.UpdateCellValue(obj:(myArray[indexPath.row])!)
return myCell as HomeTopDestinationsCell;
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
}
//Use for size
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
if DeviceType.IS_IPAD{
return CGSize(width: (self.view.frame.width-60)/3 , height: (self.view.frame.width-60)/3);
}
return CGSize(width: (self.view.frame.width-60)/2 , height: (self.view.frame.width-60)/2);
}
//Use for interspacing
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 10.0
}
func collectionView(_ collectionView: UICollectionView, layout
collectionViewLayout: UICollectionViewLayout,
minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 10.0
}
}

UICollectionViewCell not changing colors on select

I am attempting to have a collectionView where users are able to select multiple cells, and have them highlight/deselect them. I can't seem to figure out how to even just change the background colors of the cells when they are tapped.
Here is where I am setting up the collectionview:
let extraCollectionView = UIView()
let flowLayout = UICollectionViewFlowLayout()
extraCollectionView.frame = CGRect(x:self.view.frame.size.width * 1.5, y:self.view.frame.size.height / 6.5, width: self.view.frame.width / 1.3, height: self.view.frame.height / 1.35)
extraCollectionView.backgroundColor = UIColor.clear
self.view.addSubview(extraCollectionView)
let collectionView = UICollectionView(frame: CGRect(x: extraCollectionView.frame.width * 0, y:extraCollectionView.frame.height * 0, width: extraCollectionView.frame.width, height: extraCollectionView.frame.height), collectionViewLayout: flowLayout)
collectionView.register(uploadGenreSelectionCVC.self, forCellWithReuseIdentifier: cellId)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.layer.cornerRadius = collectionView.layer.frame.width / 10
collectionView.backgroundColor = UIColor.clear
collectionView.layer.borderColor = UIColor.blue.cgColor
collectionView.layer.borderWidth = 3
collectionView.allowsMultipleSelection = true
extraCollectionView.addSubview(collectionView)
Here is my collectionView code:
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 15
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
{
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! uploadGenreSelectionCVC
cell.layer.borderColor = UIColor.blue.cgColor
cell.layer.borderWidth = 2
cell.backgroundColor = UIColor.clear
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width = (collectionView.bounds.width) / 3
let height = (collectionView.bounds.height) / 5
return CGSize(width:width, height:height)
}
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 0
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! uploadGenreSelectionCVC
print("yo")
cell.contentView.layer.backgroundColor = UIColor.red.cgColor
}
&& Here is the cell itself
let genreLabel = UILabel()
override func draw(_ rect: CGRect) {
genreLabel.frame = CGRect(x: self.frame.size.width * 0, y: self.frame.size.height/2.7, width: self.frame.size.width, height: self.frame.size.height / 3)
genreLabel.text = "Rap"
genreLabel.textColor = UIColor.white
genreLabel.textAlignment = .center
addSubview(genreLabel)
}
What am I forgetting to do??
Override isSelected in your cell, and customize your cell given the value,
override var isSelected: Bool {
didSet {
self.backgroundColor = isHighlighted ? .lightGray : .clear
}
}
Note: this property is set automatically by collectionView

How to load number of column in UICollectionView

I am new to swift, I am working in UICollectionView I need to load Seven column in it how can do it, Also padding between each cell should be (top:1,bottom:1,left:1,right:1)
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: CGFloat(collectionView.frame.size.width / 10.2), height: CGFloat(100))
}
//UICollectionViewDatasource methods
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 31
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as UICollectionViewCell
cell.backgroundColor = self.randomColor()
return cell
}
Works for both horizontal and vertical scroll directions and variable spacing
Specify number of columns
let numberOfColumns: CGFloat = 7
Configure flowLayout to render specified numberOfColumns
if let flowLayout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout {
let horizontalSpacing = flowLayout.scrollDirection == .vertical ? flowLayout.minimumInteritemSpacing : flowLayout.minimumLineSpacing
let cellWidth = (view.frame.width - max(0, numberOfColumns - 1)*horizontalSpacing)/numberOfColumns
flowLayout.itemSize = CGSize(width: cellWidth, height: cellWidth)
}

Swift creating grid of many text fields?

Fairly new to swift and just getting into the design/app making aspect of it. So I want to make a 9X9 grid of text fields for a sudoku solving app, where each text field will take in a number and assign the value to a struct I have created. I am having a hard time finding the correct way to do this. I feel like I could just make 81 text boxes and assign each of them seperately, but I feel like as a programmer this is definitely the wrong way to go about this. Could anyone point me in the right direction?
Thanks!
UICollectionView is the way to go.
If you want a 9*9 grid with a header cell on top then something like this would work:
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 82
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
if indexPath.row == 0
{
return CGSize(width: screenWidth, height: screenWidth/3)
}
return CGSize(width: screenWidth/9, height: screenWidth/9);
}
That gives you:
Complete viewController with an embedded UICollectionView:
import UIKit
class ViewController: UIViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
var collectionView : UICollectionView? // Optional
var screenSize : CGRect!
var screenWidth : CGFloat!
var screenHeight : CGFloat!
override func viewDidLoad() {
super.viewDidLoad()
screenSize = self.view.frame
screenWidth = screenSize.width
screenHeight = screenSize.height
// Do any additional setup after loading the view, typically from a nib.
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 20, left: 0, bottom: 10, right: 0)
layout.itemSize = CGSize(width: screenWidth/3, height: screenWidth/3)
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0
collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
print(collectionView?.frame.width)
collectionView!.dataSource = self
collectionView!.delegate = self
collectionView!.registerClass(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")
collectionView!.backgroundColor = UIColor.greenColor()
self.view.addSubview(collectionView!)
}
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 82
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
if indexPath.row == 0
{
return CGSize(width: screenWidth, height: screenWidth/3)
}
return CGSize(width: screenWidth/9, height: screenWidth/9);
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionViewCell", forIndexPath: indexPath) as! CollectionViewCell
if indexPath.row == 0
{
cell.backgroundColor = UIColor.lightGrayColor()
}else
{
cell.backgroundColor = UIColor.whiteColor()
}
cell.layer.borderColor = UIColor.blackColor().CGColor
cell.layer.borderWidth = 0.5
//cell.textLabel?.text = "\(indexPath.section):\(indexPath.row)"
return cell
}
}