Reputation: 407
I want to make use of an Expandable table view to show the rest of the table cell details when the user taps on the cell. Currently my requirement looks like this
The above cell which is shown is in expanded state where as the below cell is in unexpanded state.
Currently i am planning to make use of the Bool to check whether the cell is expanded or not.
Please help me with the case in Swift3.
Currently i am planing to use the code: This is the custom cell class:
import UIKit
protocol OptionButtonsDelegate{
func closeFriendsTapped(at index:IndexPath)
}
class ExpandingTableViewCellContent {
var title: String?
var subtitle: String?
var expanded: Bool
init(title: String, subtitle: String) {
self.title = title
self.subtitle = subtitle
self.expanded = false
}
}
class ExpandingTableViewCell: UITableViewCell {
@IBOutlet var titleLabel: UILabel!
@IBOutlet var subtitleLabel: UILabel!
var delegate:OptionButtonsDelegate!
var indexPath:IndexPath!
@IBOutlet weak var buttonClick: UIButton!
override func awakeFromNib() {
super.awakeFromNib()
}
@IBAction func buttonAction(_ sender: UIButton) {
self.delegate?.closeFriendsTapped(at: indexPath)
}
func set(content: ExpandingTableViewCellContent) {
self.titleLabel.text = content.title
self.subtitleLabel.text = content.expanded ? content.subtitle : ""
if content.expanded {
self.buttonClick.isHidden = false
self.backgroundColor = UIColor.orange
}
else
{
self.buttonClick.isHidden = true
self.backgroundColor = UIColor.red
}
}
}
The view controller class code is:
import UIKit
class ViewController: UIViewController,OptionButtonsDelegate {
@IBOutlet var tableView: UITableView!
var datasource = [ExpandingTableViewCellContent]()
@IBOutlet weak var buttonClick: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
tableView.dataSource = self
tableView.delegate = self
tableView.tableFooterView = UIView() // Removes empty cell separators
tableView.estimatedRowHeight = 60
tableView.rowHeight = UITableViewAutomaticDimension
datasource = [ExpandingTableViewCellContent(title: "Vestibulum id ligula porta felis euismod semper.",
subtitle: "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna."),
ExpandingTableViewCellContent(title: "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis .",
subtitle: "Etiam porta sem malesuada magna mollis euismod. Nullam quis risus urna mollis ornare vel eu leo."),
ExpandingTableViewCellContent(title: "Aenean lacinia bibendum nulla sed consectetur.",
subtitle: "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus.")]
}
}
extension ViewController : UITableViewDataSource, UITableViewDelegate {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return datasource.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView .dequeueReusableCell(withIdentifier: String(describing: ExpandingTableViewCell.self), for: indexPath) as! ExpandingTableViewCell
cell.set(content: datasource[indexPath.row])
cell.delegate = self
cell.indexPath = indexPath
return cell
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let content = datasource[indexPath.row]
content.expanded = !content.expanded
tableView.reloadRows(at: [indexPath], with: .automatic)
}
func closeFriendsTapped(at index: IndexPath) {
print("button tapped at index:\(index.row)")
}
}
Help me with the same:
Upvotes: 1
Views: 214
Reputation: 20804
Using your base implementation I add two statics constants for expanded and collapsed height in ExpandingTableViewCell
static let collapsedHeigth : CGFloat = 80
static let expandedHeigth : CGFloat = 210
Also added the heightForRowAtIndexPath method in your ViewController
implementation
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
let currentExpandingContext = datasource[indexPath.row]
if(currentExpandingContext.expanded)
{
return ExpandingTableViewCell.expandedHeigth
}else
{
return ExpandingTableViewCell.collapsedHeigth//fixed heigth
}
}
All code in the repository
Hope this helps
Upvotes: 1