Resizing a tableView full screen when clicked - ios

Question

I am working on the following :
Screenshot
Basically it's one UIImageView inside of another UIImageView at the top (60% of the screen) and a UITableView that takes 40% of the screen
and code (see below) :
What I am trying to achieve is to resize the cells of the UITableView full screen when my customCell is clicked on and unsize it to it's original state when unclicked.
Is there any way to make this work?
Thanks in advance.
//Label outlets
#IBOutlet weak var tableView: UITableView!
var selectedIndexPath : IndexPath? = nil
override func viewDidLoad() {
super.viewDidLoad()
//MARK Start of CustomViewCell Code
tableView.register(UINib(nibName: "CustomViewCell", bundle: nil), forCellReuseIdentifier: "Cell")
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 5
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell") as! CustomViewCell
cell.clipsToBounds = true
return cell
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
let index = indexPath
if selectedIndexPath != nil {
if index == selectedIndexPath {
return 667
} else {
return 62
}
} else {
return 62}
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
switch selectedIndexPath {
case nil:
selectedIndexPath = indexPath
default:
if selectedIndexPath! == indexPath {
selectedIndexPath = nil
} else {
selectedIndexPath = indexPath
}
}
tableView.reloadRows(at: [indexPath], with: .automatic)
}
//MARK End of CustomViewCell Code

Answer 1

Besides reloading the cells with the new heights, you also need to change the frame of the table view. If you want to make the table occupy the whole screen, make sure you create an IBOutlet for it, say myTableView, then, after:
tableView.reloadRows(at: [indexPath], with: .automatic)
Add this code:
myTableView.frame = view.bounds
You may also create a Bool variable to keep track of normal and full-screen modes of the table view, and some CGRect variable to keep the initial frame. You may need something like this when you want the table view to go back to its initial frame:
myTableView.frame = initialTableViewFrame
Hope you get the idea.

Answer 2

Here is a pure auto-layout approach:
1.In your interface builder, create a UIImageView with constraints [Trailing, Leading, Top , Bottom, Height], make the height >= and priority is 999. You will use this height later in code for the expand/collapse logic.
2.Create a dummy UIView whose height will be programmatically set later, this UIView will 'push' / 'stretch' your cell height when you create the expand effect to your imageview. Set it's visibility to hidden since you don't need to show this to your user.
3.In your custom cell, create two NSLayoutConstraint instances as #IBoutlets, one for UIImageView height and one for the dummy UIView height then connect them later in your interface file.
let lowPriorityHeight : Float = 250;
let highPriorityHeight : Float = 999;
class CustomCell: UITableViewCell {
#IBOutlet weak var imgVwHeight: NSLayoutConstraint!
#IBOutlet weak var tempHeight : NSLayoutConstraint!
var isExpanded = false{
didSet{
imgVwHeight.priority = (isExpanded) ? lowPriorityHeight : highPriorityHeight;
if isExpanded == true{
tempHeight.constant = ExpandedHeight
}else{
tempHeight.constant = NormalHeight
}
}
}
4.In your main class, set the isExpanded to true or false to create the effect.
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath) as! CustomCell
cell.isExpanded = !cell.isExpanded
tableView.reloadData()
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell : CustomCell = tableView.dequeueReusableCell(withIdentifier: "kCustomCell", for: indexPath) as! CustomCell
return cell
}
You may download my sample implementation HERE