Groupie: expand/collapse item

Created on 14 Oct 2019  路  4Comments  路  Source: lisawray/groupie

I use Groupie in kotlin and use Expanded Header, i need when click on header item before expanded items , collapse other expanded items.
in fact i need one header isExpanded in the moment
please help!

question

Most helpful comment

@zabochen @vahids28 A quick example ( based on example code).

First off, your header item that controls the expandable group needs to an onExpandListener to communicate when it toggles its group:

class ExpandableHeaderItem : ExpandableItem {

    var onExpandListener: ((ExpandableGroup) -> Unit)? = null

    private lateinit var expandableGroup: ExpandableGroup

    override fun bind(viewHolder: GroupieViewHolder, position: Int) {
        super.bind(viewHolder, position)

        // Initial icon state -- not animated.
        viewHolder.icon.apply {
            ...
            setOnClickListener {
                expandableGroup.onToggleExpanded()
                onExpandListener?.invoke(expandableGroup)
                ....
            }
        }

        ....
    }
    ....
}

Then, wherever you create your groups, keep a reference to them. Here, I add a section full of ExpandableGroups:

        val testExpGrpSection = Section().apply {
            val expandableGroups = mutableListOf<ExpandableGroup>()
            for (i in 0..3) {
                val header = ExpandableHeaderItem()
                val group = ExpandableGroup(header)
                // here you would add children to the group
                header.onExpandListener = { toggledGroup ->
                    if (toggledGroup.isExpanded) {
                       // When a group is expanded, collapse all other groups
                        expandableGroups.forEach {
                            if (it != toggledGroup && it.isExpanded) {
                                it.onToggleExpanded()
                            }
                        }
                    }
                }
                expandableGroups.add(group)
                add(group)
            }
        }

This is a quick and dirty implementation but hopefully communicates what I suggest you do.

All 4 comments

What i suggest you do is keep a reference to the list of all ExpandableGroups and whenever you expand one of them call collapse on all others.

What i suggest you do is keep a reference to the list of all ExpandableGroups and whenever you expand one of them call collapse on all others.

can you give an code example?

+1 for the question. I also need a solution)
How properly after expanded 1 group, collapse other groups with ability collapse current expanded group ? Thank you in advance)

@zabochen @vahids28 A quick example ( based on example code).

First off, your header item that controls the expandable group needs to an onExpandListener to communicate when it toggles its group:

class ExpandableHeaderItem : ExpandableItem {

    var onExpandListener: ((ExpandableGroup) -> Unit)? = null

    private lateinit var expandableGroup: ExpandableGroup

    override fun bind(viewHolder: GroupieViewHolder, position: Int) {
        super.bind(viewHolder, position)

        // Initial icon state -- not animated.
        viewHolder.icon.apply {
            ...
            setOnClickListener {
                expandableGroup.onToggleExpanded()
                onExpandListener?.invoke(expandableGroup)
                ....
            }
        }

        ....
    }
    ....
}

Then, wherever you create your groups, keep a reference to them. Here, I add a section full of ExpandableGroups:

        val testExpGrpSection = Section().apply {
            val expandableGroups = mutableListOf<ExpandableGroup>()
            for (i in 0..3) {
                val header = ExpandableHeaderItem()
                val group = ExpandableGroup(header)
                // here you would add children to the group
                header.onExpandListener = { toggledGroup ->
                    if (toggledGroup.isExpanded) {
                       // When a group is expanded, collapse all other groups
                        expandableGroups.forEach {
                            if (it != toggledGroup && it.isExpanded) {
                                it.onToggleExpanded()
                            }
                        }
                    }
                }
                expandableGroups.add(group)
                add(group)
            }
        }

This is a quick and dirty implementation but hopefully communicates what I suggest you do.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

spectrumIG picture spectrumIG  路  5Comments

alvin-nt picture alvin-nt  路  3Comments

rpedretti picture rpedretti  路  3Comments

hardysim picture hardysim  路  3Comments

ValCanBuild picture ValCanBuild  路  6Comments