如何将材料组件库中的芯片添加到android中的输入字段? [英] How to add chips from Material Components library to input field in android?
问题描述
我已经看到，在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
res-> xml-> chip.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/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中的输入字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
