【问题标题】:how to insert image to a editText如何将图像插入editText
【发布时间】:2019-06-26 18:25:50
【问题描述】:

我想将图像插入到 editText 我的代码是:

  CharSequence charSeq= editText.getText()+" ";
  SpannableString ss2 = new SpannableString(charSeq); 
  Drawable d2 = holder.image.getDrawable(); 
  d2.setBounds(0, 0, d2.getIntrinsicWidth(), d2.getIntrinsicHeight()); 

  ImageSpan span2 = new ImageSpan(d2, ImageSpan.ALIGN_BASELINE); 
  ss2.setSpan(span2,charSeq.length()-1, charSeq.length(),  

  Spannable.SPAN_INCLUSIVE_INCLUSIVE); 

  editText.setText(ss2,BufferType.SPANNABLE); 

我的代码可以运行,但我有一些不错的经验我想修改:

1:你知道当使用ss2.setSpan()方法时,图片可以替换字符,我只想插入新图片,不想图片替换字符。

2:你知道我的方法包括“editText.getText()+”“;”,我添加了一些额外的空间,以便图像可以插入到 CharSequence 的最后。怎么不用添加一些Extra,图片也插入到CharSequence的最后。

3.当我将图像插入到 CharSequence 的最后时,光标不在最后,它出现在 CharSequence 的前面。如何将光标放在图像的后面。

4.我想在不同的CharSequence中不断的插入图片,怎么办?

我的问题太多了,希望你能帮助我,非常感谢。

【问题讨论】:

  • 我很难阅读 OP 问题。我很抱歉。 :(

标签: android android-edittext


【解决方案1】:

做这样的事情(注意:你可以重复使用 SpannableStringBuilder)

editText = (EditText)mRoot.findViewById(R.id.content);
ImageSpan imageSpan = new ImageSpan(preview);

SpannableStringBuilder builder = new SpannableStringBuilder();
builder.append(editText.getText());

// this is a string that will let you find a place, where the ImageSpan is.
String imgId = "[img=1]"; 

int selStart = editText.getSelectionStart();

// current selection is replaceв with imageId
builder.replace(editText.getSelectionStart(), editText.getSelectionEnd(), imgId);

// This adds a span to display image where the imageId is. If you do builder.toString() - the string will contain imageId where the imageSpan is.
// you can use it later - if you want to find location of imageSpan in text;
builder.setSpan(imageSpan, selStart, selStart + imgId.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
editText.setText(builder);

注意:关于标签部分删除的处理见follow up answer

【讨论】:

  • 如何获取内容 Editext 容器图像发送到服务器?我使用: String htmlString = Html.toHtml(new SpannableString(editites.getText()));标签图片返回:对不起英语!
  • @babay 你能帮我this topic?
  • 旋转时,自定义编辑文本正在打开,但未显示图像。它显示 [img=1] 请帮忙。 @babay
  • @DheerajD 1. 确保启用保存视图状态 (setSaveEnabled())。 2.实现保存视图状态。比如可以实现onSaveInstanceState()和onRestoreInstanceState(),将图片保存到文件,维护标签和文件之间的联系。
  • @babay 在旋转(横向模式)系统中,由于空间较小,系统正在全屏打开编辑文本。在全屏视图中,我得到 [img=1] 。如果我使用 android:imeOptions="flagNoExtractUi" 那么它不是全屏打开,而是隐藏在我的视图中(横向模式) 我们可以在全屏模式下解决这个问题吗?我已将所有内容正确保存在 onSavedInstance 中。请提出建议。
【解决方案2】:

试试这个,我希望你正在寻找这个:

   <EditText
        android:id="@+id/editText1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/icon">
    </EditText>

同样的事情你可以尝试:

android:drawableRight
android:drawableTop
android:drawableBottom
android:drawablePadding

【讨论】:

  • 你知道我想动态插入图片,而不仅仅是在文本中添加图片
【解决方案3】:
import java.util.regex.Matcher;
import java.util.regex.Pattern;

import android.content.Context;
import android.text.Spannable;
import android.text.style.ImageSpan;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.TextView;

public class TextViewWithImages extends TextView {

    public TextViewWithImages(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
    public TextViewWithImages(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public TextViewWithImages(Context context) {
        super(context);
    }
    @Override
    public void setText(CharSequence text, BufferType type) {
        Spannable s = getTextWithImages(getContext(), text);
        super.setText(s, BufferType.SPANNABLE);
    }

    private static final Spannable.Factory spannableFactory = Spannable.Factory.getInstance();

    private static boolean addImages(Context context, Spannable spannable) {
        Pattern refImg = Pattern.compile("\\Q[img src=\\E([a-zA-Z0-9_]+?)\\Q/]\\E");
        boolean hasChanges = false;

        Matcher matcher = refImg.matcher(spannable);
    while (matcher.find()) {
        boolean set = true;
        for (ImageSpan span : spannable.getSpans(matcher.start(), matcher.end(), ImageSpan.class)) {
            if (spannable.getSpanStart(span) >= matcher.start()
             && spannable.getSpanEnd(span) <= matcher.end()
               ) {
                spannable.removeSpan(span);
            } else {
                set = false;
                break;
            }
        }
        String resname = spannable.subSequence(matcher.start(1), matcher.end(1)).toString().trim();
        int id = context.getResources().getIdentifier(resname, "drawable", context.getPackageName());
        if (set) {
            hasChanges = true;
            spannable.setSpan(  new ImageSpan(context, id),
                                matcher.start(),
                                matcher.end(),
                                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
                             );
        }
    }

        return hasChanges;
    }
    private static Spannable getTextWithImages(Context context, CharSequence text) {
        Spannable spannable = spannableFactory.newSpannable(text);
        addImages(context, spannable);
        return spannable;
    }
}

用途:

res/layout/mylayout.xml

            <com.xyz.customandroid.TextViewWithImages
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#FFFFFF00"
                android:text="@string/can_try_again"
                android:textSize="12dip"
                style=...
                />

res/values/strings.xml

<string name="can_try_again">Press [img src=ok16/] to accept or [img src=retry16/] to retry</string>

ok16.pngretry16.png 位于 res/drawable/ 文件夹中

【讨论】:

【解决方案4】:

我猜,您还需要一些文本编辑功能:如果图像的一个字符被删除,则图像应该被删除;此类可以提供帮助(如果删除了其中的一个字符,则删除所有图像文本占位符)

public class ImageSpanTextWatcher implements TextWatcher {
    Object[] mTouchedSpans;
    int[] mSpanLength;
    boolean replacing = false;

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        if (s instanceof SpannableStringBuilder) {
            SpannableStringBuilder ssb = (SpannableStringBuilder) s;
            mTouchedSpans = ssb.getSpans(start, start + count, ImageSpan.class);
            if (mTouchedSpans != null && mTouchedSpans.length > 0) {
                mSpanLength = new int[mTouchedSpans.length];
                for (int i = 0; i < mTouchedSpans.length; i++) {
                    mSpanLength[i] = ssb.getSpanEnd(mTouchedSpans[i]) - ssb.getSpanStart(mTouchedSpans[i]);
                }
            }
        }
    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        if (s instanceof SpannableStringBuilder) {
            SpannableStringBuilder ssb = (SpannableStringBuilder) s;

            if (replacing)
                return;
            replacing = true;
            if (mTouchedSpans != null && mTouchedSpans.length > 0)
                for (int i = 0; i < mTouchedSpans.length; i++) {
                    int newLen = ssb.getSpanEnd(mTouchedSpans[i]) - ssb.getSpanStart(mTouchedSpans[i]);
                    if (newLen < mSpanLength[i]) {
                        ssb.replace(ssb.getSpanStart(mTouchedSpans[i]), ssb.getSpanEnd(mTouchedSpans[i]), "");
                    }
                }
            mTouchedSpans = null;
            mSpanLength = null;
            replacing = false;
        }
    }

    @Override
    public void afterTextChanged(Editable s) {}
}

【讨论】:

    【解决方案5】:

    我是这样在EditText中插入和删除图片的:

    客户按钮插入

    private void addImageInEditText(Drawable drawable) {
    
            drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
    
            int selectionCursorPos = messageEditText.getSelectionStart();
            messageEditText.getText().insert(selectionCursorPos, ".");
            selectionCursorPos = messageEditText.getSelectionStart(); 
            SpannableStringBuilder builder = new SpannableStringBuilder(messageEditText.getText());
            int startPos = selectionCursorPos - ".".length();
            builder.setSpan(new ImageSpan(drawable), startPos, selectionCursorPos, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            messageEditText.setText(builder);
            messageEditText.setSelection(selectionCursorPos);
        }
    

    自定义按钮删除

    private void deleteImageFromEditText() {
            String msgEditText = messageEditText.getText().toString();
            LOGE(TAG, "text length : " + msgEditText.length());
            if (msgEditText.length() > 0) {
                int selectionCursorPos = messageEditText.getSelectionStart();
                int endPosition = messageEditText.getText().length();
                LOGE(TAG, "cursor Pos: " + selectionCursorPos + " endPosition : " + endPosition);
    
                if (selectionCursorPos > 0) {
                    int deletingObjectStartPos = selectionCursorPos - 1;
                    messageEditText.getText().delete(deletingObjectStartPos, selectionCursorPos);
                    messageEditText.setSelection(deletingObjectStartPos);
                }
            } else {
                messageEditText.setText("");
            }
        }
    

    Drawable 可以通过多种方式进行测试,我正在这样做:

    Drawable drawable = getResources().getDrawable(R.drawable.ic_action_filter);
    addImageBetweentext(drawable);
    

    【讨论】:

      【解决方案6】:

      有了这个,你会得到图像左对齐,也会在图像后得到光标。尝试使用:

      mEditText.setCompoundDrawablesWithIntrinsicBounds(R.drawable.icon,0, 0,0);
      

      【讨论】:

      • 我不只是想左对齐,我想把图片插入到文本中,可能在左边,可能在右边,可能在中间
      • 哦..我明白了。所以你想插入图像,就好像你在 EditText 中输入文本一样。我不知道有什么办法。
      猜你喜欢
      • 2011-01-14
      • 2010-10-07
      • 2019-02-22
      • 2014-10-01
      • 2018-12-21
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多