联系人气泡EditText


89

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

Google+撰写帖子截图

我试图扩展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;
  }
}

我的卵形.xml可绘制对象的定义如下:

<?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>

在具有的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); 

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

如果我将BubbleSpan的getDrawable()方法更改为使用.png而不是shape drawable:

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

然后,将显示.png,但不会显示字符串中属于跨度的字符。如何使跨度中的字符显示在前景中,同时在背景中显示自定义形状的可绘制对象?

我试图也使用ImageSpan而不是子类化,DynamicDrawableSpan但是没有成功。



您如何获取选定的联系电话
srihari

Answers:


55

感谢@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);

}

13
我发现由于缩放问题,这并非在所有设备上都有效。更好的方法是从convertView返回位图,然后在设置可绘制边缘时使用实际位图的尺寸。例如,BitmapDrawable bd = new BitmapDrawable(bitmap); bd.setBounds(0,0,bitmap.getWidth(), bitmap.getHeight()); 它适用于所有设备。
dmon 2012年

嗨,我可能需要在一个新问题中发布此消息,但想知道您是否在多行TextViews中遇到问题。我在Android 3.2和“有时”上运行此程序,看起来气泡的宽度计算得不好。如文本中将不会继续到下一行,而是继续在TextView之外。如果您看到了此提示,有什么建议吗?
Johann Hilbold 2012年

1
如果带有气泡的文本的自动完成度比气泡宽,则在两行中创建两次。您可以将其设置为textView:textView.setMaxWidth(this.getWidth()-SOME_PADDING);`我也正在使用它(如果文本太大,则在气泡的两行中以...结尾) textView.setEllipsize(TruncateAt.END); textView.setSingleLine(false); textView.setMaxLines(2);
SocialError

您可以从下拉列表中进行选择,效果很好。如果您要为edittext设置一些预定义的值,那么,我该如何用边框n十字按钮包装该文本?
Braj 2013年

5
如何将clicklistener添加到textview中的其他项目以删除文本。
南比

21

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

//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);

}

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


1
谢谢...您的解决方案工作正常,但我的问题是当我按添加按钮时,气泡文本已添加到编辑文本中,但是当我清除编辑文本并尝试重新输入(按添加按钮)时,先前添加的气泡仍然存在,新的也被添加。当我按右边的十字标志时,我也去除了气泡。
Govind Rathod 2012年

解决第一个问题。我想您已将文本存储在列表中,并且在清除“编辑文本”时没有清除。我可能不会怀特,这只是一个猜测,因为我不知道您的编码方式。
克里希纳·什雷斯塔

我知道它是一个旧帖子,但是我需要回答我的问题。.我正在构建与上图所示的应用程序相同。.im使用MultiAutoCompleteTextView作为建议,然后在单击该项目时创建了气泡。我的问题是我不希望光标出现在两个气泡之间...我在使用MultiAutoCompleteTextView的空间标记器。
VijayRaj

@chrish感谢您提供此代码,不过我还有一个问题。我遇到的情况是已经有了一些值,因此我会将它们作为可扩展文本直接粘贴到编辑文本中。但是,现在我只是想知道是否可以将跨项目的代码与这种功能结合在一起。我想具有在运行时添加删除名称的功能,添加可能会
成堆

5

我有一个图书馆,可以满足您的需求:

  • 默认或完全可自定义(您甚至可以使用自己的布局)
  • 多线支持
  • 点击监听器

在这里看看

这里是一个快速入门:

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

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

用扩展抽象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 !
        }
    });

默认的ChipView呈现如下:

默认ChipView

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

整体ChipView 定制ChipView

这不是MultiAutocomplete,但是您可以模仿它(我实际上是在使用它)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.