Android 联系泡泡 EditText

Contact Bubble EditText

提问by toobsco42

I am trying to create contact bubbles in the MultiAutoCompleteTextViewsimiliar to how it is implemented in the Google+ app. Below is a screen shot:

我正在尝试以MultiAutoCompleteTextView类似于在 Google+ 应用中实现的方式创建联系人气泡。下面是一个屏幕截图：

.

.

I have tried to extend the DynamicDrawableSpanclass in order to get a spannable drawable in the background of a span of text

我试图扩展DynamicDrawableSpan该类，以便在一段文本的背景中获得一个可绘制的可绘制对象

public class BubbleSpan extends DynamicDrawableSpan {
  private Context c;

  public BubbleSpan(Context context) {
    super();
    c = context;
  }

  @Override
  public Drawable getDrawable() {
    Resources res = c.getResources();
    Drawable d = res.getDrawable(R.drawable.oval);
    d.setBounds(0, 0, 100, 20);
    return d;
  }
}

Where my oval.xml drawable is defined as so:

我的oval.xml drawable 定义如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <solid android:color="#352765"/>
  <padding android:left="7dp" android:top="7dp"
    android:right="7dp" android:bottom="7dp" />
  <corners android:radius="6dp" />
</shape>

In my Activity class that has the MulitAutoCompleteTextView, I set the bubble span like so:

在具有 的 Activity 类中MulitAutoCompleteTextView，我像这样设置气泡跨度：

final Editable e = tv.getEditableText();
final SpannableStringBuilder sb = new SpannableStringBuilder();
sb.append("some sample text");
sb.setSpan(new BubbleSpan(getApplicationContext()), 0, 6, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
e.append(sb); 

However, instead of the oval shape displaying behind the first 6 characters in the string, the characters are not visible and there is no oval drawable in the background.

但是，不是在字符串的前 6 个字符后面显示椭圆形状，而是字符不可见，并且背景中没有可绘制的椭圆。

If i change the BubbleSpan's getDrawable() method to use a .png instead of a shape drawable:

如果我将 BubbleSpan 的 getDrawable() 方法更改为使用 .png 而不是可绘制形状：

public Drawable getDrawable() {
  Resources res = c.getResources();
  Drawable d = res.getDrawable(android.R.drawable.bottom_bar);
  d.setBounds(0, 0, 100, 20);
  return d;
}

Then the .png will show up but the characters in the string that are a part of the span will not show up. How can I make it so that the characters in the span are displayed in the foreground, meanwhile a custom shape drawable gets displayed in the background?

然后 .png 将显示，但字符串中作为跨度一部分的字符将不会显示。如何使跨度中的字符显示在前景中，同时自定义形状可绘制对象显示在背景中？

I attempted to also use an ImageSpaninstead of subclassing DynamicDrawableSpanbut was unsuccessful.

我也尝试使用 anImageSpan而不是子类化，DynamicDrawableSpan但没有成功。

采纳答案by toobsco42

Thanks @chrish for all the help. So here is how i did it:

感谢@chrish 的所有帮助。所以这里是我是如何做到的：

final SpannableStringBuilder sb = new SpannableStringBuilder();
TextView tv = createContactTextView(contactName);
BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv);
bd.setBounds(0, 0, bd.getIntrinsicWidth(),bd.getIntrinsicHeight());

sb.append(contactName + ",");
sb.setSpan(new ImageSpan(bd), sb.length()-(contactName.length()+1), sb.length()-1,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
to_input.setText(sb);

public TextView createContactTextView(String text){
  //creating textview dynamically
  TextView tv = new TextView(this);
  tv.setText(text);
  tv.setTextSize(20);
  tv.setBackgroundResource(R.drawable.oval);
  tv.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ic_clear_search_api_holo_light, 0);
  return tv;
}

public static Object convertViewToDrawable(View view) {
  int spec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
  view.measure(spec, spec);
  view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
  Bitmap b = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(),
            Bitmap.Config.ARGB_8888);
  Canvas c = new Canvas(b);
  c.translate(-view.getScrollX(), -view.getScrollY());
  view.draw(c);
  view.setDrawingCacheEnabled(true);
  Bitmap cacheBmp = view.getDrawingCache();
  Bitmap viewBmp = cacheBmp.copy(Bitmap.Config.ARGB_8888, true);
  view.destroyDrawingCache();
  return new BitmapDrawable(viewBmp);

}

回答by Krishna Shrestha

Here is a complete Solution for you

这是为您提供的完整解决方案

//creating textview dynamicalyy
TextView textView=new TextView(context);
textview.setText("Lauren amos");
textview.setbackgroundResource(r.color.urovalshape);
textView.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.icon_cross, 0);


BitmapDrawable dd = (BitmapDrawable) SmsUtil.getDrawableFromTExtView(textView);
edittext.settext(addSmily(dd));

//convert image to spannableString
public SpannableStringBuilder addSmily(Drawable dd) {
 dd.setBounds(0, 0, dd.getIntrinsicWidth(),dd.getIntrinsicHeight());
SpannableStringBuilder builder = new SpannableStringBuilder();
builder.append(":-)");
builder.setSpan(new ImageSpan(dd), builder.length() - ":-)".length(),builder.length(),Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

return builder;
}

  //convert view to drawable
  public static Object getDrawableFromTExtView(View view) {

    int spec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
    view.measure(spec, spec);
    view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
    Bitmap b = Bitmap.createBitmap(view.getWidth(), view.getHeight(),
            Bitmap.Config.ARGB_8888);
    Canvas c = new Canvas(b);
    c.translate(-view.getScrollX(), -view.getScrollY());
    view.draw(c);
    view.setDrawingCacheEnabled(true);
    Bitmap cacheBmp = view.getDrawingCache();
    Bitmap viewBmp = cacheBmp.copy(Bitmap.Config.ARGB_8888, true);
    view.destroyDrawingCache();
    return new BitmapDrawable(viewBmp);

}

Here is the complete project file ,if any of you want to use Spannble

这是完整的项目文件，如果您想使用 Spannble

回答by Plumillon Forge

I got a library which does what you're looking for with :

我有一个库可以满足您的需求：

• Default or fully customizable (you can even use your own layout)
• Multiline support
• Click listener

• 默认或完全可定制（您甚至可以使用自己的布局）
• 多线支持
• 单击侦听器

Have a look here

看看这里

Here a quickstart :

这是一个快速入门：

Add ChipView to your layout or create it programmatically :

将 ChipView 添加到您的布局或以编程方式创建它：

<com.plumillonforge.android.chipview.ChipView
    android:id="@+id/chipview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Init it with a list of data which extend abstract Chip and a click listener (if you want) :

使用扩展抽象 Chip 和单击侦听器的数据列表初始化它（如果需要）：

List<Chip> chipList = new ArrayList<>();
chipList.add(new Tag("Lorem"));
chipList.add(new Tag("Ipsum dolor"));
chipList.add(new Tag("Sit amet"));
chipList.add(new Tag("Consectetur"));
chipList.add(new Tag("adipiscing elit"));
ChipView chipDefault = (ChipView) findViewById(R.id.chipview);
chipDefault.setChipList(chipList);
chipDefault.setOnChipClickListener(new OnChipClickListener() {
        @Override
        public void onChipClick(Chip chip) {
            // Action here !
        }
    });

Default ChipView is rendered like this :

默认 ChipView 呈现如下：

But you can customise as you like from overall to Chip level :

但是您可以根据需要从整体到芯片级别进行自定义：

This isn't a MultiAutocomplete but you can manage to mimic it (I'm actually using it like that)

这不是 MultiAutocomplete，但您可以设法模仿它（我实际上是这样使用它的）