Android:EditText插入图片实现图文混排

2016年03月17日 Android 5条评论 阅读11429次


Android:多行EditText打造图文混排富文本编辑器


对于插入到富文本编辑框多行EditText的图片而言,什么样的尺寸都有可能出现,或者尺寸很大,或尺寸很小。对于这种情况,出于下面两点考虑,要做相应的优化。

  • 根据用户体验至上的原则,尽量不出现水平方向的滚动条,上下方向滚动条是可以接受的
  • Android设备中很大的图片会出现OOM的异常

所以我们的优化方案就出来了:

  • 如果插入图片的宽度大于EditText控件的宽度,按照EditText控件宽度的80%作为目标宽度,对原图进行压缩
  • 如果插入图片的宽度不大于EditText控件的宽度,则直接插入原图(不进行压缩)

Activity显示时,先获得插入图片的宽度,这里用EditText控件宽度的80%(考虑到两边留一些空白更更好看一些)作为插入图片的目标宽度

点击插入图片按钮时的响应时间

public void add_img(View v) {
    Intent intent = new Intent(Intent.ACTION_PICK);
    intent.setType("image/*");
    startActivityForResult(intent, PICK_PIC);
} 

从图库选择一张图之后的处理逻辑

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (resultCode == RESULT_OK) {
        if (requestCode == PICK_PIC) {
            if (data == null) {
                Toast.makeText(this, "failed", Toast.LENGTH_SHORT).show();
            } else {
                Uri uri = data.getData();
                Bitmap bitmap = getOriginalBitmap(uri);
                SpannableString ss = getBitmapMime(bitmap, uri);
                insertIntoEditText(ss);
            }
        }
    }
} 

其他关联代码

/**
 * EditText中可以接收的图片(要转化为SpannableString)
 * 
 * @param pic
 * @param uri
 * @return SpannableString
 */
private SpannableString getBitmapMime(Bitmap pic, Uri uri) {
    int imgWidth = pic.getWidth();
    int imgHeight = pic.getHeight();
    // 只对大尺寸图片进行下面的压缩,小尺寸图片使用原图
    if (imgWidth >= mInsertedImgWidth) {
        float scale = (float) mInsertedImgWidth / imgWidth;
        Matrix mx = new Matrix();
        mx.setScale(scale, scale);
        pic = Bitmap.createBitmap(pic, 0, 0, imgWidth, imgHeight, mx, true);
    }
    String smile = uri.getPath();
    SpannableString ss = new SpannableString(smile);
    ImageSpan span = new ImageSpan(this, pic);
    ss.setSpan(span, 0, smile.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    return ss;
}
private void insertIntoEditText(SpannableString ss) {
    // 先获取Edittext中原有的内容
    Editable et = et_addimage.getText();
    int start = et_addimage.getSelectionStart();
    // 设置ss要添加的位置
    et.insert(start, ss);
    // 把et添加到Edittext中
    et_addimage.setText(et);
    // 设置Edittext光标在最后显示
    et_addimage.setSelection(start + ss.length());
}
private Bitmap getOriginalBitmap(Uri photoUri) {
    if (photoUri == null) {
        return null;
    }
    Bitmap bitmap = null;
    try {
        ContentResolver conReslv = getContentResolver();
        // 得到选择图片的Bitmap对象
        bitmap = MediaStore.Images.Media.getBitmap(conReslv, photoUri);
    } catch (Exception e) {
        Log.e(TAG, "Media.getBitmap failed", e);
    }
    return bitmap;
} 

遇到的一些小问题

得到布局中EditText控件的宽度,使用ViewTreeObserver

ViewTreeObserver vto = et_addimage.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        et_addimage.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        mImgViewWidth = et_addimage.getWidth();
        mInsertedImgWidth = mImgViewWidth * 0.8f;
    }
}); 

多行EditText的默认初始光标不在左上角

因为EditText默认的android:gravity属性值为center,在布局文件中把它改为top就可以了。

android:gravity="top" 

EditText,SpannableString insert-image-to-edittext

分享本文至:

WRITTEN BY

avatar
本文标签:EditText图文混排
看了本文是不是觉得很赞,那就赶紧点击下面按钮分享给身边的朋友吧!

5 条评论

  1. avatar squidsforkids

    <a href="http://www.donnakaywhite.com/michael-michael-kors-15-saffiano-jet-set-travel-tote-mkr">michael michael kors 15 saffiano jet set travel tote</a> <a href="http://www.celineka.com/grey-orange-womens-adidas-damian-lillard-shoes-sneakere">grey orange womens adidas damian lillard shoes</a> <a href="http://www.squidsforkids.com/mlb-cubs-54-aroldis-chapman-blue-flexbase-authentic-collection-stitched-mlb-jersey-nflb">mlb cubs 54 aroldis chapman blue flexbase authentic collection stitched mlb jersey</a> <a href="http://www.muchopiso.com/nike-air-dt-max-96-menns-gr%C3%B8nn-shoesc">nike air dt max 96 menns gr酶nn</a> <a href="http://www.lacosmeticink.com/nike-free-4.0-flyknit-multicolor-2015-skor">nike free 4.0 flyknit multicolor 2015</a> <a href="http://www.justdoitperu.com/new-balance-996-womens-red-silver-sportsf">new balance 996 womens red silver</a>
    squidsforkids http://www.squidsforkids.com/

  2. avatar enescomert

    <a href="http://www.allyoucanlike.com/nike-lebron-13-noir-or-gods-chaussuresa">nike lebron 13 noir or gods</a> <a href="http://www.avonew.com/herre-nike-flyknit-lunar-2-lyser%C3%B8d-sort-schuhed">herre nike flyknit lunar 2 lyser酶d sort</a> <a href="http://www.manavocat.com/nike-internationalist-jcrd-svart-gull-scarpea">nike internationalist jcrd svart gull</a> <a href="http://www.mjnonghyup.com/nike-air-max-tn-kvinners-bl%C3%A5-gull-kurpese">nike air max tn kvinners bl氓 gull</a> <a href="http://www.opticgambetta.com/nfl-nike-pittsburgh-steelers-52-mike-webster-green-salute-to-service-mens-pullover-hoodie-nflr">nfl nike pittsburgh steelers 52 mike webster green salute to service mens pullover hoodie</a> <a href="http://www.reigapfunding.com/kobe-10-elite-low-rouge-bleu-kurpese">kobe 10 elite low rouge bleu</a>
    enescomert http://www.enescomert.com/

  3. avatar quotesbymark

    <a href="http://www.thedirtytaco.com/black-and-grey-polo-shirt-polox">black and grey polo shirt</a> <a href="http://www.versalazer.com/nike-air-max-dynasty-r%C3%B8d-schuhee">nike air max dynasty r酶d</a> <a href="http://www.aksumat.com/adidas-neo-mesh-rojo-rosado-scarped">adidas neo mesh rojo rosado</a> <a href="http://www.cletalover.com/ndamukong-suh-dolphins-jersey-nflw">ndamukong suh dolphins jersey</a> <a href="http://www.minruteguide.com/nfl-josh-rosen-ash-3-arizona-cardinals-nike-one-color-t-shirt-nflz">nfl josh rosen ash 3 arizona cardinals nike one color t shirt</a> <a href="http://www.mollenteam.com/adidas-rose-7-gr%C3%A5-orange-kurpesa">adidas rose 7 gr氓 orange</a>
    [url=http://www.quotesbymark.com/]quotesbymark[/url]

  4. avatar chiveshow

    <a href="http://www.iremaxvn.com/nike-air-max-2017-kpu-gold-blue-trainersce">nike air max 2017 kpu gold blue</a> <a href="http://www.multinutwraps.com/ray-ban-clubmaster-turtle-sunglassesr">ray ban clubmaster turtle</a> <a href="http://www.vipartonline.com/mackage-winter-jacket-toronto-mackager">mackage winter jacket toronto</a> <a href="http://www.wantaoren.com/nike-shox-8-men-sneakere">nike shox 8 men</a> <a href="http://www.tokodanaya.com/air-jordan-18-menns-gr%C3%A5-footc">air jordan 18 menns gr氓</a> <a href="http://www.dinerwareoc.com/nike-internationalist-style-skox">nike internationalist style</a>
    chiveshow http://www.chiveshow.com/

  5. avatar 乐悠游

    有兴趣玩玩,收下这个,谢谢

欢迎留言




用户登录

sitemap