Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Expand tableview cell on button click

I did some easy trick with constraints. I made tableView cell which is expandable. On cell click it opens new cell(black)(Below is image for easier understanding).

My question is how can I make it work with the button which is inside the top cell which looks like "V". I want it at least to rotate like 90° if cell is clicked. How could I achieve it.

This is how I made it to expand:

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        if(selectedIndex == indexPath.row){
            return 210
        }else{
            return 135
        }
    }

    override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        if (selectedIndex == indexPath.row){
            selectedIndex = -1
        }else{
            selectedIndex = indexPath.row
        }

        self.productstable.beginUpdates()
        self.productstable.reloadRowsAtIndexPaths([indexPath], withRowAnimation: UITableViewRowAnimation.Automatic)
        self.productstable.endUpdates()
    }
like image 802
Tarvo Mäesepp Avatar asked Jun 09 '26 02:06

Tarvo Mäesepp


2 Answers

You can achieve using closure:

typealias arrowButtonTappedBlock = (button:UIButton) -> Void

declare a closure in your custom cell like below:

var arrowButtonTapped : arrowButtonTappedBlock!

and on arrow button click's action call the closure like below:

if arrowButtonTapped != nil {
            arrowButtonTapped(button: sender as! UIButton)
        }

and in cellForRowAtIndexPath: set the closure and perform the action you were performing in didSelectRowAtIndexPath:

cell!.arrowButtonTapped = { (button:UIButton) -> Void in

                if (self.selectedIndex == indexPath.row){
                    self.selectedIndex = -1
                }else{
                    self.selectedIndex  = indexPath.row
                }

                self.tableview.beginUpdates()
                self.tableview.reloadRowsAtIndexPaths([indexPath], withRowAnimation: UITableViewRowAnimation.Automatic)
                self.tableview.endUpdates()
} 
like image 94
Mohammed Shakeer Avatar answered Jun 10 '26 16:06

Mohammed Shakeer


You can do this with easy way

  1. Delare var selectedRowIndex = -1

  2. Create Protocol for your Custom Cell

    protocol TableViewCellDelegate {
    func BtnExpendTapped(_ cell: CustomCell) }
    
  3. In your Custom Cell Declare protocol and add action method for button

    var delegate: TableViewCellDelegate?

    @IBAction func actionExpendBtnTap(_ sender: UIButton){
       delegate?.BtnExpendTapped(self)
    }
    
  4. In your Height for Row method add your Expended and normal height as your requirement

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
                    if indexPath.row == selectedRowIndex {
                        return 270 //Expanded
                    }
                    return 138.5 //Not expanded
           }
    
    
  5. use your protocol delegate in view controller and add delegate method

func BtnExpendTapped(_ cell: CustomCell) {
     if let indexPath = tblView.indexPath(for: cell) {
         if selectedRowIndex == indexPath.row {
             selectedRowIndex = -1
         } else {
             selectedRowIndex = indexPath.row
         }
        tblView.reloadRows(at: [indexPath], with: .none)
     }
 }


like image 35
Threadripper Avatar answered Jun 10 '26 14:06

Threadripper