iOS How do I create expanding and contracting sections?

[thedon1]

I want to create expanding and contracting sections in my iOS app.

The way they would work is that I click on the header which has a right facing arrow to the left of it and then the view expands exposing the content underneath. The arrow would then face downwards.

This can be seen in the attributes inspector section of Xcode and the Bloomberg app also does it.

I have no idea how to do this and i'm not even sure what it's called so it's been difficult finding resources online.

Any help to point me in the right direction would be great.

Thanks

 

[Duncan C]

I want to create expanding and contracting sections in my iOS app.

The way they would work is that I click on the header which has a right facing arrow to the left of it and then the view expands exposing the content underneath. The arrow would then face downwards.

This can be seen in the attributes inspector section of Xcode and the Bloomberg app also does it.

I have no idea how to do this and i'm not even sure what it's called so it's been difficult finding resources online.

Any help to point me in the right direction would be great.

Thanks

You mean in table views? You want a disclosure triangle that the user can tap, and when they do, a section opens up and displays detail cells?

We did something very much like that for the help system in our apps Save My Place and the Kevin and Kell cartoon reader. You might want to take a look at one of those apps to see if it's what you're talking about.

it's been quite a while since I looked at that code, but what I remember doing is making a table view that has multiple sections with a single row for each section to start. When the user taps the triangle, we add additional rows to the selected section using animation, and also animate the disclosure triangle rotating 90 degrees.

 

[thedon1]

Yeah mate that's exactly the type of thing I need.

I've found tutorials online but they prefer to do everything programatically. I want to set everything out in the IB (at it's maximum size) and then reduce the size programatically when the view loads.

 

[Duncan C]

Yeah mate that's exactly the type of thing I need.

I've found tutorials online but they prefer to do everything programatically. I want to set everything out in the IB (at it's maximum size) and then reduce the size programatically when the view loads.

The code I used was based on iOS 3, where you had to customize table view cells in code. Now under iOS 5 and 6, you can create cell templates in your Storyboard, so you can do more in IB than you used to be able to do.

I set up two types of cells, a title cell and a detail cell. every section always has a title cell. That's the cell that has the disclosure triangle. Then when you tap the disclosure triangle it adds a second row to the section that displays the detail content.