any ideas on how to hide and show groups (with following groups sliding up/down)?

Getting Started Newbie Questions
#1

Dear Corona community,

I have been wondering if there is a good way to show/hide displaygroups while following displaygroups slide up and down respectively. An example of what I mean can be seen here.

What I’d like to do: I have a “settings” scene, on which I have three “subtitles”: Profilepicture, app-layout and description. Each of these subtitles has content that fills up the whole display, so the whole content does not fit. I’d like to be able to show/hide each of them by clicking on a button next to the subtitles.

A scrollview would be a workaround, but as in a tableview, there is no chance to hide a row. At least I did not find anything in the docs.

One might make it work by setting .isVisible of a specific group to false and then transition all the following groups up, but that would result in lots of transitions the more groups there are.

Hope it got clear :slight_smile:

thanks in advance,

Chris

#2

Thanks for the link, but i’m not sure I get what you want.

I think you’re saying if you have content (in groups):

AAAAAAAAAAAA

BBBBBBBBBBBB

CCCCCCCCCCC

DDDDDDDDDDD

and if you hide BB…BB, that C an D should slide up?

Likewise, it they should slide down if B is shown again.

Is that right?

If so, you’ll need to write a custom piece of code to handle that.  It will need to measure the height of the groups and do some other math to handle this.

Does the page have to be scroll able?  That complicates things a little and will require custom coding your own scroller or a widget scrollview and custom coding.

#3

Correct :slight_smile:

#4

Or, to visualize it: On entering the scene, only the titles should appear with an arrow-button on their right side:

profilepicture >

app-layout >

other settings >

When I click on the arrow next to profilepicture, it should look like this:

profilepicture v

content

content

content

app-layout >

other settings >

when I click again on the arrow next to profilepicture, back to the roots:

profilepicture >

app-layout >

other settings >

Tapping the arrow next to “app-layout”, I’d like to see:

profilepicture >

app-layout v

content

content

content

other settings >

:slight_smile:

#5

aka accordion container

#6

I said this above (as an update), but if you missed it, this would require some custom coding/function to simplify your effort.

The key elements here are:

  1. You should have a group that acts as the container/parent for all other groups.
  2. You need to insert one group per ‘collapsible-set’ into the parent and track them in a table or some other way.
  3. All content inserted into children groups should align to <0,0> and grow downward.
  4. Write a collapse() and expand() function attached to the parent group that takes the number of the child to modify.

Collapsing should be something like:

  1. Fade out collapse group or hide immediately ( set alpha to 0)
  2. Get height of child group.
  3. Iterate over all child groups with indexes greater  than collapse child and transition or immediately move them in y by -height (from step 2)

Expanding is the inverse.

Note: If this is too hard to work out, I think I could make a simple example as a level-1 hit.

https://forums.coronalabs.com/topic/69420-hire-a-hitman-problem-solver-is-back/

#7

In case it’s useful, I have something that largely overlaps what roaminggamer describes here, as one part of a dialog object of mine.

I tend to have “sections” influenced by other things that are active, e.g. selected item in a list or checkbox, so my typical setup looks like this; but manually opening and closing is possible too.

That said, this comes from a larger project, so it’s not something you could just dump into your own and be all set.

#8

roaminggamer and StarCrunch, thank you very much for your input. The basic idea roaminggamer posted is what I rougly had in mind and I was just hoping there would be a simpler way of doing it, like a widget I had overseen or something :slight_smile:

So, I guess by the end of the day it results in doing a lot of coding and hacking for a - in my eyes - trivial problem. Plus, the more elements I have, the more calculations have to be done and I don’t really like these “dirty” methods.

I will rethink it and will consider alternative layouts for my settings page.

Again, thank you two for your help. @roaminggamer: Great service you’re offering, I wish I had known about your hitman earlier. Next time I’m about to throw my laptop out of the window, I’ll let you know :slight_smile:

#9

Thanks for the link, but i’m not sure I get what you want.

I think you’re saying if you have content (in groups):

AAAAAAAAAAAA

BBBBBBBBBBBB

CCCCCCCCCCC

DDDDDDDDDDD

and if you hide BB…BB, that C an D should slide up?

Likewise, it they should slide down if B is shown again.

Is that right?

If so, you’ll need to write a custom piece of code to handle that.  It will need to measure the height of the groups and do some other math to handle this.

Does the page have to be scroll able?  That complicates things a little and will require custom coding your own scroller or a widget scrollview and custom coding.

#10

Correct :slight_smile:

#11

Or, to visualize it: On entering the scene, only the titles should appear with an arrow-button on their right side:

profilepicture >

app-layout >

other settings >

When I click on the arrow next to profilepicture, it should look like this:

profilepicture v

content

content

content

app-layout >

other settings >

when I click again on the arrow next to profilepicture, back to the roots:

profilepicture >

app-layout >

other settings >

Tapping the arrow next to “app-layout”, I’d like to see:

profilepicture >

app-layout v

content

content

content

other settings >

:slight_smile:

#12

aka accordion container

#13

I said this above (as an update), but if you missed it, this would require some custom coding/function to simplify your effort.

The key elements here are:

  1. You should have a group that acts as the container/parent for all other groups.
  2. You need to insert one group per ‘collapsible-set’ into the parent and track them in a table or some other way.
  3. All content inserted into children groups should align to <0,0> and grow downward.
  4. Write a collapse() and expand() function attached to the parent group that takes the number of the child to modify.

Collapsing should be something like:

  1. Fade out collapse group or hide immediately ( set alpha to 0)
  2. Get height of child group.
  3. Iterate over all child groups with indexes greater  than collapse child and transition or immediately move them in y by -height (from step 2)

Expanding is the inverse.

Note: If this is too hard to work out, I think I could make a simple example as a level-1 hit.

https://forums.coronalabs.com/topic/69420-hire-a-hitman-problem-solver-is-back/

#14

In case it’s useful, I have something that largely overlaps what roaminggamer describes here, as one part of a dialog object of mine.

I tend to have “sections” influenced by other things that are active, e.g. selected item in a list or checkbox, so my typical setup looks like this; but manually opening and closing is possible too.

That said, this comes from a larger project, so it’s not something you could just dump into your own and be all set.

#15

roaminggamer and StarCrunch, thank you very much for your input. The basic idea roaminggamer posted is what I rougly had in mind and I was just hoping there would be a simpler way of doing it, like a widget I had overseen or something :slight_smile:

So, I guess by the end of the day it results in doing a lot of coding and hacking for a - in my eyes - trivial problem. Plus, the more elements I have, the more calculations have to be done and I don’t really like these “dirty” methods.

I will rethink it and will consider alternative layouts for my settings page.

Again, thank you two for your help. @roaminggamer: Great service you’re offering, I wish I had known about your hitman earlier. Next time I’m about to throw my laptop out of the window, I’ll let you know :slight_smile: