How to make an Expandable TableView with Profile Img?

| | August 18, 2015

I was trying to create a Slide side out menu using the SWRevealViewController but I could not do the expandable TableView and the profile with image + Hello, Name…

what i need

And all I could do was:

what i already done

Basically how do you make an expandable TableView and the profile.

Are there any examples of how to do this?

2 Responses to “How to make an Expandable TableView with Profile Img?”

  1. From what I can tell, you want an expandable table view, ie: Click a row in the table, and more options will appear.

    I’ve achieved that in the past using the following:

    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    
        if let cell = tableView.cellForRowAtIndexPath(indexPath) as? OuterCell{
    
            if let object = data[indexPath.row] as? OuterObject{
                if(object.open == false){
                    data.insert(InnerObject(content: object.innerContent), atIndex: indexPath.row + 1)
                    tableView.beginUpdates()
                    tableView.insertRowsAtIndexPaths([NSIndexPath(forRow: indexPath.row + 1, inSection: 0)], withRowAnimation: .Left)
                    tableView.endUpdates()
                }else{
                    data.removeAtIndex(indexPath.row + 1)
                    tableView.beginUpdates()
                    tableView.deleteRowsAtIndexPaths([NSIndexPath(forRow: indexPath.row + 1, inSection: 0)], withRowAnimation: .Left)
                    tableView.endUpdates()
                }
                object.open = !object.open
            }
        }
    }
    

    Basically what is happening here is the dataSource for the TableView is represented by the data array in this example. This is what you connect to all the TableViewDelegate hooks.

    Within the data array I am holding two types of objects, a OuterObject and an InnerObject.

    The OuterObject contains all the information for the inner objects that it contains, and if you click on it, it will dynamically add its children into the data array.

    Example Data (I’m using JSON cause its easy to read and understand, you’ll have to represent this in swift)

    [
    {
      name="Ensino",
      type="outerObject",
      open=true
      childObjects=[
        {
          name="Servico",
          type="innerObject"
        },
        {
          name="Avaliacao",
          type="innerObject"
        }
      ]
    },
    {
      name="Pesquisa",
      type="outerObject",
      open=false
      childObjects=[]
    }
    ]
    

    So in your case you would need an “Ensino” object, with a children property containing data for: Avaliaco, Servicos, ect…

    Outer Object also keeps state as to whether or not it is open or closed, that way if you click on it again, you can know to remove all the inner objects that belong to it.

    In this example I have hardcoded the OuterObject to always have at most one child, you would have to modify the code to be smarter as to how many objects are inserted/deleted upon click to be based on how many children objects the outer object you click has.

    By calling tableView.beginUpdates(), tableView.beginUpdates(), tableView.insertRowsAtIndexPaths() you are accessing the methods that will allow an animated transition to happen when you update the data.

    The key to solving this problem is creating an intelligent data source, and then leveraging the methods that Apple has in UITableView to make it happen.

    Let me know if you need more help, this is an advanced TableView topic.

  2. check this sample code dropdown menu

    this might give you some idea.

Leave a Reply