UICollectionView with buttons - ios

I am using a UICollectionView and I am thinking how to add buttons for each collection view cell and I don't want all buttons to do the same actions. I need to change buttons actions. I don't know how to do that.
import UIKit
class FirstARViewController: UIViewController , UICollectionViewDelegate , UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
#IBOutlet weak var collectionView: UICollectionView!
var imagescv = ["cv1","cv2","cv3","cv4","cv5"]
override func viewDidLoad() {
super.viewDidLoad()
collectionView.delegate = self
collectionView.dataSource = self
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return imagescv.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! cellimagesar
cell.layer.cornerRadius = 5
cell.layer.borderWidth = 1
cell.myImages.image = UIImage(named: imagescv [indexPath.row])
cell.myImages.contentMode = .scaleToFill
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 182, height: 290)
}
}

Assign the tag and action to the button inside the collectionviewcell.
Assign indexPath.item as button tag is the best approach to identify the particular button from the number of cells.
All you need to do within cellForItemAt delegate method.
cell.btnCounter.tag = indexPath.item
cell.btnCounter.addTarget(self, action: #selector(self.buttonClicked), for: .touchUpInside)
And now you just need to handle the event as below
func buttonClicked(_ sender: UIButton) {
//Here sender.tag will give you the tapped Button index from the cell
//You can identify the button from the tag
}

Related

I really don't know how to make collectionViewCell (didSelected) function work properly

I'm making a Calendar in Swift 5 and now I'm encountering a problem.
First this is my code:
import UIKit
class YearViewController: UIViewController {
#IBOutlet weak var yearName: UILabel!
#IBOutlet weak var yearCollectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
yearName.text = String(CalenderBrain.init().curruntYear)
yearCollectionView.dataSource = self
yearCollectionView.delegate = self
yearCollectionView.register(UINib(nibName: "ReusableYearCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "MyCell3")
if let layout = self.yearCollectionView.collectionViewLayout as? UICollectionViewFlowLayout{
layout.minimumInteritemSpacing = -10
layout.minimumLineSpacing = 1
}
}
}
extension YearViewController : UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 12
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell3", for: indexPath) as! ReusableYearCollectionViewCell
cell.monthName.text = Calendar.current.monthSymbols[indexPath.row]
if cell.monthName.text == CalenderBrain.init().curruntMonthName(){
cell.monthName.textColor = .red
cell.tag = 999
}
cell.month = indexPath.row + 1
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return .init(width: 126.3, height:(570-3)/4)
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let vc = storyboard?.instantiateViewController(withIdentifier: "lastOne") as? ViewController
vc?.whatIGetFromYearViewController = indexPath.row + 1
vc?.curruntMonthNameThatIHaveToPut = Calendar.current.monthSymbols[indexPath.row]
vc?.nextMonthNameThatIHaveToPut = Calendar.current.monthSymbols[indexPath.row + 1]
self.navigationController?.pushViewController(vc!, animated: true)
print("i'm pressed")
}
}
I want if my cells are clicked then a segue occurs.
And this is an image of my cell. (I make collectionView in collectionViewCell.)
The problem is the segue only occurs when I click the left part of the label. If I click collectionView in CollectionViewCell then the segue doesn't occur. I think that's because Swift recognizes collectionView in collectionViewCell another CollectionView. So for now, I want to make collectionViewCell clicked and segue occurred regardless of part that I click. Is that possible?
Try set collectionView.isUserInteractionEnable = false in collectionViewCell.
This code will prevent user action onto collectionView in collectionViewCell, just receive didSelectItem action of main collectionView.

How to set my UIButton tittle inside of uicollection view

so I want to set my button tittle like this with my array, but the result the button title didn't show my array
//viewcontroller
let menus = ["Topokki","Sundubu","Galbitang"]
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return menus.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! CollectionViewCell
cell.menusButton.titleLabel?.text = menus[indexPath.item]
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print(indexPath.item)
}
//collectionviewcell class
class CollectionViewCell: UICollectionViewCell {
#IBOutlet weak var menusButton: UIButton!
}
Try:
cell.menusButton.setTitle(menus[indexPath.item], forState: .normal)
From docs about titleLabel of UIButton
To set the actual text of the label, use setTitle(_:for:) (button.titleLabel.text does not let you set the text)
So... you need to set title of your button by calling setTitle(_:for:)
cell.menusButton.setTitle(menus[indexPath.item], for: .normal)

UICollectionViewCell not updating view after selection

Have an issue where:
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
is called when an item is selected, but I cannot change any cell properties from this method.
I created a new project with a stripped down UICollectionViewController to change the background color of a cell when selected. It also doesn't work. Here it is:
import UIKit
private let reuseIdentifier = "Cell"
class CollectionViewController: UICollectionViewController {
override func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 5
}
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath)
cell.backgroundColor = UIColor.blue
return cell
}
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let cell = self.collectionView(self.collectionView, cellForItemAt: indexPath)
cell.backgroundColor = UIColor.green
}
}
The only thing I did in Storyboard is delete the standard View Controller and replace it with a UICollectionViewController, create a subclass of UICollectionViewController and set the controller in the storyboard as that class.
Also, I can confirm that the cell's index path is returned from this method when called from inside the didSelectItemAt method:
self.collectionView.indexPathsForSelectedItems
You are using the wrong API. Never call the delegate method collectionView(_ cellForItemAt:, use cellForItem(at:
if let cell = collectionView.cellForItem(at: indexPath) {
cell.backgroundColor = UIColor.green
}
But be aware that this change is not persistent. When the user scrolls the color will change back to blue.
You can achieve that as below,
ViewController
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ColoursViewCell", for: indexPath) as! ColoursViewCell
return cell
}
UICollectionViewCell
class ColoursViewCell: UICollectionViewCell {
#IBOutlet var photoImageView: UIImageView?
override var bounds: CGRect {
didSet {
self.layoutIfNeeded()
}
}
override var isSelected: Bool{
didSet{
if self.isSelected{
self.photoImageView?.backgroundColor = UIColor.random
}else{
self.photoImageView?.backgroundColor = UIColor.lightGray
}
}
}
}
you can have sample projects from this link I have in GitHub
https://github.com/hadanischal/RandomColors/tree/develop

collectionView cell width not changing for different nib

I have a collection view which is nested inside of a table view cell. The first cell in the collection view is a button which allows users to create a new list. Its width is smaller than that of the main lists cells. I recently changed the code around so that the collectionView delegate and dataSource methods are in the tableViewController instead of the table view cell, however now the first cells width is not changing as it did before moving the code. This picture shows:
If I press into the blank space it is registering that I clicked the plus cell.
The code for all the collectionView delegate and dataSource methods:
extension ProfileTableViewController: UICollectionViewDelegate, UICollectionViewDataSource {
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
print("the media: \(usersLists.count)")
return usersLists.count + 1
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if indexPath.item == 0 {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "addNewListCell", for: indexPath) as! addNewListCell
cell.currentUser = currentUser
return cell
}else{
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "listCell", for: indexPath) as! userListsCell
cell.layer.applySketchShadow()
cell.layer.cornerRadius = 20
cell.layer.masksToBounds = false
cell.currentUser = currentUser
cell.media = usersLists[indexPath.item-1]
return cell
}
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize{
if indexPath.item == 0 {
let size = CGSize(width: 80, height: 158)
return size
}else{
let size = CGSize(width: 158, height: 158)
return size
}
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
if indexPath.item == 0 {
//button
self.addListDelegate?.addNewItem()
}
}
I tested if changing any values in the size in sizeForItemAt would change the cell size and nothing changes in any cells
the table view methods which are in the ProfileTableViewController class and not the extension:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "profileCell", for: indexPath) as! profileCell
cell.selectionStyle = .none
return cell
}
override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
guard let tableViewCell = cell as? profileCell else { return }
tableViewCell.setCollectionViewDataSourceDelegate(dataSourceDelegate: self, forRow: indexPath.row) //this line sets the collectionView delegate and datasouce so that I can have all of the collectionView methods in this class
}
and this is the code inside of the tableViewCell
protocol addListCollectionDelegate: class {
func addNewItem()
}
class profileCell: UITableViewCell, UICollectionViewDelegate {
#IBOutlet weak var collectionView: UICollectionView!
override func awakeFromNib() {
super.awakeFromNib()
collectionView.register(UINib(nibName: "usersLists", bundle: nil), forCellWithReuseIdentifier: "listCell")
collectionView.register(UINib(nibName: "newListCell", bundle: nil), forCellWithReuseIdentifier: "addNewListCell")
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
func setCollectionViewDataSourceDelegate
<D: UICollectionViewDataSource & UICollectionViewDelegate>
(dataSourceDelegate: D, forRow row: Int) {
collectionView.delegate = dataSourceDelegate
collectionView.dataSource = dataSourceDelegate
collectionView.reloadData()
}
}
Does anyone know how to change the width of the first cell since sizeForItemAt is not changing the size? Thanks
You forgot to add this protocol: UICollectionViewDelegateFlowLayout
It is required when you want to return custom size for an item.
Also improve your code like below:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if indexPath.item == 0 {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "addNewListCell", for: indexPath) as! addNewListCell
cell.currentUser = currentUser
return cell
}
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "listCell", for: indexPath) as! userListsCell
cell.layer.applySketchShadow() // Write this line in cell class
cell.layer.cornerRadius = 20 // Write this line in cell class
cell.layer.masksToBounds = false // Write this line in cell class
cell.currentUser = currentUser
cell.media = usersLists[indexPath.item - 1]
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize{
return indexPath.item == 0 ? CGSize(width: 80, height: 158) : CGSize(width: 158, height: 158)
}
Try to use UICollectionViewDelegateFlowLayout method. In Xcode 11 or later, you need to set Estimate Size to none from Xib.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout:
UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let padding: CGFloat = 170
let collectionViewSize = advertCollectionView.frame.size.width - padding
return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
}

Collectionview with multiple different collection viewcell

I'm building a survey app and I want to use such view
in this example there's only two answer possible but I want to be possible to have like 3 / 4 answer and different kind of survey,
I will receive a JSON to build it with the type of the question and the answer possible etc ..
My main problem is that I don't really know how to proceed, I'm a newbie on iOS development atm and I don't want to try too many thing and have spaghetti code so if someone have an idea on how to do this collection view with different view depending on the json
Thanks o/
There is lot of ways to achieve it but as in your case you want with Collectionview with multiple different collection viewcell
In ViewController.swift, conform few UICollectionView protocol.
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate , UICollectionViewDelegateFlowLayout{
#IBOutlet weak var mainCollectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
mainCollectionView.isScrollEnabled = false
}
then implement collection view data source and delegate methods.
// MARK: - UICollectionViewDataSource protocol
// tell the collection view how many cells to make
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 3
}
// make a cell for each cell index path
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
print("indexPath.row \(indexPath.row)")
if indexPath.row == 0{
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "firstCell", for: indexPath)
if let button = cell.contentView.viewWithTag(2) as? UIButton{
button.addTarget(self, action: #selector(MoveToNextCell), for: .touchUpInside)
}
return cell
}
else if indexPath.row == 1{
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "secondCell", for: indexPath)
if let button = cell.contentView.viewWithTag(3) as? UIButton{
button.addTarget(self, action: #selector(MoveToNextCell), for: .touchUpInside)
}
return cell
}
else{
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "thirdCell", for: indexPath)
if let button = cell.contentView.viewWithTag(4) as? UIButton{
button.addTarget(self, action: #selector(MoveToNextCell), for: .touchUpInside)
}
return cell
}
}
// MARK: - UICollectionViewDelegate protocol
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
// handle tap events
print("You selected cell #\(indexPath.item)!")
}
then implement UICollectionViewDelegateFlowLayout methods.
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: self.view.frame.width , height: self.view.frame.height)
}
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 1.0
}
func collectionView(_ collectionView: UICollectionView, layout
collectionViewLayout: UICollectionViewLayout,
minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 1.0
}
Then finally for moving between cells
func MoveToNextCell(){
let collectionBounds = self.mainCollectionView.bounds
let contentOffset = CGFloat(floor(self.mainCollectionView.contentOffset.x + collectionBounds.size.width))
self.moveToCell(contentOffset: contentOffset)
}
func moveToPreviousCell(){
let collectionBounds = self.mainCollectionView.bounds
let contentOffset = CGFloat(floor(self.mainCollectionView.contentOffset.x - collectionBounds.size.width))
self.moveToCell(contentOffset: contentOffset)
}
func moveToCell(contentOffset: CGFloat){
let frame: CGRect = CGRect(x : contentOffset ,y : self.mainCollectionView.contentOffset.y ,width : self.mainCollectionView.frame.width,height : self.mainCollectionView.frame.height)
self.mainCollectionView.scrollRectToVisible(frame, animated: true)
}
That's pretty much all you need to achieve that.

Resources