I wish to create a drop down menu which will only appear at the spot where the blank empty space is when the 'seasonal' tab is selected and remain hidden when the 'Latest' tab is selected.
How do I achieve that?
viewController image:
Do I have to use UISearchDelegeate for this?
Edit: how to make the headerView of the collectionsView respond to the segmented control buttons up top: "Latest and Seasonal"? For eg. when "Latest" is selected, the header view will resize to width: 0, height: 0 and when "Seasonal" is selected, the header will be resized to width: 320 and height: 50?
Here's an example, but so far my code is wrong. I'm not sure how to return CGSize.
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
if segmentedControlValue.selectedSegmentIndex == 1 {
let size = CGSize (width: 0, height: 50)
}
if segmentedControlValue.selectedSegmentIndex == 0 {
let size = CGSize (width: 0, height: 0)
}
}
#IBAction func selectionButtons(_ sender: UISegmentedControl) {
collectionView?.reloadData()
}
here's the new code I just added:
override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
let selectionCell = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "selectionCell", for: indexPath)
if toggleState.currentTitle == "View" {
selectionCell.frame = CGRect(x: 0, y: 0, width: 0, height: 100)
}
if toggleState.currentTitle == "NoView" {
selectionCell.frame = CGRect(x: 0, y: 0, width: 0, height: 0)
}
return selectionCell
You can use the collectionView viewForSupplementaryElementOfKind method to handle header with UICollectionElementKindSectionHeader and footer with UICollectionElementKindSectionFooter kind view.
func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
let view = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "myHeaderView", forIndexPath: indexPath)
// configure header view
if segmentedControlValue.selectedSegmentIndex == 1 {
view.frame = // set frame
}
if segmentedControlValue.selectedSegmentIndex == 0 {
view.frame = // set frame
}
return view
}
So when you call reloadData() method this takes as a part of execution and you can take appropriate action to view inside.
Related
I have to Collection View in my view Controller. One is Showing the image and the other is showing the ticket details. Here is the sample image.
But I can't set the proper constraint. This is what I Do with code.
let numberOfCells = 9
let kCellHeight : CGFloat = 104
let kLineSpacing : CGFloat = 2
let kInset : CGFloat = 10
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if collectionView == clnView {
return CGSize.init(width: width, height: height)
}else {
return CGSize(width: (UIScreen.main.bounds.width - 2*kInset - kLineSpacing), height: kCellHeight)
}
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
var size = CGFloat()
if collectionView == clnView {
size = kLineSpacing
}
return size
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
var Insect = UIEdgeInsets()
if collectionView == clnView {
Insect = UIEdgeInsets(top: kInset, left: kInset, bottom: kInset, right: kInset)
}
return Insect
}
But It's not showing properly. Look
iphone 5s
iPhone XR
Please Explain the Correct way. Thanks
Your code simply defines how items are laid out inside the collection view.
Constraints should tell you where in your parent view collection view is placed, and how wide + high.
You must learn autolayout and do it step by step in your storyboard or xib for the view. With proper Y constraint, it should work as expected. If you are putting collectionview + other things inside scrollview, follow this answer.
In my NSCollectionViewItem I set up the code below.
func collectionView(_ collectionView: NSCollectionView, viewForSupplementaryElementOfKind kind: NSCollectionView.SupplementaryElementKind, at indexPath: IndexPath) -> NSView {
let view = collectionView.makeSupplementaryView(ofKind: .sectionHeader, withIdentifier: NSUserInterfaceItemIdentifier(rawValue: "sectionHeader"), for: indexPath)
view.wantsLayer = true
view.layer?.backgroundColor = NSColor.red.cgColor
return view
}
func collectionView(_ collectionView: NSCollectionView, layout collectionViewLayout: NSCollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> NSSize {
return NSSize(width: self.frame.size.width, height: 60)
}
However, when I place a print() in the viewForSupplementaryElementOfKind function it never is executed. Also, no red header appears.
This is how I set up the NSCollectionView
public let collectionView: NSCollectionView = {
let v = NSCollectionView(frame: NSRect.zero)
v.wantsLayer = true
v.layer!.backgroundColor = NSColor.clear.cgColor
v.isSelectable = true
v.backgroundColors = [NSColor.clear]
v.allowsEmptySelection = false
v.collectionViewLayout = {
let l = NSCollectionViewFlowLayout()
l.minimumInteritemSpacing = 1
l.minimumLineSpacing = 1
l.scrollDirection = NSCollectionView.ScrollDirection.vertical
l.sectionInset = NSEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
return l
}()
return v
}()
What am I doing wrong?
The supplemental views (header and footer) are not collection view items. You need to implement those two methods on the NSCollectionViewDelgateFlowLayout object, not on your NSCollectionViewItem class.
See https://developer.apple.com/documentation/appkit/nscollectionviewdelegateflowlayout
You can also set a default for the entire collection view:
l.headerReferenceSize = NSSize(width: 0, height: 50)
l.footerReferenceSize = NSSize(width: 0, height: 50)
When using NSCollectionViewFlowLayout, the default size of the header and footer is NSSize.zero, so the method to make the supplemental view is not called unless one of these techniques is used.
Is it possible to create UICollectionView header view like UITableView headerView? I mean header view for whole collection view, not the repeated one for each section. Like the picture1 is I want, picture which is now i have done.
I have the solution now. Add a subview in the collectionView and make the collectionView contentInset below the topImageView like below.
topImageView.frame = CGRect(x: 5*SCREEN_SCALE, y: -125*SCREEN_SCALE, width: 285*SCREEN_SCALE, height: 120*SCREEN_SCALE)
collectionView.addSubview(topImageView)
collectionView.contentInset = UIEdgeInsets(top: 130*SCREEN_SCALE, left: 0, bottom: 0, right: 0)
There's a workaround that I use when wanting to achieve this. When setting the header size, I check section number before setting it. If it's the first section, I set the height accordingly - otherwise I set the height to 0 so it isn't visible
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
if section == 0 {
return CGSize(width: view.frame.width, height: 35)
} else {
return CGSize(width: view.frame.width, height: 0)
}
}
In swift like below
Register Header View
collectionView.registerClass(HeaderView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headerView")
In UICollectionViewDelegate
func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
if section == 0 {
let headerView = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "headerView", forIndexPath: indexPath)
headerView.frame.size.height = 100
return headerView }
else {
return nil
}
}
Important is that you are supply the flow layout with the header size
flowLayout.headerReferenceSize = CGSize(width: self.collectionView.frame.width, height: 100)
Otherwise the delegate method will not get called
I am trying to left align the cells in a UICollectionView, and I have used a GitHub repo to try and obtain this, link here:
https://github.com/mischa-hildebrand/AlignedCollectionViewFlowLayout
I set up the CollectionView and its cells like so:
lazy var filterCollectionView: UICollectionView = {
let layout = AlignedCollectionViewFlowLayout(horizontalAlignment: .left, verticalAlignment: .center)
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.register(filterCell.self, forCellWithReuseIdentifier: "filterCellId")
cv.backgroundColor = .white
cv.isScrollEnabled = true
cv.dataSource = self
cv.delegate = self
cv.showsHorizontalScrollIndicator = false
return cv
}()
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return genrArray.count
}
let genArray = ["Test123", "LongTextTest", "Short", "S", "#LongLongLongLong"]
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "filterCellId", for: indexPath) as! filterCell
cell.genText.text = genArray[indexPath.row]
cell.genText.sizeToFit()
cell.frame = CGRect(x: cell.frame.origin.x, y: cell.frame.origin.y, width: cell.genText.frame.width + 25, height: 24)
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let label = UILabel(frame: .zero)
label.text = genArray[indexPath.row]
label.frame = CGRect(x: 0, y: 0, width: label.intrinsicContentSize.width, height: 0)
return CGSize(width: label.frame.width + 25, height: 18)
}
This did nothing to the cells, so I added these lines of code into ViewDidLoad():
let layout = AlignedCollectionViewFlowLayout(horizontalAlignment: .left, verticalAlignment: .center)
layout.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize
self.filterCollectionView.collectionViewLayout = layout
The line that actually made a change in the CollectionView was layout.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize. But this still did not achieve the desired effect. This squished my cells and made them have a height of much smaller than 18 (the size declared in sizeForItem. When loaded up, the collectionView looks like this:
But when I scroll through the collectionView, it reverts back to normal as if the left alignment layout is not even there. It then looks like this:
The cells are the correct shape in that image, but the alignment/layout/spacing is off.
What am I doing wrong?
I am displaying several images in a collection view. They are all the same orientation (landscape) except for one, which is portrait (see image below):
I am trying to make the portrait image more centered, so that everything is evenly spaced. Any ideas on how to do this?
PhotoGalleryViewController.swift:
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return images.count
}
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! PhotoGalleryCell
let image = UIImage(named: images[indexPath.row])
cell.imageView.image = image
cell.captionLabel.text = captions[indexPath.row]
return cell
}
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
var size = CGSize()
if (indexPath.row == 3)
{
size = CGSize(width: 450, height: 600)
}
else {
size = CGSize(width: 940, height: 600)
}
return size
}
My suggestion would be not altering the cell size based on the fact that a portrait image will be in item 3.
Instead update the layout of your cell so that whatever image it gets assigned to it's image view, it will centre the image in itself and centralise the label underneath the image.
In ViewDidLoad method put this code :
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0
collectionview.collectionViewLayout = layout
Also add this into cellForRow Methods:
cell.imageview.contentmode = .aspectfit
Hope it helps to resolve your issue.