Android芯片占用额外空间；无法换行。

Question

Android芯片占用额外空间；无法换行。

androidandroid-layoutmaterial-components-androidmaterial-componentsandroid-chips

6

我是一个有用的助手，可以翻译文本。

我使用带有动态芯片的芯片组。我希望芯片根据它们的文本自动换行。但即使没有填充，它也会占用额外的空间。

以下是我的代码：

xml:

<com.google.android.material.chip.ChipGroup
    android:id="@+id/cg"
    android:layout_width="0dp"
    android:layout_weight="75"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:layout_marginBottom="5dp"
    android:textColor="@android:color/black"
    android:textStyle="bold"
    android:textSize="12sp"
    app:singleSelection="false"
    app:chipSpacingVertical="5dp"
    app:chipSpacingHorizontal="5dp"
    app:singleLine="false"
    app:chipSpacing="2dp">

这是动态添加芯片的方法：

for(int i=0;i<cartoonTypes.length;i++){
    chip = new Chip(this);
    chip.setText(cartoonTypes[i].trim());
    chip.setTextColor(Color.WHITE);
    chip.setChipBackgroundColor(getResources().getColorStateList(R.color.colorChip));
    chip.setTextSize(12);
    chip.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL);
    chip.setPadding(0,0,0,0);
    cgMovieGenre.addView(chip);
    ChipGroup.LayoutParams layoutParams = (ChipGroup.LayoutParams) chip.getLayoutParams();;
    int dpSize = px2dp(12);;
    layoutParams.height = dpSize;
    layoutParams.width = ChipGroup.LayoutParams.WRAP_CONTENT;
    chip.setLayoutParams(layoutParams);
}

方法px2dp的作用是：

int px2dp(int px){
    metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    int h = (px * metrics.densityDpi) / DisplayMetrics.DENSITY_DEFAULT;
    return h;
}

我的 `build.gradle` 文件有以下依赖项：

implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'androidx.appcompat:appcompat:1.0.0-beta01'
implementation 'androidx.cardview:cardview:1.0.0-beta01'
implementation 'com.google.android.material:material:1.0.0-beta01'

这是我看到的内容：

我想让芯片根据其文本使用尽可能少的宽度。

- adi

8个回答

5

只需在您的代码中删除此行

//chip.setPadding(0,0,0,0);

结果有和没有填充的区别：

为了理解 Chip 内部的填充：

 * <pre>
 *   chipStartPadding     iconEndPadding     closeIconStartPadding         chipEndPadding
 *    +                    +                                    +                      +
 *    |                    |                                    |                      |
 *    |  iconStartPadding  |  textStartPadding   textEndPadding | closeIconEndPadding  |
 *    |   +                |    +                            +  |                  +   |
 *    |   |                |    |                            |  |                  |   |
 *    v   v                v    v                            v  v                  v   v
 * +-----+----+-----------+----+----+---------------------+----+----+----------+----+-----+
 * |     |    |       XX  |    |    |  XX   X  X  X  XXX  |    |    | X      X |    |     |
 * |     |    |      XX   |    |    | X  X  X  X  X  X  X |    |    |  XX  XX  |    |     |
 * |     |    |  XX XX    |    |    | X     XXXX  X  XXX  |    |    |    XX    |    |     |
 * |     |    |   XXX     |    |    | X  X  X  X  X  X    |    |    |  XX  XX  |    |     |
 * |     |    |    X      |    |    |  XX   X  X  X  X    |    |    | X      X |    |     |
 * +-----+----+-----------+----+----+---------------------+----+----+----------+----+-----+
 *                  ^                           ^                         ^
 *                  |                           |                         |
 *                  +                           +                         +
 *             chipIconSize                  *dynamic*              closeIconSize
 * </pre>

还有一些注意事项：

由于芯片文本必须垂直居中且左对齐，因此chip.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL);不起作用。
芯片使用内置的setGravity(Gravity.CENTER_VERTICAL | Gravity.START);
使用chip.setChipBackgroundColorResource(R.color.colorChip)方法代替chip.setChipBackgroundColor(getResources().getColorStateList(R.color.colorChip));

- Gabriele Mariotti

如何去除垂直填充？ - Ade Dyas

1

这太棒了！在我的情况下，我没有设置textStartPadding。 - dianakarenms

3

也许只需删除chip.setTextSize()就可以帮助您去掉右侧的空间（但我仍在思考如何更改字体大小）。

如果不行，这是我在项目中使用的解决方案：

为您的芯片定义一个样式：

    <style name="ListChip" parent="Widget.MaterialComponents.Chip.Entry" >
        <style name="ListChip" parent="Widget.MaterialComponents.Chip.Entry" >
        <item name="rippleColor">@null</item>
        <item name="closeIcon">@null</item>
        <item name="chipBackgroundColor">?attr/background_highlight_color</item>
        <item name="android:checkable">false</item>
        <item name="android:textSize">8sp</item> //This has not effect
        <item name="android:textColor">?attr/text_color</item>
    </style>

创建一个布局资源文件，根元素为com.google.android.material.chip.Chip，并应用新创建的样式：

    <?xml version="1.0" encoding="utf-8"?>
     <com.google.android.material.chip.Chip
        style="@style/ListChip"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:ellipsize="end">
     </com.google.android.material.chip.Chip>

在代码中，创建您的芯片时不要使用 Chip chip = new Chip(this);，而是通过填充新创建的芯片布局来创建：

    Chip chip = (Chip) LayoutInflater.from(chipGroup.getContext()).inflate(R.layout.chip_in_list, chipGroup, false);

不要在新创建的芯片上调用 chip.setTextSize()。

- Oleh Romanenko

3

对于芯片（chip）来说，“padding”不是内部的，而是外部的“spacing”（间距）：

app:chipSpacing — 添加水平和垂直轴的间距。
app:chipSpacingHorizontal — 添加水平轴的间距。
app:chipSpacingVertical — 添加垂直轴的间距。

换行时最小间距为：

app:singleLine="false"
app:chipSpacing="0dp"

或者，您可以将ChipGroup放在具有app:singleLine="true"属性的HorizontalScrollView中。

- Martin Zeitler

1

我正在以编程方式创建芯片，因此我必须在Kotlin中执行此操作：

chip.minimumWidth = 0
chip.setEnsureMinTouchTargetSize(false)

- Zohab Ali

0

在新的<com.google.android.material.chip.Chip中，有一个名为app:chipMinTouchTargetSize的属性。这将消除额外的空间。

app:chipMinHeight="20dp"
app:chipMinTouchTargetSize="22dp"

- Narendra_Nath

0

那个额外的空格是表示关闭图标的，只需设置这个。

val chip = Chip(this)
chip.closeIcon = null

- Rishabh Shukla

-1

首先，创建你的属性（values/attrs.xml）：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ChipView">
        <attr name="CustomChipStyle" format="reference"/>
    </declare-styleable>
</resources>

然后将其添加到您的主题中，在您的主题（values/styles.xml）中设置R.attr.CustomChipChoiceStyle，例如：

<style name="APPTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColor</item>
    <item name="colorAccent">@color/secondaryColor</item>
    <item name="CustomChipChoiceStyle">@style/ChipTextAppearance</item>
</style>

    <style name="ChipTextAppearance" parent="@style/Widget.MaterialComponents.Chip.Choice">
        <item name="android:minWidth">130dp</item>
        <item name="chipMinHeight">50dp</item>
<item name="android:textAlignment">center</item>
    </style>

如果您有一个像这样的芯片组：

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

你可以从代码中添加类似这样的内容：

val list = listOf("credit", "cash")
list.forEach{
            val chip = Chip(context, null, R.attr.CustomChipStyle).apply {
                text = it
            }
            chipGroup.addView(chip)
        }

就是这样。

- Alex Zaraos

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JiajiaGu · Accepted Answer

7

您应该正确设置芯片的填充，尝试这样做：

chip.setChipStartPadding(0);
chip.setChipEndPadding(0);

- JiajiaGu

1

它减少了空间，但仍有一些空间，我的重力属性不起作用。尝试了许多重力属性后，它仍然在顶部有一些空间！ - adi

我增加了芯片的高度，现在重力没问题了，但左右两侧还有一些空间..你们有什么建议吗!! - adi

添加setTextStartPadding(0)和setTextEndPadding(0)以查看是否更符合您的需求。 - JiajiaGu

谢谢，但是尽管修剪了字符串，某些文本现在仅右侧有多余空格！ - adi

如果您不介意的话，可以看一下Sajith的回答中提到的这篇文章：https://dev59.com/0LTma4cB1Zd3GeqPzgT_#56245456?noredirect=1#comment99143166_56245456 - adi

这并不完全正确。问题不在于这个填充。请看我的答案：您可以查看芯片内部填充的工作方式。 - Gabriele Mariotti