Liên hệ với Bubble EditText

Question 1

Tôi đang cố gắng tạo bong bóng liên hệ MultiAutoCompleteTextViewtương tự như cách nó được triển khai trong ứng dụng Google+. Dưới đây là ảnh chụp màn hình:

Ảnh chụp màn hình bài đăng soạn thảo trên Google+ .

Tôi đã cố gắng mở rộng DynamicDrawableSpanlớp để có được một bản vẽ có thể kéo dài được trong nền của một khoảng văn bản

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;
  }
}

Trường hợp có thể vẽ oval.xml của tôi được xác định như vậy:

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

Trong lớp Hoạt động của tôi có MulitAutoCompleteTextView, tôi đặt khoảng trống bong bóng như vậy:

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

Tuy nhiên, thay vì hình bầu dục hiển thị phía sau 6 ký tự đầu tiên trong chuỗi, các ký tự không hiển thị và không có hình bầu dục có thể vẽ được ở nền.

Nếu tôi thay đổi phương thức getDrawable () của BubbleSpan để sử dụng .png thay vì một hình dạng có thể vẽ:

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

Sau đó, .png sẽ hiển thị nhưng các ký tự trong chuỗi là một phần của khoảng cách sẽ không hiển thị. Làm thế nào tôi có thể làm cho nó để các ký tự trong khoảng được hiển thị ở nền trước, trong khi một hình dạng tùy chỉnh có thể vẽ được hiển thị ở nền?

Tôi cũng đã cố gắng sử dụng một ImageSpanthay vì phân lớp DynamicDrawableSpannhưng không thành công.

Question 2

Cảm ơn @chrish cho tất cả sự giúp đỡ. Vì vậy, đây là cách tôi đã làm nó:

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

}

Question 3

Đây là một giải pháp hoàn chỉnh cho bạn

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

}

Đây là file dự án hoàn chỉnh, nếu có bạn nào muốn sử dụng Spannble

Question 4

Tôi có một thư viện chứa những gì bạn đang tìm kiếm:

Mặc định hoặc hoàn toàn có thể tùy chỉnh (bạn thậm chí có thể sử dụng bố cục của riêng mình)
Hỗ trợ đa tuyến
Nhấp vào người nghe

Có một cái nhìn ở đây

Đây là một bắt đầu nhanh:

Thêm ChipView vào bố cục của bạn hoặc tạo nó theo lập trình:

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

Kết hợp nó với một danh sách dữ liệu mở rộng Chip trừu tượng và trình nghe nhấp chuột (nếu bạn muốn):

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 mặc định được hiển thị như thế này:

Nhưng bạn có thể tùy chỉnh theo ý muốn từ cấp độ tổng thể đến cấp độ Chip:

Đây không phải là MultiAutocomplete nhưng bạn có thể quản lý để bắt chước nó (tôi thực sự đang sử dụng nó như vậy)