Ярлыки или пузырьки Android в EditText - PullRequest
53 голосов
/ 11 ноября 2011

enter image description here Может кто-нибудь указать мне в правильном направлении, как сделать, чтобы эти пузырьки или надписи в EditText были похожи на те, которые вы видите, когда хотите создать что-то в Stream для Google+ при добавлении круга или контакта?Прямоугольник - это автоматически завершенный текст редактирования.

Ответы [ 8 ]

18 голосов
/ 15 ноября 2011

То, что вы показываете, работает так же, как и приложение для отправки SMS.Найдите код здесь , чтобы увидеть, как это делается.

РЕДАКТИРОВАТЬ:

Код должен быть в platform_packages_apps_mms .Взгляните на RecipientsEditor класс.

7 голосов
/ 03 октября 2013

Я собрал TokenAutoComplete на github , чтобы решить аналогичную проблему, и она должна работать и для вас.Вот базовая реализация демонстрационного приложения:

public class ContactsCompletionView extends TokenCompleteTextView {
    public ContactsCompletionView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected View getViewForObject(Object object) {
        Person p = (Person)object;

        LayoutInflater l = (LayoutInflater)getContext().getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        LinearLayout view = (LinearLayout)l.inflate(R.layout.contact_token, (ViewGroup)ContactsCompletionView.this.getParent(), false);
        ((TextView)view.findViewById(R.id.name)).setText(p.getEmail());

        return view;
    }

    @Override
    protected Object defaultObject(String completionText) {
        //Stupid simple example of guessing if we have an email or not
        int index = completionText.indexOf('@');
        if (index == -1) {
            return new Person(completionText, completionText.replace(" ", "") + "@example.com");
        } else {
            return new Person(completionText.substring(0, index), completionText);
        }
    }
}

Код макета для contact_token (вы можете использовать любой тип макета здесь или можете добавить ImageView, если вам нужны изображения в токене)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content">

    <TextView android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/token_background"
        android:padding="5dp"
        android:textColor="@android:color/white"
        android:textSize="18sp" />

</LinearLayout>

Токен Backgound Drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#ffafafaf" />
    <corners
        android:topLeftRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomRightRadius="5dp" />
</shape>

Код объекта Person

public class Person implements Serializable {
    private String name;
    private String email;

    public Person(String n, String e) { name = n; email = e; }

    public String getName() { return name; }
    public String getEmail() { return email; }

    @Override
    public String toString() { return name; }
}

Пример действия

public class TokenActivity extends Activity {
    ContactsCompletionView completionView;
    Person[] people;
    ArrayAdapter<Person> adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        people = new Person[]{
                new Person("Marshall Weir", "marshall@example.com"),
                new Person("Margaret Smith", "margaret@example.com"),
                new Person("Max Jordan", "max@example.com"),
                new Person("Meg Peterson", "meg@example.com"),
                new Person("Amanda Johnson", "amanda@example.com"),
                new Person("Terry Anderson", "terry@example.com")
        };

        adapter = new ArrayAdapter<Person>(this, android.R.layout.simple_list_item_1, people);

        completionView = (ContactsCompletionView)findViewById(R.id.searchView);
        completionView.setAdapter(adapter);
    }
}

Код макета

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.tokenautocomplete.ContactsCompletionView
        android:id="@+id/searchView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>
4 голосов
/ 02 июня 2012

Я решил это ЗДЕСЬ Контактный пузырь EditText

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

}

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;
}
4 голосов
/ 15 ноября 2011

Вы можете сделать это, создав подкласс android.text.style.DynamicDrawableSpan. ImageSpan является примером этого: он заменяет диапазон (диапазон) текста изображением.

Этот пример поместит звездочку в поле редактирования, заменив текст «тест». Создайте EditText в вашем макете с идентификатором «text» и поместите его в onCreate() (или где-либо еще):

    EditText mText = (EditText) findViewById(R.id.text);
    final Editable e = mText.getEditableText();
    final SpannableStringBuilder sb = new SpannableStringBuilder();
    sb.append("test");
    sb.setSpan(new ImageSpan(this, android.R.drawable.btn_star), 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    e.append(sb);

Я не видел ни одного класса, который выглядел бы так, как будто бы он мог обернуть обычный текст в отрисовку, но это было бы довольно легко решить путем переопределения метода getDrawable() и рендеринга текста самостоятельно.

0 голосов
/ 25 апреля 2014

Я решил что-то вернуть сообществу и создал библиотеку, которая призвана решить именно эту проблему, которая у вас есть. Библиотека вместе с примером проекта доступна на GitHub: https://github.com/RafalManka/BubbleEditText

0 голосов
/ 18 ноября 2011

Я думаю, что он использует метод setCompoundDrawables (), чтобы вставить это изображение в текст редактирования

0 голосов
/ 11 ноября 2011

Чтобы установить значок круга слева от EditText, вы можете изменить leftDrawable.

Вы можете сделать это в XML-файле макета android:drawableRight="@drawable/search_icon" или программно, используя функцию setCompoundDrawablesWithIntrinsicBounds.

Если вы также хотите придать стиль пузыря, вы должны изменить фон для рисования с помощью 9-патча , который имеет стиль. здесь у вас есть учебник для пузыря из 9 патчей для карт Google.

Надеюсь, это помогло! :)

0 голосов
/ 11 ноября 2011

Если вы имеете в виду подсказки, вы можете добавить просто с помощью:

android:hint="@string/myHint"

Это поместит серую метку в EditText, когда он пуст.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...