Niraj
Niraj

Reputation: 305

Show button if cell is tapped and hide after leave in UITableView

If someone taps over the cell or selects the cell then the button will show or else it'll be hidden. Only that cell that is playing the current song will show the button (it's for either play or stop) but the problem is the button shown on each row of the cell if didn't hide it also I don't want to hide the button if I click the playing song cell again.

class AudioListViewController: UIViewController {
    var selectedRowIndex = -1
    var songList: [Audio] = [
        Audio(id: 0, trackName: "Song 1", trackTitle: "ABbcd:", album: "Loreim loreim",
              uploadedBy: "A men", genre: "Romantic", lyricsLang: "English", artist: "God",
              duration: 2.00),
        Audio(id: 1, trackName: "Song 2", trackTitle: "ABbcd:", album: "Loreim loreim",
              uploadedBy: "A men", genre: "Romantic", lyricsLang: "English", artist: "God",
              duration: 2.00),
        Audio(id: 2, trackName: "Song 3", trackTitle: "ABbcd:", album: "Loreim loreim",
              uploadedBy: "A men", genre: "Romantic", lyricsLang: "English", artist: "God",
              duration: 2.00)
    ]
    @IBOutlet weak var songListTableView: UITableView!
    var isTapped: Bool = false
    @IBOutlet weak var close: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        songListTableView.dataSource = self
        songListTableView.delegate = self
        
        songListTableView.register(UINib(nibName: "SongsListTableViewCell", bundle: nil),
                                   forCellReuseIdentifier: "SongListCell")
    }
}

extension AudioListViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return songList.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "SongListCell",
                                                 for: indexPath) as! SongsListTableViewCell
        
        cell.songTitle?.text = songList[indexPath.row].trackName
        cell.songDuration?.text = String(songList[indexPath.row].duration)
        return cell
    }
}

extension AudioListViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
        let position = indexPath.row
        
        let vc = tableView.dequeueReusableCell(withIdentifier: "SongListCell", 
                                               for: indexPath) as! SongsListTableViewCell
    }
}

My UITableViewCell code:

class SongsListTableViewCell: UITableViewCell {
    public var position: Int = 0
    public var isPlaying: Bool = false
    var cellsState: Bool = false
    
    @IBOutlet weak var singleViewCell: UIStackView!
    @IBOutlet weak var songCellView: UIView!
    @IBOutlet weak var songImage: UIImageView!
    @IBOutlet weak var songTitle: UILabel!
    @IBOutlet weak var songDuration: UILabel!
    @IBOutlet weak var makeFavorite: UIButton!
    @IBOutlet weak var useSong: UIButton!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        useSong.addTarget(self, action: #selector(SongsListTableViewCell.selectSong(_:)), for: .touchUpInside)
        makeFavorite.addTarget(self, action: #selector(SongsListTableViewCell.makeFavourite(_:)), for: .touchUpInside)
        useSong.isHidden = true
    }
    
    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        useSong.layer.cornerRadius = 6
    }
    
    @IBAction func makeFavourite(_ sender: UIButton) {
        sender.isSelected = !sender.isSelected
        if sender.isSelected {
            makeFavorite.setImage(UIImage(systemName: "star.fill"), for: .normal)
        } else {
            makeFavorite.setImage(UIImage(systemName: "star"), for: .normal)
        }
    }
}

This is how it's looking right now:

SongList view

This is my Songlistview:

songlistview

Upvotes: 1

Views: 1381

Answers (1)

Hario Budiharjo
Hario Budiharjo

Reputation: 56

Hello Tyler i am using function in UITableViewDelegate with didSelectRowAt and didDeselectRowAt to show and hide , and don't hide why i click the component in Cell , with the function will check row in the index path and call function hide/show

import UIKit

class ShowHideTableviewVC: UIViewController {
    
    @IBOutlet weak var tableview: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableview.dataSource = self
        self.tableview.delegate = self
    }
    
}

extension ShowHideTableviewVC: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        5
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ShowHideCell", for: indexPath) as! ShowHideCell
        return cell
    }
}

extension ShowHideTableviewVC: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        if let cell = tableView.cellForRow(at: indexPath) as? ShowHideCell {
            cell.showButton(show: true)
        }
    }
    
    func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
        if let cell = tableView.cellForRow(at: indexPath) as? ShowHideCell {
            cell.showButton(show: false)
        }
    }
}

and this is the code in the cell it will hide the button component and make the height zero because we want hide the button component

import UIKit

class ShowHideCell: UITableViewCell {
    
    @IBOutlet weak var buttonx: UIButton!
    @IBOutlet weak var heightButton: NSLayoutConstraint!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        showButton(show: false)
    }
    
    
    
    func showButton(show: Bool) {
        if show {
            heightButton.constant = 30
            buttonx.isHidden = !show
        } else {
            heightButton.constant = 0
            buttonx.isHidden = !show
        }
    }
}

it will not hide the button (play button) when you click the button component inner cell because it using selected in the UITableViewDelegate

Upvotes: 1

Related Questions