1

Пытаюсь реализовать отображение тегов при вводе текста с клавиатуры

  1. Есть обычный EditText, на который подвешен слушатель TextWatcher.

  2. Аттрибуты:

    android:inputType="textCapSentences|textMultiLine|textShortMessage"
    android:maxLines="4"
    
  3. Как только в методе TextWatcher'a afterTextChanged(Editable string) вижу, что некое слово содержит шарп (#) - через ImageSpan оформляю его в виде тега.

  4. Устанавливаю новый текст в EditText ->

    SpannableString spannableString = new SpannableString(string);
    ImageSpan imageSpan = getImageSpan(string); 
    int startPosition = getStartPosition(string);
    int endPosition = getEndPosition(string);
    spannableString.setSpan(imageSpan, startPosition, endPosition,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    setText(spannableString);
    

Всё работает хорошо и выглядит вот так: пример

Проблема: после вызова setText(spannableString); цифровая клавиатура (если был ввод цифр) или клавиатура со смайлами (если был ввод смайлов) меняется на обычную текстовую.

Клавиатуры меняются независимо от того, есть ImageSpan или нет. (если в методе afterTextChanged(Editable string) я вызываю просто setText(string) - клавиатура меняется).

Клавиатуры НЕ меняются, если не вызывать setText(string).

Вопросы: как добиться того, чтобы клавиатуры не менялись, когда я добавляю ImageSpan внутрь EditText? Возможно, я вообще иду не по тому пути. Возможно, есть проще и эффективнее решения, о работе с оформлением слов внутри EditText?

Буду рад выслушать любые идеи! Спасибо.

1
  • Friends, any ideas?
    – Andrew G
    Commented 13 февр. 2017 в 9:18

1 ответ 1

1

Итак, решение по добавлению картинки внутрь EditText и чтобы клавиатура не прыгала было таким:

  1. Устанавливаем тег через setText и запоминаем его
  2. При следующих вводах смотрим, если тег не менялся - не используем setText. Тогда клавиатуры не переключаются (не вызывается метод завершения ввода) и всё работает корректно.
  3. Когда меняется тег, удаляем Spannable и устанавливаем их заново

В примерах ниже вы можете посмотреть как а) Очищать устаревшие спаны б) Создавать ImageSpan (в данном случае - делать из текста рисунок) в) Устанавливать картинку - текст внутрь EditText

Надеюсь, это поможет кому-либо.

 /**
     * Clean the formatting of the string.
     *
     * @param editable text which has spannable format
     */
    private void removeOldSpans(Editable editable){
        Object[] spans = editable.getSpans(0, editable.toString().length(), Object.class);
        for (Object span : spans) {
            if (span instanceof ImageSpan) {
                editable.removeSpan(span);
            }
        }
    }
/**
     * Setting formats to tags.
     *
     * @param startTag a first tag in the string
     * @param endTag a last tag in the string
     * @param editable the string with text
     */
    public void setTagSpans(String startTag, String endTag, Editable editable) {
        oldStartTag = startTag;
        oldEndTag = endTag;

        removeTextChangedListener(tw); //disable listener

        String currentText = editable.toString();

        //remove old span
        removeOldSpans(editable);

        //create new span
        SpannableString spannableString = new SpannableString(editable);

        if (!TextUtils.isEmpty(startTag) && TextUtils.isEmpty(endTag)) {
            //we have only first tag
            final ImageSpan startTagSpan = getChipsSpan(startTag);
            spannableString.setSpan(startTagSpan, 0, startTag.length(),
                    Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        } else if (TextUtils.isEmpty(startTag) && !TextUtils.isEmpty(endTag)) {
            //we have only last tag
            final ImageSpan endTagSpan = getChipsSpan(endTag);
            int last = currentText.lastIndexOf("#");
            spannableString.setSpan(endTagSpan, last, currentText.length(),
                    Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        } else if (!TextUtils.isEmpty(startTag) && !TextUtils.isEmpty(endTag)) {
            //we have both tags at the same time
            final ImageSpan startTagSpan = getChipsSpan(startTag);
            final ImageSpan endTagSpan = getChipsSpan(endTag);
            int last = currentText.lastIndexOf("#");
            spannableString.setSpan(startTagSpan, 0, startTag.length(),
                    Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            spannableString.setSpan(endTagSpan, last, currentText.length(),
                    Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        }

        setText(spannableString, BufferType.SPANNABLE);
        forceSetCursorPosition = spannableString.length();
        setSelection(forceSetCursorPosition);

        addTextChangedListener(tw);
    }


/**
     * Format the tag from a text into an image span.
     *
     * @param tag text
     * @return text which has been formatted into an image span
     */
    private ImageSpan getChipsSpan(String tag) {
        //Build chips view
        final TextViewFontExt textViewFontExt = new TextViewFontExt(getContext());
        textViewFontExt.setTypeface(Helper.Fonts.getTypeface(getContext(), "fonts/Roboto-Medium.ttf"));
        textViewFontExt.setLayoutParams(
                new LinearLayout.LayoutParams(
                        LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
        textViewFontExt.setText(tag);
        textViewFontExt.setTextSize(getResources().getDimension(R.dimen.chats_chips_span_text_size));
        textViewFontExt.setTextColor(getResources().getColor(android.R.color.white));
        textViewFontExt.setPadding(
                (int)getResources().getDimension(R.dimen.chats_chips_span_padding_lr),
                (int)getResources().getDimension(R.dimen.chats_chips_span_padding_top),
                (int)getResources().getDimension(R.dimen.chats_chips_span_padding_lr),
                (int)getResources().getDimension(R.dimen.chats_chips_span_padding_bottom));

        Drawable tagBackground;
        if(Build.VERSION.SDK_INT < 21) {
            tagBackground = getResources().getDrawable(R.drawable.tag_input_background);
        } else {
            tagBackground = getResources().getDrawable(R.drawable.tag_input_background, null);
        }
        if(Build.VERSION.SDK_INT < 16) {
            textViewFontExt.setBackgroundDrawable(tagBackground);
        } else {
            textViewFontExt.setBackground(tagBackground);
        }

        //Build chips bitmap
        int spec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        textViewFontExt.measure(spec, spec);
        textViewFontExt.layout(0, 0, textViewFontExt.getMeasuredWidth(), textViewFontExt.getMeasuredHeight());

        Bitmap bitmap = Bitmap.createBitmap(textViewFontExt.getWidth(), textViewFontExt.getHeight(),
                Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(bitmap);
        canvas.translate(-textViewFontExt.getScrollX(), -textViewFontExt.getScrollY());

        textViewFontExt.draw(canvas);
        textViewFontExt.setDrawingCacheEnabled(true);

        Bitmap cacheBitmap = textViewFontExt.getDrawingCache();
        Bitmap tagBitmap = cacheBitmap.copy(Bitmap.Config.ARGB_8888, true);
        BitmapDrawable bitmapDrawable = new BitmapDrawable(getResources(), tagBitmap);
        bitmapDrawable.setBounds(0, 0, bitmapDrawable.getIntrinsicWidth(), bitmapDrawable.getIntrinsicHeight());

        //Cleanup
        textViewFontExt.destroyDrawingCache();
        bitmap.recycle();
        cacheBitmap.recycle();

        return new ImageSpan(bitmapDrawable);

    }

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.