I am trying to code the button in the top right so that when tapped, it'll only display the name in the white bar and not display the photo, or the position of the person on the card. Here is a photo illustrating the expanded section.
I tried manipulating the size by using the sizeForItemAt in collectionView, but that did not work. Here is what I did:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize{
let cell = collectionView.cellForItem(at: indexPath) as? CardCollectionViewCell
if expand {
cell?.profileimage.alpha = 0
cell?.poscomp.alpha = 0
return CGSize(width: 360, height: 208)
} else {
cell?.profileimage.alpha = 1
cell?.poscomp.alpha = 1
return CGSize(width: 360, height: 40)
}
}
And for the button, I did...
#IBAction func collapse(_ sender: Any) {
expand = !expand
for index in 0...associates.count {
cardCollectionView.reloadItems(at: [IndexPath(row: 0, section: index)])
}
}
Is there a correct/simpler way to manipulate heights and elements in a CollectionViewCell?
Thanks in advance.
You are doing right code, but I din't recognise your issue.
Add following code which are working fine, that may be expecting you.
var expandedHeight : CGFloat = 200
var notExpandedHeight : CGFloat = 50
var isExpanded = false
In button's action method add code to reload collectionView with/without animation
#IBAction func btnExpandTapped(_ sender: UIButton) {
self.isExpanded = !self.isExpanded
// Simple reload
// self.cvList.reloadData()
// Reload with animation
for i in 0..<5 {
let indexPath = IndexPath(item: i, section: 0)
UIView.animate(withDuration: 0.8, delay: 0.0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.9, options: .curveEaseInOut, animations: {
self.cvList.reloadItems(at: [indexPath])
}, completion: { success in
print("success")
})
}
}
Add UICollectionViewDelegateFlowLayout's sizeForItemAt method and add following code to change height of collection view cell.
extension ViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if isExpanded {
return CGSize(width: collectionView.frame.width, height: 200)
} else {
return CGSize(width: collectionView.frame.width, height: 40)
}
}
}
Check following link for demo App.
https://freeupload.co/files/02c31165b3c6876678301ae075f5722b.zip
Related
I have one horizontal UICollectionview where I need to transform or reduced the size of unselected cells. I have given a common size in sizeForItem delegate function for all the cells. And I have given a minimumLine spacing to be maintained in between the cells. But the problem when re-scale the cell lets say (0.8 scalings) the space between the cells is getting wider and not maintaining the common size.
Here are the some code snippets for the collectionView,
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 400, height: 400)
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 0, left: 24, bottom: 24, right: 24)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 20
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as? SomeCellClass
cell.loadUI()
if indexPath == selectedIndex {
cell?.performScaleTransformation(reScale: false)
}
else{
cell?.performScaleTransformation(reScale: true)
}
}
return cell ?? UICollectionViewCell()
}
///This function is in Cell class SomeCellClass: UICollectionviewCell
func performScaleTransformation(reScale: Bool) {
if reScale {
UIView.animate(withDuration: 0.3, delay: 0.0, options: [ .curveEaseOut], animations: {
self.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
}, completion: nil)
}
else {
UIView.animate(withDuration: 0.3, delay: 0.0, options: [ .curveEaseOut], animations: {
self.transform = .identity
}, completion: nil)
}
}
The below is the output I m getting with this code,
From the attached screenshot you can see, how the spaces between cells are variying.
I believe what is happening is that the transform is occurring independently of the layout of the collection view. The layout of the cell is not bound by the transform, so it does not affect the spacing.
You may be able to solve this by setting the size of the cells in the sizeForItemAt function. In that function, try and see if indexPath is in collectionView.indexPathsforSelectedItems and adjust the size in there.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if collectionView.selectedIndexPaths.contains(indexPath){
return CGSize(width: 400.0, height: 400.0)
} else {
return CGSize(width: 320.0, height: 320.0)
}
}
If you do this, you'll most likely have to invalidate the layout after each selection
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
collectionView.collectionViewLayout.invalidateLayout()
}
I'm not sure how animation would work with that or if the other cells would remain centered or not, but it's worth a shot.
I am using a collectionview and the first data load is working fine. The problem occurs when the data is load a second time the labels overlaps because the old labels appear to still exist.
Below is my collectionview code, thanks in advance.
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let customCell = collectionView.dequeueReusableCell(withReuseIdentifier: "customCellIdentifier", for: indexPath)
customCell.layer.borderColor = UIColor.black.cgColor
customCell.layer.borderWidth = 1
// changed these lines here
if cellsLabels[indexPath.row] != nil {
customCell.willRemoveSubview(cellsLabels[indexPath.row]!)
}
//to these lines here and the problem was solved
let maybe = customCell.subviews
for i in 0 ..< maybe.count {
maybe[i].removeFromSuperview()
}
let c
ommentLabel = UILabel()
commentLabel.text = commentsArray[indexPath.row]
commentLabel.frame = CGRect(x: 0, y: 50, width: 200, height: 30)
customCell.addSubview(commentLabel)
self.cellsLabels[indexPath.row] = commentLabel
if indexPath.row == commentLoadTracker*10 - 1 {
print("working doomfist")
}
return customCell
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return commentsArray.count
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
var cellSize = CGSize()
cellSize.width = self.commentView.frame.width
cellSize.height = 100
return cellSize
}
customCell.willRemoveSubview
You are calling willRemoveSubiew instead of removeFromSuperview
if cellsLabels[indexPath.row] != nil {
cellsLabels[indexPath.row]!.removeFromSuperview()
}
There is no need to call willRemoveSubview, UIKit calls it for you, it only exists so that it can be
Overridden by subclasses to perform additional actions before subviews are removed from the view.
I have a CollectionView with have 2 items.
CollectionView has pagingEnabled, I want to show them circularly like:
[1] 2 -> [2] 1 -> [1] 2 -> [2] 1
Is it possible to do this with CollectionView
My code:
extension HomeViewController: UICollectionViewDelegateFlowLayout {
func configureHeaderView() {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
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?.rx.setDelegate(self).addDisposableTo(disposeBag)
let nib = UINib(nibName: BannerCollectionViewCell.reuseIdentifier, bundle: nil)
headerView?.register(nib, forCellWithReuseIdentifier: BannerCollectionViewCell.reuseIdentifier)
headerView?.showsHorizontalScrollIndicator = false
tableView.tableHeaderView = headerView
if let headerView = headerView {
self.bannerItems.asObservable().bindTo(headerView.rx.items(cellIdentifier: BannerCollectionViewCell.reuseIdentifier, cellType: BannerCollectionViewCell.self)) {
row, banner, cell in
cell.banner = banner
}.addDisposableTo(disposeBag)
}
}
// MARK: UICollectionViewDelegateFlowLayout
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: UIScreen.main.bounds.width, height: headerHeight)
}
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
}
}
Make use of UICollectionView's scrollToItemAtIndexPath method to move collectionView back to the first item if it reached the end and the user swiped right. Move the collectionView back to the last item if user swiped left from first item. You should set the animation property to false
func scrollViewWillBeginDecelerating(_ scrollView: UIScrollView) {
// Calculate where the collection view should be at the right-hand end item
let offsetRight = collectionView.frame.size.width * CGFloat(yourDataArray.count)
if scrollView.contentOffset.x == offsetRight {
// user is scrolling to the right from the last item to the 'fake' item 1.
// reposition offset to show the 'real' item 1 at the left-hand end of the collection view
let newIndexPath = IndexPath(row: 1, section: 0)
collectionView.scrollToItem(at: newIndexPath, at: .left, animated: false)
} else if scrollView.contentOffset.x == 0 {
// user is scrolling to the left from the first item to the fake 'item N'.
// reposition offset to show the 'real' item N at the right end of the collection view
let newIndexPath = IndexPath(row: (yourDataArray.count-2), section: 0)
collectionView.scrollToItem(at: newIndexPath, at: .left, animated: false)
}
}
I'm trying to program an expandable UICollectionViewCell.
If the user presses the topbutton, the cell should expand to a different height and reveal the underlying content.
My first implementation features a custom UICollectionViewCell, which can be expanded by clicking the topbutton, but the collectionview does not expand too. Atm. the cell is the last one in the collectionview and just by swiping down enough, you can see the expanded content. If you stop touching, the scrollview jumps up and nothing of the expanded cell could be seen.
Here's my code:
import Foundation
import UIKit
class ExpandableCell: UICollectionViewCell {
#IBOutlet weak var topButton: IconButton!
public var expanded : Bool = false
private var expandedHeight : CGFloat = 200
private var notExpandedHeight : CGFloat = 50
#IBAction func topButtonTouched(_ sender: AnyObject) {
if (expanded == true) {
self.deExpand()
} else {
self.expand()
}
}
public func expand() {
UIView.animate(withDuration: 0.8, delay: 0.0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.9, options: UIViewAnimationOptions.curveEaseInOut, animations: {
self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: self.expandedHeight)
}, completion: { success in
self.expanded = true
})
}
public func deExpand() {
UIView.animate(withDuration: 0.8, delay: 0.0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.9, options: UIViewAnimationOptions.curveEaseInOut, animations: {
self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: self.notExpandedHeight)
}, completion: { success in
self.expanded = false
})
}
}
I also have problems implementing the following method correctly, because I haven't got a direct reference to the cell:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
Basicly everything should be animated.
The screenshot shows an expanded and not expanded cell. Hope that helps!
Thanks!
If you have more than cell that needs to be expanded to different height when a button is touched inside the collection view cell, then, here is the code.
I have used the delegate pattern to let the controller know, button of which cell was touched using the indexPath.
You need to pass the indexpath of the cell to the cell when creating the cell.
when the button is touched the cell calls the delegate(ViewController), which updates the isExpandedArray accordingly and reloads the particular cell.
CollectionViewCell
protocol ExpandedCellDelegate:NSObjectProtocol{
func topButtonTouched(indexPath:IndexPath)
}
class ExpandableCell: UICollectionViewCell {
#IBOutlet weak var topButton: UIButton!
weak var delegate:ExpandedCellDelegate?
public var indexPath:IndexPath!
#IBAction func topButtonTouched(_ sender: UIButton) {
if let delegate = self.delegate{
delegate.topButtonTouched(indexPath: indexPath)
}
}
}
View Controller Class
class ViewController: UIViewController {
#IBOutlet weak var collectionView: UICollectionView!
var expandedCellIdentifier = "ExpandableCell"
var cellWidth:CGFloat{
return collectionView.frame.size.width
}
var expandedHeight : CGFloat = 200
var notExpandedHeight : CGFloat = 50
var dataSource = ["data0","data1","data2","data3","data4"]
var isExpanded = [Bool]()
override func viewDidLoad() {
super.viewDidLoad()
isExpanded = Array(repeating: false, count: dataSource.count)
}
}
extension ViewController:UICollectionViewDataSource{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return dataSource.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: expandedCellIdentifier, for: indexPath) as! ExpandableCell
cell.indexPath = indexPath
cell.delegate = self
//configure Cell
return cell
}
}
extension ViewController:UICollectionViewDelegateFlowLayout{
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if isExpanded[indexPath.row] == true{
return CGSize(width: cellWidth, height: expandedHeight)
}else{
return CGSize(width: cellWidth, height: notExpandedHeight)
}
}
}
extension ViewController:ExpandedCellDelegate{
func topButtonTouched(indexPath: IndexPath) {
isExpanded[indexPath.row] = !isExpanded[indexPath.row]
UIView.animate(withDuration: 0.8, delay: 0.0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.9, options: UIViewAnimationOptions.curveEaseInOut, animations: {
self.collectionView.reloadItems(at: [indexPath])
}, completion: { success in
print("success")
})
}
}
Don't change the cell frame directly. Implement func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize and handle heights there.
Lets say you have one cell in your collectionView and a top button above it:
let expanded = false
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize{
if expanded{
// what is the size of the expanded cell?
return collectionView.frame.size
}else{
// what is the size of the collapsed cell?
return CGSizeZero
}
}
#IBAction func didTouchUpInsideTopButton(sender: AnyObject){
// top button tap handler
self.expanded = !self.expanded
// this call will reload the cell and make it redraw (animated) Since the expanded flag changed, the sizeForItemAt call above will return a different size and animate the size change
self.collectionView.reloadItemsAtIndexPaths([NSIndexPath(forRow: 0, inSection: 0)])
}
You can use header to show non-expand cell. And when you two a button or something in it , then you can insert other part (expanding part ) as a row in that section which the header belongs to.
Benefits - you can use many provided animations when the expanding happen.
I have a horizontal collectionView and i would like to manage that when scrolling it, the centre cell becomes larger. So, each time a cell is the center cell it will be larger than the others. Check the image beneath.
Can anyone help me with the best way to do this? Thanks in advance!
My code so far:
import UIKit
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
#IBOutlet var horizontalCollectionView: UICollectionView!
#IBOutlet var verticalCollectionView: UICollectionView!
var horizontal = ["1","2","3","4","5","6","7","8","9","10","1","2","3","4","5","6","7","8","9","10"]
var horizontalCellSize = CGSize(width: 50, height: 50)
var horizontalLargeCellSize = CGSize(width: 80, height: 80)
var centerCell = UICollectionViewCell()
var cellIsInCenter = false
var myIndexPath = IndexPath()
override func viewDidLoad() {
super.viewDidLoad()
}
// When the main view's dimensions change this will re-layout the collection view
override func viewWillLayoutSubviews() {
verticalCollectionView.collectionViewLayout.invalidateLayout()
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return horizontal.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if collectionView == horizontalCollectionView {
let horizontalCell = collectionView.dequeueReusableCell(withReuseIdentifier: "HorizontalCell", for: indexPath) as! HorizontalCell
horizontalCell.backgroundColor = UIColor.blue
horizontalCell.textLabel.text = horizontal[indexPath.row]
return horizontalCell
}
else {
let verticalCell = collectionView.dequeueReusableCell(withReuseIdentifier: "VerticalCell", for: indexPath) as! VerticalCell
verticalCell.backgroundColor = UIColor.red
verticalCell.textLabel.text = horizontal[indexPath.row]
return verticalCell
}
}
// MARK: UIScrollViewDelegate
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if scrollView == self.horizontalCollectionView {
let horizontalScrollPosition = scrollView.contentOffset.x * 35
self.verticalCollectionView.delegate = nil
self.verticalCollectionView.contentOffset = CGPoint(x: 0, y: horizontalScrollPosition)
self.verticalCollectionView.delegate = self
}
if scrollView == self.verticalCollectionView {
let verticalScrollPosition = scrollView.contentOffset.y
self.horizontalCollectionView.delegate = nil
self.horizontalCollectionView.contentOffset = CGPoint(x: verticalScrollPosition, y: 0)
self.horizontalCollectionView.delegate = self
}
}
// MARK: CollectionViewLayout
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
if collectionView == verticalCollectionView {
let size = CGSize(width: collectionView.bounds.width, height: collectionView.bounds.height)
return size
}
if indexPath.item == 3 {
return CGSize(width: 70, height: 70)
}
return CGSize(width: 50, height: 50)
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
self.verticalCollectionView.scrollToItem(at: indexPath, at: .centeredVertically, animated: true)
print("\(indexPath)")
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
var closestCell: UICollectionViewCell = self.horizontalCollectionView.visibleCells[0]
for cell in self.horizontalCollectionView.visibleCells as [UICollectionViewCell] {
let closestCellDelta = abs(closestCell.center.x - self.horizontalCollectionView.bounds.size.width / 2.0 - self.horizontalCollectionView.contentOffset.x)
let cellDelta = abs(cell.center.x - self.horizontalCollectionView.bounds.size.width/2.0 - self.horizontalCollectionView.contentOffset.x)
if (cellDelta < closestCellDelta){
closestCell = cell
self.centerCell = cell
self.cellIsInCenter = true
horizontalCellSize = CGSize(width: 80, height: 50)
}
}
let indexPath = self.horizontalCollectionView.indexPath(for: closestCell)
self.horizontalCollectionView.scrollToItem(at: indexPath!, at: .centeredHorizontally , animated: true)
if closestCell.backgroundColor == UIColor.black {
closestCell.backgroundColor = UIColor.blue
}
horizontalCollectionView.reloadItems(at: [self.horizontalCollectionView.indexPath(for: closestCell)!])
closestCell.backgroundColor = UIColor.black
}
}
Try this out:
func collectionView(_ collectionView: UICollectionView,layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
if collectionView == verticalCollectionView {
let size = CGSize(width: collectionView.bounds.width, height: collectionView.bounds.height)
return size
}
let point = CGPoint(x: self.view.frame.size.width/2.0, y:35 )
//or you can try this code also
//let point = CGPoint(x: UIScreen.main.bounds.width/2, y:35 )
print(point)
let centerIndex = self.collectionView.indexPathForItemAtPoint(point)
if indexPath.item == centerIndex {
return CGSize(width: 70, height: 70)
}
return CGSize(width: 50, height: 50)
}
This code gives you the index of the item at the center of the collection View.
Hope this helps