android - 如何将 Material Components 库中的芯片添加到 android 中的输入字段？

Question

我已经看到在 android-P 谷歌中添加了包含 Material 芯片的新 Material 组件库:

Material components for android

Material.io chips usage

Material components on GitHub

所以我决定在我的项目中添加 Material 输入芯片，但不幸的是没有找到任何制作教程。我想创建类似 Gmail 芯片的东西，但一开始没有图像。

因为我正在使用 appcompat 库，所以我尝试使用 android.support.design.chip.Chip 和 android.support.design.chip.ChipGroup 的 Material 芯片.但结果只是没有任何输入字段的芯片。我还尝试创建一个独立的 ChipDrawable，然后使用

将其添加到 EditText

Editable text = editText.getText();

text.setSpan(span, 0, text.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

但我得到的是没有任何筹码的空 EditText。那么如何使用这个 Material 组件库创建像在 Gmail 中一样的筹码输入呢？也许有人有经验或知道我可以看到如何创建它的任何教程？

提前致谢!

Answer 1

回答

在 android 中没有用于添加筹码的默认输入字段。他们提到了输入芯片，但我没有找到输入芯片的任何布局或 View 组。所以我使用 Chipdrawable 方法在 edittext 中添加筹码。我在这里使用 AppCompatEdittext您可以更改为收听文本输入的任何 View 。 Reference .

第一步

添加芯片xml资源。 芯片.xml

res -> xml -> chip.xml

<?xml version="1.0" encoding="utf-8"?>
<chip xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:textAppearance="@style/ChipTextAppearance"
 app:chipBackgroundColor="@color/colorAccent"
 app:chipIcon="@drawable/ic_call_white_24dp"
 app:closeIconEnabled="true"  <!--property for close icon if no need set to false. -->
 app:closeIconTint="@android:color/white" />

然后在style.xml中添加textappearance样式(用于改变textStyle)

<style name="ChipTextAppearance" parent="TextAppearance.MaterialComponents.Chip">
    <item name="android:textColor">@android:color/white</item>
</style>

第 2 步

在此处使用 AppCompatEdittext 添加您的 View

  <android.support.v7.widget.AppCompatEditText
    android:id="@+id/phone"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tvt_Contact" />

第 3 步
将此代码添加到您的 View 以获得所需的行为。

 private int SpannedLength = 0,chipLength = 4;

 AppCompatEditText Phone = findViewById(R.id.phone);

 Phone.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
            if (charSequence.length() == SpannedLength - chipLength)
            {
                SpannedLength = charSequence.length();
            }
        }

        @Override
        public void afterTextChanged(Editable editable) {

            if(editable.length() - SpannedLength == chipLength) {
                ChipDrawable chip = ChipDrawable.createFromResource(getContext(), R.xml.chip);
                chip.setChipText(editable.subSequence(SpannedLength,editable.length()));
                chip.setBounds(0, 0, chip.getIntrinsicWidth(), chip.getIntrinsicHeight());
                ImageSpan span = new ImageSpan(chip);
                editable.setSpan(span, SpannedLength, editable.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                SpannedLength = editable.length();
            }

        }
    });

当需要在edittext中添加新的chip时，根据需要更改chipLength。

输出

已编辑

您可以找到有关如何将文本与 span Here 居中对齐的更多信息.

我在这里添加了一些代码，解决方案将为您修复..

public class VerticalImageSpan extends ImageSpan {

public VerticalImageSpan(Drawable drawable) {
    super(drawable);
}

@Override
public int getSize(@NonNull Paint paint, CharSequence text, int start, int end,
                   Paint.FontMetricsInt fontMetricsInt) {
    Drawable drawable = getDrawable();
    Rect rect = drawable.getBounds();
    if (fontMetricsInt != null) {
        Paint.FontMetricsInt fmPaint = paint.getFontMetricsInt();
        int fontHeight = fmPaint.descent - fmPaint.ascent;
        int drHeight = rect.bottom - rect.top;
        int centerY = fmPaint.ascent + fontHeight / 2;

        fontMetricsInt.ascent = centerY - drHeight / 2;
        fontMetricsInt.top = fontMetricsInt.ascent;
        fontMetricsInt.bottom = centerY + drHeight / 2;
        fontMetricsInt.descent = fontMetricsInt.bottom;
    }
    return rect.right;
}

@Override
public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end,
                 float x, int top, int y, int bottom, @NonNull Paint paint) {

    Drawable drawable = getDrawable();
    canvas.save();
    Paint.FontMetricsInt fmPaint = paint.getFontMetricsInt();
    int fontHeight = fmPaint.descent - fmPaint.ascent;
    int centerY = y + fmPaint.descent - fontHeight / 2;
    int transY = centerY - (drawable.getBounds().bottom - drawable.getBounds().top) / 2;
    canvas.translate(x, transY);
    drawable.draw(canvas);
    canvas.restore();
}

}

然后像下面这样更改您的 imagespan 类

VerticalImageSpan span = new VerticalImageSpan(chip);