问题描述
我已经看到，在android-P中，google添加了包含材料芯片的新材料组件库:
I've seen that in android-P google add new material components library which contains material chips:
因此，我决定将材料输入芯片添加到我的项目中，但是不幸的是没有找到任何教程来实现这一目标.我想创建类似Gmail芯片的内容，但一开始没有图像.
So I decided to add material input chips to my project, but unfortunately didn't find any tutorial how to make that. I want to create something like Gmail chips but without image on the start.
因为我使用的是appcompat库，所以我尝试使用android.support.design.chip.Chip和android.support.design.chip.ChipGroup的材质芯片.但是结果就是没有任何输入字段的筹码.我也尝试创建一个独立的ChipDrawable，然后使用
Because I'm using appcompat library I tried to use material chips by android.support.design.chip.Chip and android.support.design.chip.ChipGroup.But result was just chips without any input field. Also I tried to create a Standalone ChipDrawable and then add it to EditText using
Editable text = editText.getText();
text.setSpan(span, 0, text.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
但是我得到了没有任何芯片的空EditText.那么，如何使用此材料组件库在Gmail中创建筹码输入呢?也许有人有经验或知道任何教程，我可以看到如何创建它?
But I got empty EditText without any chips. So how can I create chips input like in Gmail using this material components library? Maybe someone has expreience or knows any tutorials where I could see how to create this?
提前谢谢！
推荐答案
答案
在Android中没有默认的用于添加芯片的输入字段.他们提到了输入芯片，但我没有找到任何输入芯片的布局或视图组.所以我用Chipdrawable方法在edittext中添加芯片.在这里使用 AppCompatEdittext ，您可以更改为可以监听文本的任意视图输入.参考.
No default input field for adding chips in android. They mentioned input chips but i didn't find any layout or viewgroup for input chips. So i do with Chipdrawable method to add chips in edittext. Here am using AppCompatEdittext you can change to anyview which listening the text inputs.Reference.
第1步
添加芯片xml资源. chip.xml
Add chip xml resource. 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/ChipTextApperance"
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中添加文本外观样式(用于更改textStyle)
Then add textappearance style in style.xml(For change textStyle)
<style name="ChipTextApperance" parent="TextAppearance.MaterialComponents.Chip">
<item name="android:textColor">@android:color/white</item>
</style>
第2步
使用AppCompatEdittext在此处添加视图
Add your view here am using AppCompatEdittext
<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步
将此代码添加到您的视图中以获得所需的行为.
Step 3
Add this code to your view to get the desired behaviour.
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中添加新芯片时，根据您的需要更改chipLength.
输出
已编辑
您可以在此处中找到有关如何使文本居中对齐的更多信息>.
You can find more about how to align center the text with span Here.
在这里，我从解决方案中添加了一些代码，可以为您解决..
Here i added some code from the solution will fix for you..
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类
And change your imagespan class like below
VerticalImageSpan span = new VerticalImageSpan(chip);
这篇关于如何将材料组件库中的芯片添加到android中的输入字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！