Чипы Android занимают лишние пробелы; невозможно обернуть

Я использую чипгруппу с динамическими чипами. Я хочу, чтобы фишки были обернуты по ширине в соответствии с их текстом. Но это занимает дополнительные пробелы даже без заполнения.

Ниже мой код:

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'

Вот что я вижу:

скриншот, чип-группа

Я хочу, чтобы чип использовал как можно минимальную ширину в соответствии с его текстом.




Ответы (5)


Вы должны правильно настроить отступы для чипа, попробуйте следующее:

chip.setChipStartPadding(0);
chip.setChipEndPadding(0);
person JiajiaGu    schedule 23.05.2019
comment
Это уменьшает пространство, но все еще остается место, и мой атрибут гравитации не работает. У него есть место сверху, даже после того, как я перепробовал множество атрибутов гравитации! - person adi; 23.05.2019
comment
Я увеличил высоту своего чипа, и теперь с гравитацией все в порядке, но слева и справа появилось больше места ... любые входные данные на них !! - person adi; 23.05.2019
comment
Добавьте setTextStartPadding(0) и setTextEndPadding(0), чтобы увидеть, будет ли это лучше соответствовать вашим потребностям. - person JiajiaGu; 23.05.2019
comment
спасибо, но лишний пробел сейчас есть только справа для некоторых текстов, несмотря на обрезку строк! - person adi; 23.05.2019
comment
если вы не возражаете, не могли бы вы взглянуть на этот пост в ответе Саджита: " title="androidunable сделать многострочную группу микросхем"> stackoverflow.com/questions/56244817/ - person adi; 23.05.2019
comment
Это не совсем правильно. Дело не в этой прокладке. Проверьте мой ответ: вы можете проверить, как работает отступ внутри чипа. - person Gabriele Mariotti; 05.10.2019

Для чипов это не (внутреннее) «заполнение», а (внешнее) «расстояние»:

  • app:chipSpacing  —  Добавляет расстояние как по горизонтальной, так и по вертикальной оси.
  • app:chipSpacingHorizontal  —  Добавляет интервал по горизонтальной оси.
  • app:chipSpacingVertical  —  Добавляет интервал по вертикальной оси.

наименьший интервал с переносом строк будет:

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

в качестве альтернативы, оберните ChipGroup в HorizontalScrollView с app:singleLine="true".

person Martin Zeitler    schedule 23.05.2019

Вероятно, простое удаление chip.setTextSize() может помочь вам избавиться от пробела справа (однако мне все еще интересно, как изменить размер шрифта). Если нет, это решение, которое я использую в своем проекте:

  1. Определите стиль для ваших фишек:
    <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>
  1. Создайте файл ресурсов макета с корневым элементом 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>
  1. В коде создавайте свои фишки не с помощью Chip chip = new Chip(this);, а путем расширения только что созданного макета чипа:
    Chip chip = (Chip) LayoutInflater.from(chipGroup.getContext()).inflate(R.layout.chip_in_list, chipGroup, false);
  1. Не вызывайте chip.setTextSize() для только что созданного чипа.
person Oleh Romanenko    schedule 07.08.2019

Просто удалите в своем коде эту строку

//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.setChipBackgroundColor(getResources().getColorStateList(R.color.colorChip)); используйте метод chip.setChipBackgroundColorResource(R.color.colorChip)

person Gabriele Mariotti    schedule 05.10.2019
comment
как убрать вертикальную прокладку? - person Ade Dyas; 24.02.2021

прежде всего создайте свой атрибут (values/attrs.xml):

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

после этого добавьте в свою тему пример R.attr.CustomChipChoiceStyle для вашей темы (values/styles.xml):

<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>

если у вас есть ChipGroup, как это:

    <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)
        }

вот и все.

введите здесь описание изображения

person Alex Zaraos    schedule 06.01.2021