Bubble EditText에 문의


89

MultiAutoCompleteTextViewGoogle+ 앱에서 구현되는 것과 유사한 방식으로 연락처 풍선을 만들려고합니다 . 아래는 스크린 샷입니다.

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

내 oval.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 자 뒤에 타원형 모양이 표시되는 대신 문자가 표시되지 않고 배경에 타원형 드로어 블이 없습니다.

모양 드로어 블 대신 .png를 사용하도록 BubbleSpan의 getDrawable () 메서드를 변경하면 :

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했지만 실패했습니다.



당신은 연락 전화 번호를 선택하기 방법
스리 하리

github.com/splitwise/TokenAutoComplete은 어떤 사람에게 도움이 될 수있는
존 - salib

답변:


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

안녕하세요, 나는 이것을 새로운 질문에 게시해야 할 수도 있지만 여러 줄 TextViews에 문제가 있는지 알고 싶었습니다. 나는 이것을 안드로이드 3.2에서 "때때로"실행하고 있는데, 거품의 너비가 잘 계산되지 않은 것 같습니다. 텍스트에서와 같이 다음 줄로 계속되지 않고 대신 TextView 외부에서 계속됩니다. 이것을 본 적이 있다면, 어떤 조언이 있습니까?
Johann Hilbold

1
풍선이있는 텍스트가 더 넓 으면 풍선보다 자동 완성이 두 행에 두 번 생성됩니다. 당신은 이것을 textView : textView.setMaxWidth (this.getWidth ()-SOME_PADDING);`로 설정하고 있습니다. textView.setEllipsize (TruncateAt.END); textView.setSingleLine (false); textView.setMaxLines (2);
SocialError

이것은 드롭 다운 목록에서 선택하면 잘 작동합니다. 경우에 대비하여 미리 정의 된 값을 edittext로 설정하려면 어떻게 해당 텍스트를 테두리 n 십자 버튼으로 래핑 할 수 있습니까?
Braj

5
textview의 다른 항목에 clicklistener를 추가하여 텍스트를 삭제하는 방법.
Nambi 2013

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
감사합니다 ... 당신의 솔루션은 잘 작동하지만 내 문제는 내가 ADD 버튼을 눌렀을 때 거품 텍스트가 편집 텍스트에 추가되지만 편집 텍스트를 지우고 다시 입력하려고 할 때 (추가 버튼을 누름) 이전에 추가 된 거품이 남아 있고 새로운 것도 추가됩니다. 그리고 오른쪽 십자 표시를 누르면 거품이 제거됩니다.
Govind Rathod

첫 번째 문제 해결. 목록에 텍스트를 저장하고 텍스트 편집을 지우는 동안 지우지 않은 것 같습니다. 나는 당신이 코딩하는 방법을 몰라서 단지 추측 일뿐입니다.
Krishna Shrestha

나는 그것의 오래된 게시물을 알고 있지만 내 질문에 대한 대답이 필요합니다 .. 제안에 대해 MultiAutoCompleteTextView를 사용하여 위에 표시된 것과 동일한 응용 프로그램을 구축하고 있습니다. 항목을 클릭하면 거품을 만듭니다. 내 문제는 커서가 두 거품 사이에 나타나기를 원하지 않는다는 것입니다.
VijayRaj

@chrish이 코드에 감사드립니다. 그럼에도 불구하고 한 가지 질문이 있습니다. 이미 몇 가지 값을 가지고있는 상황이 있는데이를 편집 텍스트에 확장 가능한 텍스트로 직접 붙여 넣을 것입니다. 그러나 이제는 확장 가능한 프로젝트의 코드를 이러한 종류의 기능과 결합 할 수 있는지 궁금합니다. 나는 런타임에 삭제 이름을 추가 할 수있는 기능을 원합니다. 추가는 무리없이 일어날 수 있지만 삭제는 평소와 같습니다 (하나씩) .. 감사합니다
kuldeep

5

나는 당신이 찾고있는 것을 수행하는 라이브러리를 가지고 있습니다.

  • 기본 또는 완전히 사용자 정의 가능 (자신 만의 레이아웃을 사용할 수도 있음)
  • 여러 줄 지원
  • 클릭 리스너

여기를보세요

빠른 시작 :

레이아웃에 ChipView를 추가하거나 프로그래밍 방식으로 생성합니다.

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

추상 칩을 확장하는 데이터 목록과 클릭 리스너 (원하는 경우)로 초기화합니다.

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는 아니지만 그것을 모방 할 수 있습니다 (실제로는 그렇게 사용하고 있습니다)

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.