Swift handle Play/Pause button inTableview Cell - ios

I am trying to implement play/pause button in tableview cell. each cell having single button, whenever user click it, It should change button image also need to call required function, also after scroll it should same.
Below code I am using
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) - > UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("productCell") as ? SepetCell
cell.onButtonTapped = {
//Do whatever you want to do when the button is tapped here
}

See first of all every button of the tableView Cell will have a unique tag associated with it, so in order to update the button of a particular cell, you will have to define the tag of a button in the cells and then pass this tag to your function to perform action on that particular button of the selected cell.
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
{
let cell = tableView.dequeueReusableCell(withIdentifier: "cell_identifier", for:
indexPath) as! CellClass
cell.button.tag = indexPath.row
cell.button.addTarget(self, action: #selector(playpause), for: .touchUpInside)
}
#objc func playpause(btn : UIButton){
if btn.currentImage == UIImage(named: "Play") {
btn.setImage(UIImage(named : "Pause"), forState: .Normal)
}
else {
btn.setImage(UIImage(named : "Play"), forState: .Normal)
}
// perform your desired action of the button over here
}

State of the art in Swift are callback closures. They are easy to implement and very efficient.
In the data source model add a property
var isPlaying = false
In Interface Builder select the button in the custom cell and press ⌥⌘4 to go to the Attributes Inspector. In the popup menu State Config select Default and choose the appropriate image from Image popup, Do the same for the Selected state.
In the custom cell add a callback property and an outlet and action for the button (connect both to the button). The image is set via the isSelected property.
#IBOutlet weak var button : UIButton!
var callback : (()->())?
#IBAction func push(_ sender: UIButton) {
callback?()
}
In the controller in cellForRow add the callback, item is the current item of the data source array. The state of the button is kept in isPlaying
cell.button.isSelected = item.isPlaying
cell.callback = {
item.isPlaying = !item.isPlaying
cell.button.isSelected = item.isPlaying
}

Related

Table View Cell Button, Change Button Image once Clicked

Currently my project has a Table View Controller with a button and text on each row. I am having a problem figuring out how to change the image of the button on a particular row once the button is clicked. I already have the function "override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)" working to take my application to a new view. I need the button (when clicked) to add the data on a particular row to a favorites variable. Which would then be displayed on a different screen. My button does not change the view.
Currently I have a button event function that is called every-time a button in a row is clicked. The problem I am having is I have no idea how to access a that particular button in the row that was clicked and only change the image of that button.
Here is my code:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
// Setting Text and images
cell.batchName.text = processes[indexPath.item].batch_name
cell.startTime.text = processes[indexPath.item].starttime
cell.endTime.text = processes[indexPath.item].endtime
cell.slaTime.text = processes[indexPath.item].SLA
var statusColor = UIColor.black
// Calling Button event function
cell.starButton.addTarget(self, action: #selector(favoriteStarClicked), for: UIControlEvents.touchUpInside)
return cell
}
#IBAction func favoriteStarClicked(_ sender: Any) {
// Need to change the image of the button that was clicked
}
The modern Swift way is a callback closure
In the model add a property for the favorite state
var isFavorite = false
In Interface Builder select the button in the custom cell and press ⌥⌘4 to go to the Attributes Inspector. In the popup menu State Config select Selected, then select the star image in the Image popup (leave the image for state Default empty).
In the custom cell add a callback property and an action for the button (connect it to the button). The image is set via the isSelected property of the button
var callback : (()->())?
#IBAction func push(_ sender: UIButton) {
callback?()
}
In cellForRow set the image depending on isFavorite and add the callback
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
// Setting Text and images
cell.batchName.text = processes[indexPath.item].batch_name
cell.startTime.text = processes[indexPath.item].starttime
cell.endTime.text = processes[indexPath.item].endtime
cell.slaTime.text = processes[indexPath.item].SLA
var statusColor = UIColor.black
let item = processes[indexPath.row]
cell.button.isSelected = item.isFavorite
cell.callback = {
item.isFavorite = !item.isFavorite
cell.button.isSelected = item.isFavorite
}
return cell
}
The callback updates the model and the image in the cell
No protocol / delegate.
No custom target / action.
No tags.
No index paths.
No cell frame math.

Using a button on a cell to pass data in swift

I have 2 VCs, one of them is called HomeVC the other is DetailVC. I have a table view on HomeVC which displays cells with a label and a button. DetailVC just has a label. I am displaying an array of strings on the table view and when the button on the cell is clicked i want to carry the text in the label to the DetailVC's label.
Now i can easily do this with either didSelectRowAt method or using indexPathForSelectedRow in prepare segue method. But both cases requires me to tap on the cell itself but not the button.
I am just a beginner in swift. But to explain this there shouldn't be need for much code. So if you can, please explain with detail.
Thanks in advance.
In cellForRowAt add target to button i.e
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cellID", for: indexPath)
cell.button.tag = indexPath.row
cell.button.addTarget(self, action: Selector("buttonAction:"), for: .touchUpInside)
// other cell element setup
return cell
}
And at button action get the item from array using button tag i.e
func buttonAction(sender: UIButton) {
let data = tableArray[sender.tag]
// logic to pass present detailVC
}
Hope this will work!!
If you are using collection view you can use the following
// Set The Click Action On Button
cell.bProfileImage.addTarget(self, action: #selector(connected(sender:)), for:
.touchUpInside)
cell.bProfileImage.tag = indexPath.row
Then in your function
// Function For TouchUpInside For Cell
#objc func connected(sender: UIButton) {
let data = individualChatsListArray[sender.tag]
print(data.name)
}

How to change the title of a button inside a cell Swift

I have a collection view and inside a button.
When I tap this button I want to change its name.
I managed to do it but when I tap it, it changes if I have 20 buttons 10 of them like this if I tap the first button it changes the 0,2,4,6,8 and if I tap a button which isn't in the list then all buttons are checked.
This is my code:
#IBAction func following(sender: AnyObject) {
if follow.tag == sender.tag {
follow.setTitle("Following", forState: .Normal)
}
print("\(follow.tag) \(sender.tag)")
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Interest Cell", forIndexPath: indexPath) as! ThirdTabCell
cell.follow.tag = indexPath.row
return cell
}
Inside button's function I tried without if statement too but again the same problem.
When I print the tags it prints only the button which was tapped.
I also tried this to my ViewController
cell.follow.addTarget(self, action: #selector(ThirdTab.follow(_:)), forControlEvents: UIControlEvents.TouchUpInside)
//inside cellForItemAtIndexPath
func follow(sender:UIButton!) {
}
Just a short overview, So you get your answer
UICollectionView is highly optimized, and thus only keep On-screen visible rows in memory. Now, All rows Cells are cached in Pool and are reused and not regenerated. Whenever, user scrolls the UICollectionView, it adds the just-hidden rows in Pool and reuses them for next to be visible rows.
So, now, coming to your answer
When you tap on button, its title will get updated, but when you will scroll your collection view, the same cell with "updated button text" will be reused and that will cause the issue you are seeing.
SOLUTION
SAVE button state in an array, in your action method
#IBAction func following(sender: AnyObject) {
if follow.tag == sender.tag {
array[sender.tag] = "<text>"
collectionView.reloadData()
}
print("\(follow.tag) \(sender.tag)")
}
and inside your datasource method
update your button text like below:
//trick is to update your button text for each index
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell{
//SAMPLE CODE
let buttonValue = array[indexPath.index]
// update button value for each index
//trick is to update your button text for each index
cell.button.setTitle("", forState: .Normal)
}
Please change below the set title line in following function.
Existing Line:
follow.setTitle("Following", forState: .Normal)
New Line:
follow.setTitle("Following", forState: UIControlState.Normal)
Hope this is working for you.
Thanks
I would suggest you to approach it this way.
Inside cellForItemAtIndexPath you can assign a buttons outlet like this
cell.followOutlet.tag = indexPath.row
and then inside your follow function you can do this
#IBAction func following(sender: AnyObject) {
let follow = sender as! UIButton
let indexP = NSIndexPath(forRow: follow.tag, inSection: 0)
let cell = yourCollectionView.cellForItemAtIndexPath(indexP) as! yourCellName
follow.setTitle("Following", forState: .Normal)
}
And now you can do whatever you want with your button.

Changing button in cell when pressed

I'm trying to change the color of a button when pressed. Currently its inside a table view cell.
The way I'm doing it is adding as so:
#IBAction func upVote(sender: AnyObject) {
sender.setImage(UIImage(named: "bUpVote"), forState: .Normal)
}
and this is done inside the cell class (not the view controller class).
It works, but the change also applies to every third cell that follows it for the rest of the table.
Any work around? Thanks!
There are many way to solve this issue, one of the method is as follows
Add this to your customCell class,
#objc protocol MyTableViewCellDelegate {
func controller(controller: MyTableViewCell, button: UIButton, selectedButtonIndexPath : NSIndexPath)
}
class MyTableViewCell: UITableViewCell {
var delegate: AnyObject?
var indexPath : NSIndexPath?
#IBOutlet weak var button: UIButton!//outlet of button
button Action
#IBAction func buttonAction(sender: UIButton)//IF the sender type is AnyObject, you have to change it as UIButton
{
self.delegate?.controller(self, button: sender, selectedButtonIndexPath: indexPath!)
}
Add this to your ViewController class that has UITableView
class MyTableViewController: UITableViewController, MyTableViewCellDelegate { // I created a subClass of UITableViewController, your's may be different
var arraySelectedButtonIndex : NSMutableArray = []//global declaration
Since i created my custom cell using xib, in viewDidLoad()
tableView.registerNib(UINib(nibName: "MyTableViewCell", bundle: nil), forCellReuseIdentifier: "CustomCell")//Since, I use custom cell in xib
define delegate of custom cell by adding this
func controller(controller: MyTableViewCell, button: UIButton, selectedButtonIndexPath : NSIndexPath)
{
if(arraySelectedButtonIndex .containsObject(selectedButtonIndexPath)==false)
{
arraySelectedButtonIndex.addObject(selectedButtonIndexPath)
button.setImage(UIImage(named: "bUpVote") , forState: .Normal)
}
else
{
arraySelectedButtonIndex.removeObject(selectedButtonIndexPath)//If you need to set Deselect image
button.setImage(UIImage(named: "deselectImage") , forState: .Normal)//If you need to set Deselect image
}
}
In tableView dataSource (cellForRowAtIndexPath)
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("CustomCell", forIndexPath: indexPath) as! MyTableViewCell
cell.delegate = self
cell.indexPath = indexPath
if(arraySelectedButtonIndex .containsObject(indexPath))
{
cell.button.setImage(UIImage(named: "bUpVote"), forState: .Normal)
}
else
{
cell.button.setImage(UIImage(named: "deselectImage"), forState: .Normal)//If you need to set Deselect image
}
return cell
}
It's because cells are reused by the tableView. if you need to persist the state of subviews in the cell, you need to update your data source and reflect the changes in cellForRowAtIndexPath method.
This is not the way to do it. You store the state of the button in your model. Eg: say store the item's upvoted status in your model :
class Post
{
var title : String
var upvoted : Bool
}
How to get the index path ?
Move the IBAction method on your custom tableview subclass. Add a property called delegate to the cell and set it to your controller in cellForRowAtIndexPath: . Now in the action method inform the delegate.
I have described this in detail here : https://stackoverflow.com/a/32250043/1616513
Now when the user upvotes you update the model :
#IBAction func upVotedInCell(sender: UITableViewCell) {
var indexPath = self.tableView.indexPathForCell(sender)
self.items[indexPath].upvoted = true
self.tableView.reloadRowsAtIndexPaths([indexPath],UITableViewRowAnimation.None)
}

Changing a single UIButton image in a collection view is affecting multiple cells

I currently am using a Collection View to display a list of events to a user, and each one of my custom cells has a button that invites the user to attend the event. When pressed, the button image should then change to a newImage.png which displays that they are now attending that event. When I do this in my code below, pressing the button does in fact change the picture, but as I scroll down my collection view, multiple cells that have yet to be clicked also have changed to the "newImage.png." How can I stop this from happening?
class CustomCell: UICollectionViewCell{
#IBAction func myButtonAction(sender: UIButton) {
myButtonOutlet.setImage(UIImage(named: "newImage.png"), forState: UIControlState.Normal)
}
#IBOutlet weak var myButtonOutlet: UIButton!
}
The collection view is reusing cells, as it is designed to do. What you should do is reset the image in your cellForItemAtIndexPath implementation.
I've had this issue before too and this is most likely do to cell reuse. What you might try to do to avoid this problem is to explicitly set the cell's image in your cellForItemAtIndexPath() and then add something to your model that keeps track of which events the user is attending. Then, again in your cellForItemAtIndexPath(), check the model to see what button should be on that cell, and then change it accordingly.
You need to store selected button index in your class and check perticular index in your function
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! UICollectionViewCell
cell.backgroundColor = UIColor.blackColor()
if(selectedIndex == indexPath.row){
myButtonOutlet.setImage(UIImage(named: "newImage.png"), forState: UIControlState.Normal)
//change background image here also your button code
}
return cell
}
and after doing this steps . Reload collection view .
This ended up solving my problem. I have an array that I store my Cells in. Each cell has a boolean called isAttending. In my cellForItemAtIndexPath method, I implemented the code below along with the function switchImage:
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
var cell = collectionView.dequeueReusableCellWithReuseIdentifier("CalendarCell", forIndexPath: indexPath) as! CalendarCell
cell.customButton.layer.setValue(indexPath.row, forKey: "index")
cell.customButton.addTarget(self, action: "switchImage:", forControlEvents: UIControlEvents.TouchUpInside)
return cell
}
func switchImage(sender: UIButton){
let index : Int = (sender.layer.valueForKey("index")) as! Int
if (events[index].isAttending == false){
events[index].isAttending = true
cell.customButton.setImage(UIImage(named: "isAttending.png"), forState: UIControlState.Normal)
}else{
events[index].isAttending = false
cell.customButton.setImage(UIImage(named: "isNotAttending.png"), forState: UIControlState.Normal)
}
self.collectionView.reloadData()
}

Resources