Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

iOS Custom UITableViewCell that expands on touch and includes uitextfield

M

mraheel

macrumors regular
Original poster
Apr 18, 2009
136
0
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..
 
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:
 
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.. ??
 
I cant get hold of the targetCell in heightForRowAtIndexPath. inorder to check if its expanded or not.
Click to expand...

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.

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.. ??
Click to expand...
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.
 
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.
Click to expand...

Yea, thats what i thought, animation probably wont be there at all.
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.
Click to expand...

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 :),
 
Yea, thats what i thought, animation probably wont be there at all.
Click to expand...

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.
 
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!
 
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..
 
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.
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back