Custom UITableViewCell that expands on touch and includes uitextfield

Discussion in 'iOS Programming' started by mraheel, Oct 4, 2009.

  1. mraheel macrumors regular

    Joined:
    Apr 18, 2009
    #1
    Hi guys, I've pretty much added a lot to my CustomCell, its working great. However, theres one thing i cant work out..

    My requirement is, for a grouped TableView, On tapping a single UITableViewCell, it should expand below, kinda animate and extend below and show more information in that cell.

    On tapping an already expanded cell, it should go back to a "normal" cell state.

    Any direction i can have here would be great..
     
  2. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #2
    This is a common UI on the Mac, with disclosure triangles, but not used much, or at all, on iPhone.

    I haven't done this but here's the basic idea.

    In your datamodel you have a BOOL that represents expanded. In your cellForRowAtIndexPath you check that value and return an expanded cell or a normal height cell. In didSelectRowAtIndexPath: you toggle the expanded BOOL and then

    Code:
    [self.tableView beginUpdates];
    [self.tableView reloadRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:YES];
    [self.tableView endUpdates];
    
    You'll also have to implement heightForRowAtIndexPath:
     
  3. mraheel thread starter macrumors regular

    Joined:
    Apr 18, 2009
    #3
    Okay i got my subclassed tableViewCell with a BOOL.

    I still cant get my way around it, one reason being the OS version, see below, and the other, I cant get hold of the targetCell in heightForRowAtIndexPath. inorder to check if its expanded or not..

    it seemed pretty easy, until i find out that reloadRowsAtIndexPath is a 3.0 only? I couldnt find it in 2.2.1 sdk.
    I'm trying to keep my app 2.2 compatible, It'll be a headache doing this! i think.. ??
     
  4. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #4
    That BOOL needs to be somewhere else, not in the cell. If you don't have a clear data model then just build a mutable array of NSNumbers and add NSNumber numberWithBOOL:YES or NO to it as your record of whether a row is expanded. You could do it other ways also, that's just one simple way.

    Minor headache only. Use reloadData: on 2.x. I think you won't get the exact same appearance. The animation will be different on the two versions but it will still work.
     
  5. mraheel thread starter macrumors regular

    Joined:
    Apr 18, 2009
    #5
    Yea, thats what i thought, animation probably wont be there at all.
    I got the general idea, but I'm kinda struggling with some understanding..
    I thought the cell should have a BOOL will be utilised in cellforRowAtIndexPath, i guess not.

    I have a 3D NSObjectclass in NSMutableArray, thats the only dataModel. The ObjectClass has two NSStrings one for Cell.text, and the other to be displayed if cell expands. I kinda dont understand where to modify in my current model.

    In the method you mentioned, NSNumber numberWithBOOL. a record should be added in tapped. Ok, thats fine, what about in CellForRowAtIndex?

    NSNumber will be my indexPath.row?

    I apologise for lame questions if they are :),
     
  6. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #6
    I'm not entirely sure. It's possible to wrap the call to reloadData in a fade animation block. If you do that it will crossfade from one appearance to the other (short row -> tall row and the opposite).

    Also, you could

    Code:
    [self.tableView beginUpdates];
    [self.tableView deleteRowsAtIndexPathPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:YES];
    [self.tableView insertRowsAtIndexPathPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:YES];
    [self.tableView endUpdates];
    I haven't tried that either but it should result in the existing row being removed and a new one animated to replace it, either a new big row or a new short row. You'll just have to try it.

    The reason that the bool can't be in the cell is because the cell can be scrolled offscreen and then not even exist anymore.

    You can add the BOOL to your existing 3D NSObjectclass or it can be separate. Doesn't matter. In cellForRowAtIndexPath you check the value of the BOOL and return the tall or short cell accordingly.

    NSNumber numberWithBOOL is the way you put a BOOL into an array. You could add the BOOL to your existing 3D NSObjectclass as a simple data member instead.
     
  7. mraheel thread starter macrumors regular

    Joined:
    Apr 18, 2009
    #7
    Oh, man.. this thing worked!!! kinda!,

    As you said, i added a bool to my object class.
    in CellForRowAtIndex I checked if (!Object.Expanded) return Normal Sized Cell else return Expanded Cell.

    To save some complication, i created a new UITableViewCell class for the expanded cell.

    I totally removed the Height for Row At Index method.. perhaps i should add it for better performance??, i guess..

    In DidSelectRow, I added the exact code you you generously provided. I changed the Object.Expanded every time on tap.
    and woila, it animated.

    However, it animates not in the "expanding and collapsing" fashion but horizontally. Literally deleting and inserting a new row. I guess thats what its meant to do. I guess i can live with that :)

    I'll have to do more testing at the moment, cuz my new cell is of a normal sized cell.. It should probably work though


    PhoneyDeveloper, your a genius!
     
  8. mraheel thread starter macrumors regular

    Joined:
    Apr 18, 2009
    #8
    Okay, i jus confirmed, added heightForRowAtIndexpath, and got a bigger sized cell.. it looked pretty cool!

    UPDATE: I disabled animation for deleteRowAt.. and insertRowAtIndexP.. and expanding and collapsing worked just fine.

    i guess this is it, thanks alot PD!..

    i just home tho that this wont squeeze alot of memory..
     
  9. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #9
    Glad you got this working. As I said I haven't implemented this myself and there are various ways you could do it. Make sure to test on both OS 3.x and 2.x because I'm sure there are differences. You have to implement the heightForCellAtIndexPath because you have rows of different heights. Having two cell kinds is fine, and is probably the best way to do this. I don't see any problems with memory as long as you are reusing cells in the normal way.
     
  10. dineshpersaud macrumors newbie

    Joined:
    Oct 6, 2011
    #10
    Expanding/Colapsing cell

    i need an example of explanding a cell to show more information and by tapping on it..reduces it size back to normal thanks.
     
  11. jiminaus macrumors 65816

    jiminaus

    Joined:
    Dec 16, 2010
    Location:
    Sydney
    #11
    Read the 9 posts above yours. They tell you how to do it.
     
  12. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #12
    Also look at the apple sample code Tableview Animations and Gestures.
     

Share This Page