Pure code builds the collection but UICollectionViewDelegateFlowLayout is not executed - ios

Pure code (I didn't use the storyboard, just use code) builds the collection but UICollectionViewDelegateFlowLayout is not executed.
class Calendarview : UIView , UICollectionViewDelegate , UICollectionViewDataSource , UICollectionViewDelegateFlowLayout {
var collectionview : UICollectionView!
override func didAddSubview(_ subview: UIView) {
}
override func didMoveToSuperview() {
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
collectionview = UICollectionView(frame: CGRect(x: 0, y: 0, width: self.bounds.width, height: self.bounds.height) , collectionViewLayout: layout)
collectionview.frame = self.frame
collectionview.register(CalendarCell.self, forCellWithReuseIdentifier: "Cell")
collectionview.dataSource = self
collectionview.delegate = self
self.addSubview(collectionview!)
collectionview.reloadData()
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 42
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
return CGSize(width: self.bounds.width / 7, height: self.bounds.height / 3)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 5
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 5
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! CalendarCell
cell.lbshow = UILabel(frame: cell.bounds)
cell.lbshow.text = String(indexPath.row)
cell.addSubview(cell.lbshow)
cell.backgroundColor = .blue
return cell
}
}

Set delegate as self.collectionView.delegate = self;. UICollectionViewDelegateFlowLayout inherits from UICollectionViewDelegate. So it will called all methods of UICollectionViewDelegateFlowLayout.
Hence, You need to set self.collectionView.collectionViewLayout to your flow layout.
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.estimatedItemSize = CGSize(width: 10, height: 10)
layout.itemSize = CGSize(width: 200, height: 200)
layout.minimumLineSpacing = 10
layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
layout.scrollDirection = .horizontal
collectionview.collectionViewLayout = layout

Related

UICollectionView defaulting to one column, how do I get two?

I've been learning about UICollectionViews recently and I am currently trying to implement one. I need to display two columns but no matter what I do it defaults to one column. There are plenty of similar questions here that suggest adjusting the width of the UICollectionView cell using the collectionView function sizeForItemAt, but I can't seem to get it to work.
this is my viewcontroller code:
class PreferencesViewController: UIViewController {
lazy var collectionView : UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = UICollectionView.ScrollDirection.vertical
let cv = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
cv.translatesAutoresizingMaskIntoConstraints = false
cv.register(CategorySelectorCell.self, forCellWithReuseIdentifier: "categorySelector")
cv.backgroundColor = .clear
return cv
}()
override func viewDidLoad(){
super.viewDidLoad()
view.backgroundColor = .white
view.addSubview(collectionView)
collectionView.backgroundColor = .blue
collectionView.contentInsetAdjustmentBehavior = .always
collectionView.delegate = self
collectionView.dataSource = self
collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true
collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true
collectionView.topAnchor.constraint(equalTo: view.topAnchor, constant: 40).isActive = true
collectionView.heightAnchor.constraint(equalToConstant: view.frame.height/1.5).isActive = true
self.view = view
}
}
my delegate extension:
extension PreferencesViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
1
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "categorySelector", for: indexPath) as! CategorySelectorCell
cell.cat = categories[indexPath.section]
cell.backgroundColor = .red
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.frame.width/2.5, height: collectionView.frame.width/2)
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
10
}
}
Any pointers appreciated!
Also add these UICollectionViewDelegateFlowLayout methods
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
}
Update
Also set inset to zero
lazy var collectionView : UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.sectionInset = .zero
layout.scrollDirection = UICollectionView.ScrollDirection.vertical
let cv = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
cv.translatesAutoresizingMaskIntoConstraints = false
cv.register(CategorySelectorCell.self, forCellWithReuseIdentifier: "categorySelector")
cv.backgroundColor = .clear
return cv
}()
let's think your collection view UICollectionViewFlowLayout has 16 edge insets starts and end. And minimumInteritemSpacingForSectionAt,minimumLineSpacingForSectionAt to 16
Then you can calculate your cell width like this
(view.frame.width-flowlayoutInsets-sectionSpacing)/2
This is the codes
your collection view
let coll: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16)
let coll = UICollectionView(frame: .zero, collectionViewLayout: layout)
coll.backgroundColor = .systemPink
//other stuff
return coll
}()
Section and Line spacing
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 16
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 16
}
Collectionview cell size
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: (view.frame.width-16-16-16)/2, height: 100)
//1st 16 - left gap - flowlayout left inset
//2nd 16 - middle gap - section spacing
// 3rd 16 = right gap - flowlayout right inset
}

UICollectionView - Not Redrawing Properly When App is Reopened

For some reason my collection view code works as expected when I Launch the emulator but when I hit the home button to close the app and then reopen it the 3 columns collapse on the right to one column. The only thing I have in Storyboard is a view. Everything is done via code. Xcode 11.1 / Swift 5.
Here is what it looks like on the first open:
And on the reopen:
Here is all of the code.
class Online: UIViewController {
weak var collectionView: UICollectionView!
var onlineArray = [[String:AnyObject]]()
override func viewDidLoad() {
super.viewDidLoad()
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
collectionView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(collectionView)
NSLayoutConstraint.activate([
self.view.topAnchor.constraint(equalTo: collectionView.topAnchor),
self.view.bottomAnchor.constraint(equalTo: collectionView.bottomAnchor),
self.view.leadingAnchor.constraint(equalTo: collectionView.leadingAnchor),
self.view.trailingAnchor.constraint(equalTo: collectionView.trailingAnchor),
])
self.collectionView = collectionView
self.collectionView.dataSource = self
self.collectionView.delegate = self
self.collectionView.register(Cell.self, forCellWithReuseIdentifier: Cell.identifier)
self.collectionView.alwaysBounceVertical = true
}
}
extension Online: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: Cell.identifier, for: indexPath) as! Cell
cell.textLabel1.text = "A"
cell.textLabel2.text = "B"
cell.textLabel3.text = "C"
cell.textLabel1.backgroundColor = .orange
cell.textLabel2.backgroundColor = .blue
cell.textLabel3.backgroundColor = .green
return cell
}
}
extension Online: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.bounds.width, height: 30)
}
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) //.zero
}
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
}
}
class Cell: UICollectionViewCell {
static var identifier: String = "Cell"
weak var textLabel1: UILabel!
weak var textLabel2: UILabel!
weak var textLabel3: UILabel!
override init(frame: CGRect) {
super.init(frame: frame)
let width = self.contentView.frame.size.width
let textLabel1 = UILabel(frame: CGRect(x: 10, y: 0, width: 50, height: 20))
let textLabel2 = UILabel(frame: CGRect(x: width/3, y: 0, width: 50, height: 20))
let textLabel3 = UILabel(frame: CGRect(x: (width/3)*2, y: 0, width: 50, height: 20))
textLabel1.translatesAutoresizingMaskIntoConstraints = false
textLabel2.translatesAutoresizingMaskIntoConstraints = false
textLabel3.translatesAutoresizingMaskIntoConstraints = false
self.contentView.addSubview(textLabel1)
self.contentView.addSubview(textLabel2)
self.contentView.addSubview(textLabel3)
self.textLabel1 = textLabel1
self.textLabel2 = textLabel2
self.textLabel3 = textLabel3
self.reset()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func prepareForReuse() {
super.prepareForReuse()
self.reset()
}
func reset() {
self.textLabel1.textAlignment = .left
self.textLabel2.textAlignment = .center
self.textLabel3.textAlignment = .right
}
}
So I guess ill answer my own question.
translatesAutoresizingMaskIntoConstraints should be true not false.
textLabel1.translatesAutoresizingMaskIntoConstraints = true
textLabel2.translatesAutoresizingMaskIntoConstraints = true
textLabel3.translatesAutoresizingMaskIntoConstraints = true

UICollectionView cell spacing not working anymore

I have been working on this app for a few days, I am working on laying out a UICollectionView to appear like a grid with no spacing in between the cells. It was working fantastically after I found this answer and implemented it into my own program. I worked on some other files and updated my computer, then I came back and tested this app just to see where I was and for some reason there is horizontal spacing in between cells. I have looked at a few other questions similar to this one, but I'm just wondering how to fix this and why this happened when I didn't change anything related to the layout.
Here's is what it looks like now:
import UIKit
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
#IBOutlet weak var collectionView: UICollectionView!
var model = BoardModel()
var board = Board()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
collectionView.delegate = self
collectionView.dataSource = self
board = model.newGame(4, 4)
// Remove the spacing between the cells in collectionView
// Also make the cells the correct size to form a square/rectangle
let screenSize: CGRect! = collectionView.bounds
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
layout.itemSize = CGSize(width: screenSize.width/CGFloat(board.columns), height: screenSize.width/CGFloat(board.columns))
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0
collectionView!.collectionViewLayout = layout
// Center the collectionView
collectionView.contentInset.top = max((collectionView.frame.height - collectionView.contentSize.height) / 5, 0)
}
The reason I'm using the collectionView bounds instead of the UIScreen.mainScreen().bounds is because my collectionView has 20 spacing around all the edges.
Can you try
let width = UIScreen.main.bounds.width - 40 // convert it if it's not swift 4
let height = UIScreen.main.bounds.height - 40
//
or implement
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize.init(width: , height: )
}
import UIKit
class ViewController: UIViewController {
fileprivate let sectionInsets = UIEdgeInsets(top: 5.0, left: 5.0, bottom: 5.0, right: 5.0)
fileprivate let itemsPerRow: CGFloat = 2
override func viewDidLoad() {
super.viewDidLoad()
}
}
// MARK: UICollectionViewDelegateFlowLayout
extension ViewController : UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize{
let paddingSpace = sectionInsets.left * (itemsPerRow + 1)
let availableWidth = view.frame.width - paddingSpace
let widthPerItem = availableWidth / itemsPerRow
let heightPerItem = widthPerItem + 21
return CGSize(width: widthPerItem, height: heightPerItem)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets{
return sectionInsets
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat{
return sectionInsets.left
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat{
return 0
}
}

Swift UICollectionViewCells too spread apart

I'm trying to fit 5 UICollectionViewCell's on a single row, and while there seems to be enough horizontal space, there's too much space between each cell. I can't figure out how to reduce it. Here is some pseudo-code along with what it looks like:
class ViewController: UIViewController {
let my_view = MyView()
override func viewDidLoad() {
super.viewDidLoad()
self.my_view.delegate = self
self.my_view.translatesAutoresizingMaskIntoConstraints = false
self.scroll_view.addSubview(self.my_view)
self.my_view.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
self.my_view.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 20).isActive = true
self.my_view.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true
self.my_view.bottomAnchor.constraint(equalToConstant: 100).isActive = true
}
}
extension ViewController: UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 5
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! MyCell
return cell
}
}
class MyView: UIView {
var delegate: ViewController! {
didSet {
self.collection_view.delegate = self.delegate
self.collection_view.dataSource = self.delegate
}
}
var collection_view: UICollectionView!
init() {
let layout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
layout.itemSize = CGSize(width: 60, height: 40)
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0
self.collection_view = UICollectionView(frame: .zero, collectionViewLayout: layout)
self.collection_view.register(AgeCell.self, forCellWithReuseIdentifier: "cell")
self.collection_view.backgroundColor = .clear
self.collection_view.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(self.collection_view)
self.collection_view.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
self.collection_view.widthAnchor.constraint(equalTo: self.widthAnchor).isActive = true
self.collection_view.topAnchor.constraint(equalTo: self.title_label.bottomAnchor, constant: 15).isActive = true
self.collection_view.heightAnchor.constraint(equalToConstant: 60).isActive = true
}
}
class MyCell: UICollectionViewCell {
let button: UIButton = {
let button = UIButton(type: .system)
button.backgroundColor = UIColor(r: 0, g: 0, b: 0, a: 100)
button.setTitle("Test", for: .normal)
button.layer.borderColor = UIColor.EVO_blue.cgColor
button.layer.borderWidth = 1.0
return button
}()
override init(frame: CGRect) {
super.init(frame: frame)
self.addSubview(self.button)
self.button.frame = self.frame
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
This is the width of the device, and only 3 show up:
What can I do to get all 5 cells to appear? Thanks.
Use UICollectionViewDelegateFlowLayout, You need to return the correct size in sizeForItemAt method. I'm trying to write the logic to resolve you problem.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width = (Globals.screenWidth - 60.0) / 5
return CGSize(width: width, height: 80.0)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsetsMake(0, 5, 0, 5)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0.0
}
try this.
The problem was that in my MyCell class, I was writing
self.button.frame = self.frame
Whereas I should have written
self.button.frame = self.bounds
Use the UICollectionViewDelegateFlowLayout method for manage the cell size, LineSpacing and InterItemSpacing :-
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, sizeForItemAt indexPath:
IndexPath) -> CGSize {
return CGSize // return size of cell according to you
}

Add CollectionView as Table View Header

I want to show banner like this:
My approach is adding a CollectionView as a TableViewHeader
My code:
extension HomeViewController: UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
func configureHeaderView() {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
let headerView = UICollectionView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: headerHeight), collectionViewLayout: layout)
headerView.backgroundColor = .blue
headerView.isPagingEnabled = true
headerView.isUserInteractionEnabled = true
headerView.dataSource = self
headerView.delegate = self
headerView.register(BannerCollectionViewCell.self, forCellWithReuseIdentifier: BannerCollectionViewCell.reuseIdentifier)
headerView.showsHorizontalScrollIndicator = false
tableView.tableHeaderView = headerView
}
// MARK: UICollectionViewDataSource
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 3
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: BannerCollectionViewCell.reuseIdentifier, for: indexPath) as! BannerCollectionViewCell
return cell
}
// MARK: UICollectionViewDelegateFlowLayout
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: UIScreen.main.bounds.width, height: headerHeight)
}
}
My BannerCollectionViewCell has a default image.
class BannerCollectionViewCell: UICollectionViewCell {
#IBOutlet weak var bannerImageView: UIImageView!
}
But I don't see that image on my header. It just show an empty header.
you use the NIB, so you should use func register(UINib?, forCellWithReuseIdentifier: String) instead of func register(AnyClass?, forCellWithReuseIdentifier: String)
Maybe you're looking for an image pager like KIImagePager on the top instead of a collection view. You can also create the same using inbuilt PageViewController.
You can add a TableView separately below this.

Resources