Android-P では、Google がマテリアル チップを含む新しいマテリアル コンポーネント ライブラリを追加していることがわかりました。
そこで、プロジェクトにマテリアル入力チップを追加することにしましたが、残念ながらその作成方法に関するチュートリアルは見つかりませんでした。Gmail チップのようなものを作成したいのですが、最初は画像がありません。
私はappcompatライブラリを使用しているので、マテリアルチップを と で使用しようとしましたandroid.support.design.chip.Chip。しかし、結果は入力フィールドのないチップだけでした。また、スタンドアロンのChipDrawableを作成し、それを に追加android.support.design.chip.ChipGroupしようとしました。EditText
Editable text = editText.getText();
text.setSpan(span, 0, text.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
しかし、チップのない空の EditText が表示されました。このマテリアル コンポーネント ライブラリを使用して、Gmail のようなチップ入力を作成するにはどうすればよいでしょうか? 誰か経験があるか、これを作成する方法を確認できるチュートリアルを知っていますか?
前もって感謝します！
ベストアンサー1
答え
Androidにチップを追加するためのデフォルトの入力フィールドがありません。入力チップについて言及されていますが、入力チップのレイアウトやビューグループは見つかりませんでした。そこで、Chipdrawableedittextにチップを追加する方法を使用します。ここでは、AppCompatEdittextテキスト入力をリッスンする任意のビューに変更できます。参照。
ステップ1
チップ 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 を使用しています。
<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
目的の動作を得るには、このコードをビューに追加します。
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();
}
}
});
編集テキストに新しいチップを追加する必要がある場合は、必要に応じて chipLength を変更します。
出力
編集済み
spanを使用してテキストを中央揃えにする方法の詳細については、ここ。
ここで、解決策からいくつかのコードを追加しました。これで問題は解決します。
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);