Android Graphics Mix-achieve edittext graphics mixed insert Upload

Some time ago to do an Android Conference management system, project requirements related to the edittext of the picture and text mixed,

In the "Meeting Details" section. Need to support mixed insertion of text and pictures, demo input Demo sample:
When the meeting is created, save the data to the server. Then look at the meeting you just created.

first, understand the needs
First of all. Click the "Meeting Details" text box, enter the text normally, and then click the picture icon in the lower left corner. The registration of the system is used to select a picture and insert it into the text box, you can also rest the cursor in the middle of random text, complete the insertion of the picture. Fallback is the ability to delete text individually and delete pictures.

Second, the realization of ideas

假设要在一个EditText中显示图片，首先得简单了解一下SpannableString和ImageSpan的使用。在上面的图文混排的EditText中。尽管看到了生动的图文效果。可是实际上输出EditText的get Text().toString()。事实上是："插入一张图片<img src=\"" + url1+ "\" />。
再插入一张图片<img src=\"" + url2+ "\" />。"。也就是说，当我选择图片插入到EditText中时，尽管显示了该图片，可是插入进去的事实上是这个图片的url。当我保存这条记录时，传给server的值就是："插入一张图片<img src=\"" + url1+ "\" />。再插入一张图片<img src=\"""\" />。"这部分代码例如以下：

1. Click on the image button to enter the system album

    /**     * 图文详情页面选择图片     */    publicvoidgetImage() {        new Intent(Intent.ACTION_GET_CONTENT);        intent.addCategory(Intent.CATEGORY_OPENABLE);        intent.setType("image/*");        0);    }

2. Get to the picture and call the interface to upload the image to the server, upload the URL of the picture that was returned to the server after the successful uploading

    @Override    protected void Onactivityresult(intRequestcode,intResultCode, Intent data) {if(ResultCode = = Result_ok && Requestcode = =0) {Contentresolver resolver = Getcontentresolver ();//Get the URI of the pictureUri Originaluri = Data.getdata (); Bitmap =NULL;Try{Bitmap Originalbitmap = Bitmapfactory.decodestream (Resolver.openinputstream (Originaluri)); Bitmap = Imageutils.resizeimage (Originalbitmap, -);//Convert the bitmap of the original image to a file                //Upload the file and get the URL                NewThread (NewRunnable () {@Override                     Public void Run() {Insertpic (bitmap,0);            }}). Start (); }Catch(FileNotFoundException e)            {E.printstacktrace (); } }｝

3. By running the Insertpic () method, get to the URL and do some processing so that it appears in the EditText

    /** * Insert Picture * /    Private void Insertpic(Bitmap BM,Final intIndex) {Ajaxparams params =NewAjaxparams ();Try{Params.put ("Image", Leoutils.savebitmap (BM)); }Catch(FileNotFoundException e)        {E.printstacktrace (); } finalhttp fh =NewFinalhttp (); System.out.println ("params="+ params.tostring ()); Fh.post (Httpurlconstant.upload_pic, params,NewAjaxcallback<object> () {@Override             Public void onfailure(Throwable T,intErrorno, String strMsg) {Super. OnFailure (t, Errorno, STRMSG); Toastutil.show (Getapplicationcontext (),"Picture upload failed, please check the network")； }@Override             Public void onsuccess(Object t) {Super. onsuccess (t); System.out.println (T.tostring ());Try{Jsonobject Jsonobject =NewJsonobject (T.tostring ()); String URL = jsonobject.getstring ("Recordname");Switch(index) { Case 0://Create Imagespan object from Bitmap objectImagespan Imagespan =NewImagespan (createmeetingactivity. This, bitmap);//Create a Spannablestring object to insert an image encapsulated with a Imagespan objectString Tempurl ="  " "+ URL +"\"/> "; Spannablestring spannablestring =NewSpannablestring (Tempurl);//Replace the string you specified with the Imagespan objectSpannablestring.setspan (Imagespan,0, Tempurl.length (), spannable.span_exclusive_exclusive);//Append the selected picture to the cursor position in the EditText                        intindex = Et_detail.getselectionstart ();//Get cursor locationEditable Edit_text = Et_detail.geteditabletext ();if(Index <0||                        Index >= edit_text.length ()) {edit_text.append (spannablestring); }Else{Edit_text.insert (index, spannablestring); } System.out.println ("inserted Picture:"+ spannablestring.tostring ()); Break; Case 1://code unrelated to this case                         Break; }                }Catch(Jsonexception e)                {E.printstacktrace ();    }            }        }); }

The gaze above was written very concretely. Even if you didn't know spannerstring and Imagespan before. I believe we can understand how to use them.

At this point, the Android EditText graphics mixed insertion requirements are complete.

Iii. Additional Information
Q1: Why upload the image to the server to get the URL?
A1:PM requires the interface to upload the image to the server every time the image is inserted. The interface returns the URL of the picture. Although such a requirement is not a good solution. Suppose you do not need to save the contents of a mixed text insert. Then you don't have to run this step. When Imagespan is replaced, it can be replaced with random characters, because for spanneblestring. The inserted picture is actually just a few characters, which can be output edittext.gettext (). ToString () to verify.

// 用ImageSpan对象替换spannableString.setSpan0"图片1", Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

Q2: Why do you want to wrap the URL of the image again into a string with an IMG tag?

A2: 由于项目的另外一个需求是编辑会议。也就是图文混合插入的内容支持以后的再次编辑。
当调用会议编辑接口时。会返回会议详情的数据。这些数据就是："插入一张图片<img src=\"" + url1+ "\" />。
再插入一张图片<img src=\"" + url2+ "\" />。"为了让会议详情页面的图文回显到EditText中，我会对这些字符串通过正则匹配"\">，假设匹配到这样的格式。就代表它是一个图片。然后通过一些处理将图片回显出来。

Android Graphics Mix-achieve edittext graphics mixed insert Upload