主页 / 问题 / 1173151
Accepted
ripple
Asked:2020-09-01 23:38:18 +0000 UTC2020-09-01 23:38:18 +0000 UTC

芯片组中的更多按钮

  • 772

有必要做一个“标签云”，我想通过ChipGroup来做。您还需要能够将 ChipGroup 折叠成两行。

例如，如果 ChipGroup 中有很多 Chip 元素，那么当您点击所有 Chips 显示时，您需要使其可以折叠最多两行并将最后一个芯片命名为“更多”。

我怎样才能做到这一点？

<com.google.android.material.chip.ChipGroup
    android:id="@+id/chipGroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

  <!-- Chips can be declared here, or added dynamically. -->

</com.google.android.material.chip.ChipGroup>

ps 如果我理解正确，有人已经在存储库中提出了具有此类功能的拉取请求。我明白，但不是你需要的..

结果应该是这样的

在此处输入图像描述

android

1 个回答

  1. Best Answer

    我按照前面的描述做了——我从完成的 ChipGroup 开始。唯一的缺点是缺乏任何类型的动画。我已经非常习惯 DiffCallback 了。将结果发布在Git上。也许有人可以与 FlowLayout 和某种 DiffCallback 交朋友，那么这将是一个理想的解决方案。（或者自己写shell）

    添加库

    implementation 'com.google.android.material:material:1.2.0'

    您的主题必须继承自Theme.MaterialComponents

    使用新变量声明样式

    <declare-styleable name="ChipGroup">
        <attr name="maxRow" format="reference|integer"/>
        <attr name="additionalChipMore" format="reference|string"/>
        <attr name="additionalChipHide" format="reference|string"/>
        <attr name="additionalChipColor" format="reference|color"/>
        <attr name="additionalChipColorPressed" format="reference|color"/>
        <attr name="additionalTextColor" format="reference|color"/>
        <attr format="dimension" name="lineSpacing"/>
        <attr format="dimension" name="itemSpacing"/>
    </declare-styleable>

    此外，我在 git ExtendedChipGroup.kt上单独发布了一个文件，这里我将尝试简要说明。首先，在构造函数中，我们从样式中获取所有变量，因为有些变量无法取出，虽然我们继承自 ChipGroup，但我们将不得不在某些地方复制代码。或添加到构建

    lintOptions {
    disable 'RestrictedApi'
}

    我走的是第一条路。接下来，我们重写onLayout函数和计算行数的地方，即在rowCount ++的循环中添加了一段代码

    //если строк больше чем maxRow - заменяем последний элемент пред строки на
//"chipMoreTitle/ЕЩЕ (колво оставшихся)"
if (row > maxRow && (i - 1) > 0  && chipMoreTitle.isNotEmpty()) {
                getChildAt(i).visibility = View.GONE
                val showChip = (getChildAt(i - 1) as Chip)
                showChip.chipBackgroundColor = colorStateList
                showChip.setTextColor(chipMoreColorText)
                showChip.text = chipMoreTitle + " (${childCount - i + 1})"
                showChip.isCheckable = false
                showChip.isSelected = false
                //при клике на chipMoreTitle выставляем maxRow на максимум и обновляем элементы
                //после добавляем chipHideTitle
                showChip.setOnClickListener {
                    maxRow = Int.MAX_VALUE
                    setChips(ArrayList(lastChipsList))

                    if (chipHideTitle.isNotEmpty()) {
                        val hideChip = Chip(context)
                        hideChip.chipBackgroundColor = colorStateList
                        hideChip.setTextColor(chipMoreColorText)
                        hideChip.text = chipHideTitle
                        hideChip.isSelected = false
                        hideChip.isCheckable = false
                        //при клике на chipHideTitle выставляем maxRow на заданный и обновляем элементы
                        hideChip.setOnClickListener {
                            maxRow = maxRowDef
                            setChips(ArrayList(lastChipsList))
                        }
                        addView(hideChip)
                    }
                }
            }

    在布局中，我们规定了新的 ChipGroup

    <io.github.tiarait.extendedchipgroup.ExtendedChipGroup
                android:id="@+id/chip_group"
                app:maxRow="2"
                app:itemSpacing="6dp"
                app:additionalTextColor="#eee"
                app:additionalChipColor="@color/colorDarkBtn"
                app:additionalChipColorPressed="@color/colorDarkBtnSecondary"
                app:additionalChipMore="@string/btn_show"
                app:additionalChipHide="@string/btn_hide"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

    在哪里

    maxRow (int) - максимальное количество строк ChipGroup
additionalTextColor (color) - цвет текста дополнительных кнопок
additionalChipColor (color) - цвет фона для доп кнопок (состояние покоя)
additionalChipColorPressed (color) - цвет фона для доп кнопок (при нажатии)
additionalChipMore (string) - заголовок для кнопки ЕЩЕ
additionalChipHide (string) - заголовок для кнопки скрытия

    在此处输入图像描述

    • 6

相关问题