【问题标题】:Android how to center align chips in chipgroup?Android如何居中对齐芯片组中的芯片?
【发布时间】:2018-12-14 10:28:42
【问题描述】:

我在 XML 文件中为 ChipGroup 尝试了 gravity="center"foregroundGravity="center"textAlignment="center",但它不起作用。有任何想法吗?

【问题讨论】:

  • 嗨 M_droid,我能知道如何解决这个问题,我也在使用 ChipGroup,芯片需要在中心对齐,请帮助我。
  • 你的代码在哪里?你试过什么,哪个图书馆?请填写所有详细信息。
  • 你解决了吗?
  • 抱歉,还没有机会测试其中一个答案。那时我们停止使用芯片,几个月后这个项目还是被取消了。
  • android:textAlignment="center" 正在工作

标签: android android-layout android-chips


【解决方案1】:

我尝试在 Flexbox 中使用 Chip,它的工作原理是这样的。

<com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        app:flexWrap="wrap"
        app:justifyContent="center"> ... </com.google.android.flexbox.FlexboxLayout>

应该有更好的方法来实现这一点,但我猜这会在那里工作。

更新(2021 年):由于稳定性和缺乏来自 Google 的更新,我删除了 flexbox 依赖项,并且现在使用 ConstraintLayout 的 Flow 实现了相同的效果,任何使用该技术的人也许也可以考虑这一点,看看 https://*.com/a/61545990 到以编程方式填充它。

【讨论】:

  • 感谢您的解决方案!
  • 我终于有时间检查你的答案并且它有效。但是不使用 flexbox 的解决方案会更好。无论如何,现在我会接受你的。
【解决方案2】:

如果您的 ChipGroup 包含在 ConstraintLayout 中,请使用

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"

这样:

<com.google.android.material.chip.ChipGroup
        android:id="@+id/chips"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
...

请务必不要将layout_width 字段设置为match_parent,因为那样不行。

【讨论】:

    【解决方案3】:

    将其放入 LinearLayout 并使其重力“center_horizo​​ntal”。然后将芯片组的 layout_width 设置为“wrap_content”。这对我有用。

        <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:gravity="center_horizontal">
    
    
                    <com.google.android.material.chip.ChipGroup
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/langsChipGroup"
                        >
    
                    </com.google.android.material.chip.ChipGroup>
    
    </LinearLayout>
    

    【讨论】:

      【解决方案4】:

      这个库可以帮助你找出你的查询。请检查一下。让我知道你的想法。

      ChipCloud 库最初是由 fiskurgit 为一些更大的黑客马拉松项目(非常)快速构建的 Android 视图。它创建了材料“芯片”的包裹云。 Play Store 上提供了他们版本的基本演示 - 我正在维护这个 fork 以获得我需要的功能。

      Chip Cloud View

      【讨论】:

      • 只需复制粘贴他们的库描述。你应该用链接举例。
      • 是的@PratikButani,您可以在库中查看示例。
      • 如果他们删除示例或删除此链接怎么办?这就是为什么总是把代码和例子放在一起,这样每个人都能理解。
      【解决方案5】:

      我写这篇文章是为了帮助别人。我有一个类似的问题。但我有一个单行。我用下面的形式解决了这个问题

      <androidx.constraintlayout.widget.ConstraintLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
          <HorizontalScrollView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:scrollbars="none"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintStart_toStartOf="parent">
      
              <com.google.android.material.chip.ChipGroup
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:paddingStart="@dimen/padding"
                  android:paddingEnd="@dimen/padding"
                  app:singleLine="true">
      
                  <com.google.android.material.chip.Chip
                      style="@style/Widget.MaterialComponents.Chip.Entry"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"/>
      
                  <com.google.android.material.chip.Chip
                      style="@style/Widget.MaterialComponents.Chip.Entry"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"/>
      
      //          ...
      
               </com.google.android.material.chip.ChipGroup>
           </HorizontalScrollView>
      </androidx.constraintlayout.widget.ConstraintLayout>
      

      如果我帮助了某人,我很高兴。

      【讨论】:

        【解决方案6】:

        将芯片组的宽度放入wrap_content,并使父视图重力到包含芯片组的center。这样它就会居中对齐。

        【讨论】:

          【解决方案7】:

          请尝试以下操作:

          layout_gravity="center"
          

          希望这会对你有所帮助。

          【讨论】: