Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Yes, it's definitely possible, although I am struggling with the same issue at the moment. I've managed to get the cells to hide and everything works ok, but I cannot currently make the thing animate neatly. Here is what I have found:</p> <p>I am hiding rows based on the state of an ON / OFF switch in the first row of the first section. If the switch is ON there is 1 row beneath it in the same section, otherwise there are 2 different rows.</p> <p>I have a selector called when the switch is toggled, and I set a variable to indicate which state I am in. Then I call:</p> <pre><code>[[self tableView] reloadData]; </code></pre> <p>I override the <strong>tableView:willDisplayCell:forRowAtIndexPath:</strong> function and if the cell is supposed to be hidden I do this:</p> <pre><code>[cell setHidden:YES]; </code></pre> <p>That hides the cell and its contents, but does not remove the space it occupies. </p> <p>To remove the space, override the <strong>tableView:heightForRowAtIndexPath:</strong> function and return 0 for rows that should be hidden. </p> <p>You also need to override <strong>tableView:numberOfRowsInSection:</strong> and return the number of rows in that section. You have to do something strange here so that if your table is a grouped style the rounded corners occur on the correct cells. In my static table there is the full set of cells for the section, so there is the first cell containing the option, then 1 cell for the ON state options and 2 more cells for the OFF state options, a total of 4 cells. When the option is ON, I have to return 4, this includes the hidden option so that the last option displayed has a rounded box. When the option is off, the last two options are not displayed so I return 2. This all feels clunky. Sorry if this isn't very clear, its tricky to describe. Just to illustrate the setup, this is the construction of the table section in IB:</p> <ul> <li>Row 0: Option with ON / OFF switch</li> <li>Row 1: Displayed when option is ON</li> <li>Row 2: Displayed when option is OFF</li> <li>Row 3: Displayed when option is OFF</li> </ul> <p>So when the option is ON the table reports two rows which are:</p> <ul> <li>Row 0: Option with ON / OFF switch</li> <li>Row 1: Displayed when option is ON</li> </ul> <p>When the option is OFF the table reports four rows which are:</p> <ul> <li>Row 0: Option with ON / OFF switch</li> <li>Row 1: Displayed when option is ON </li> <li>Row 2: Displayed when option is OFF</li> <li>Row 3: Displayed when option is OFF</li> </ul> <p>This approach doesn't feel correct for several reasons, its just as far as I have got with my experimentation so far, so please let me know if you find a better way. The problems I have observed so far are:</p> <ul> <li><p>It feels wrong to be telling the table the number of rows is different to what is presumably contained in the underlying data.</p></li> <li><p>I can't seem to animate the change. I've tried using <strong>tableView:reloadSections:withRowAnimation:</strong> instead of reloadData and the results don't seem to make sense, I'm still trying to get this working. Currently what seems to happen is the tableView does not update the correct rows so one remains hidden that should be displayed and a void is left under the first row. I think this might be related to the first point about the underlying data.</p></li> </ul> <p>Hopefully someone will be able to suggest alternative methods or perhaps how to extend with animation, but maybe this will get you started. My apologies for the lack of hyperlinks to functions, I put them in but they were rejected by the spam filter because I am a fairly new user.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload