2

I have a UI to design

This UI will be without Expand

This UI will be after Expand

I need to create this UI using AutoLayout and i am confused shall i use only UITableViewCell to create this UI or i have to create this using `Section. Also how will i work with expand collapse could someone help me in this.Thanks in advance.

Ashley Mills
  • 50,474
  • 16
  • 129
  • 160
anuj tiwari
  • 91
  • 8
  • you can achive this by creating 2 prototype cells one with lesser view and the other one with expandedview and on trigger you can replace cells with animation it looks like cell is expanding.. – junaid May 31 '18 at 06:25
  • @anujtiwari There are many questions on SO about this topic. Read them, try out their suggestions, ask again you've had a go at solving yourself. – Ashley Mills May 31 '18 at 11:19
  • @anujtiwari Add the code you wrote to your question and we can show you where you're going wrong. – Ashley Mills May 31 '18 at 11:32
  • 1
    @anujtiwari Autolayout isn't magic, you will have to write some code to make this work. If you can't be bothered to do that, and just want someone else to do it for you, don't be surprised if you don't get answers to your question. Please read [ask] and [mcve] – Ashley Mills May 31 '18 at 11:38

1 Answers1

1

you can achieve this in two way First creating 2 prototype cells one for Header view and other for details view and Second one prototype cells one for details view and create your header in viewForHeaderInSection for each section.

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

so it's easy for you to do with first one here is the code.

import UIKit

public struct Section {
    var name: String
    var collapsed: Bool

    public init(name: String, collapsed: Bool = false) {
        self.name = name
        self.collapsed = collapsed
    }
}

class TableViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!
    var sampleData: [Section] = [Section(name: "Header 1"),Section(name: "Header 2"),Section(name: "Header 3")]

After setting up data expand collapse uitableviewcell 

//
// MARK: - View Controller DataSource and Delegate
//
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return sampleData[section].collapsed ? 2 : 1
}

func numberOfSections(in tableView: UITableView) -> Int {
    return sampleData.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    // Header
    if indexPath.row == 0 {
        let cell = tableView.dequeueReusableCell(withIdentifier: "header")!
        return cell
    }
    // Cell
    let cell = tableView.dequeueReusableCell(withIdentifier: "detailed")!
    return cell
}

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    if indexPath.row == 0 {
        let collapsed = !sampleData[indexPath.section].collapsed

        // Toggle collapse
        sampleData[indexPath.section].collapsed = collapsed
        self.tableView.reloadSections([indexPath.section], with: .automatic)
    }
}

enter image description here

Govind Kumawat
  • 1,562
  • 1
  • 10
  • 17