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

    }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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