//

一，需求：Android 使用TextView實現 圖文混排

android專案中很多圖文混排問題，如果使用簡單的TextView和ImageView很難實現我們想要的效果。但Android TextView其實很強大，如果簡單隻用於顯示我們需要的文字資訊，就太浪費資源了。最近也因為專案中遇到了混排問題，才開始探索這些東西。    有意學習者 可以看看。   會的可以忽略。
謝謝。

//普通的  圖文顯示簡單略過，我們應該知道TextView 的android:drawableLeft以及android:drawableRight android:drawableBottom 以及 android:drawableTop   可以很簡單的實現  圖文混排
<TextView
        android:layout_width="wrap_content"
 

        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_gravity="center"
        android:drawableBottom="@mipmap/ic_launcher"
        android:drawableLeft="@mipmap/ic_launcher"
        android:drawableTop="@mipmap/ic_launcher"
        android:drawableRight="@mipmap
 
/ic_launcher"
        android:text="文字資訊"
        />

二，首先 我們要有一段富文字：無論是從網上下載過來的，還是我們本地生成的。

  private static String netStr = " <div id=\"body\">\n" +
            "            <div id=\"main\">\n" +
            "                <div class=\"main\">\n" +
            "                        <div class=\"
 
ad_class\" pngo4j1=\"\" hidden=\"\">\n" +
            "<div class=\"notice tracking-ad\" data-mod=\"popu_3\">\n" +
            "\n" +
            "\n" +
            "<a href=\"http://blog.csdn.net/blogdevteam/article/details/72917467\" target=\"_blank\">\n" +
            "<font color=\"red\"><strong>徵文 | 從高考，到程式設計師</strong></font></a>\n" +
            "\n" +
            "&nbsp;&nbsp;&nbsp;&nbsp;\n" +
            "\n" +
            "<a href=\"http://edu.csdn.net/huiyiCourse/detail/422?ref=text\" target=\"_blank\">\n" +
            "<font color=\"blue\"><strong>深度學習與TensorFlow入門一課搞定！</strong></font></a>\n" +
            "&nbsp;&nbsp;&nbsp;&nbsp;\n" +
            "\n" +
            "\n" ";

三，下面主要嘗試 富文字的操作：含有網路圖片 以及img url 的富文字操作：

1，第一次嘗試：

    @Override
    public void updateView() {
        //重新整理資料
        String str = presenter.getBean().getCharSque();
        netData.setText(Html.fromHtml(str));
    }

//結果 顯示：

顯然結果差強人意。

2,第二次嘗試： 新增IamgeGet 類：

使用Html自帶的  方法，使用  三個引數的  方法：

@Override
    public void updateView() {
        //重新整理資料
        String str = presenter.getBean().getCharSque().trim();
        Spanned spanned = Html.fromHtml(str, new MImageGetter(), null);
        netData.setText(spanned);
    }

重寫ImageGet類  獲取圖片：

   //1，自定義  IamgGetter  獲取 網路圖片資料：
    private class MImageGetter implements Html.ImageGetter {
        @Override
        public Drawable getDrawable(String source) {
            //非同步 獲取 網路圖片並返回：  這裡使用  Glide 獲取 圖片  當然你也可以使用   其他：
            //1,設定 圖片佔位符：
            final LevelListDrawable draw = new LevelListDrawable();
            Drawable empty = getResources().getDrawable(R.mipmap.ic_launcher);
            draw.addLevel(0, 0, empty);
            draw.setBounds(0, 0, 100, 100);

            final String url = source;
            new Thread(new Runnable() {
                @Override
                public void run() {
                    Bitmap bitmap = null;
                    //請求  圖片
                    try {
                        //2,獲取 網路圖片   該方法  為同步方法   需在子執行緒中執行
                        bitmap =
                                Glide.with(MainActivity.this)
                                        .load(url)
                                        .asBitmap()
                                        .into(com.bumptech.glide.request.target.Target.SIZE_ORIGINAL, com.bumptech.glide.request.target.Target.SIZE_ORIGINAL)
                                        .get();
                    } catch (Exception e) {
                        e.printStackTrace();
                        Log.i("info", "異常");
                    }
                    //3,設定  圖片
                    runUiThr(bitmap, draw);
                }
            }).start();
            return draw;
        }
    }

// 2，設定圖片

private void runUiThr(final Bitmap bitmap, final LevelListDrawable draw) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                if (bitmap != null) {
                    BitmapDrawable drawable = new BitmapDrawable(bitmap);
                    draw.addLevel(1, 1, drawable);
                    draw.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());
                    draw.setLevel(1);

                    CharSequence charSequence = netData.getText();
                    netData.setText(charSequence);
                    netData.invalidate();
                }
            }
        });
    }

//3，TODO 別忘了新增許可權：

    <uses-permission android:name="android.permission.INTERNET"/>

最後效果：

網路圖片 已經完全展示出來。當然如果大家對 展示效果不滿意你還可以重寫ImageSpan。完美展示。

3,載入本地文字資料 根據正則匹配資源圖片

效果：

直接上程式碼：

 //初始化 本地資料  並顯示：   本地資料  並沒什麼
        final SpannableStringBuilder builder =
                getSpanStrBuilder("YW  百年學典-同步-英語六年級下冊（4年級）P1-1 \n" +
                        "YW  百年學典-同步-英語六年級下冊（4年級）P1-1 \n" +
                        "YW  百年學典-同步-英語六年級下冊（4年級）P1-1 \n" +
                        "YW  百年學典-同步-英語六年級下冊（4年級）P1-1", "YW");
        locaData.setText(builder);

   //-----------------------------------------------------載入 本地圖片------------------------------------------------------------------------
    @NonNull
    private SpannableStringBuilder getSpanStrBuilder(CharSequence text, String rex) {
        SpannableStringBuilder builder = new SpannableStringBuilder(text);
        Matcher matcher = Pattern.compile(rex).matcher(text);
        Drawable draw = getResources().getDrawable(R.mipmap.ic_yuwen);
        draw.setBounds(0, 0, draw.getIntrinsicWidth(), draw.getIntrinsicWidth());
        while (matcher.find()) {
            builder.setSpan(
                    new MyImageSpan(draw), matcher.start(), matcher
                            .end(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
        return builder;
    }

    //顯示 位置
    class MyImageSpan extends ImageSpan {
        public MyImageSpan(Drawable drawable) {
            super(drawable);
        }
        @Override
        public void draw(Canvas canvas, CharSequence text, int start, int end,
                         float x, int top, int y, int bottom, Paint paint) {
            Paint.FontMetricsInt fm = paint.getFontMetricsInt();
            Drawable drawable = getDrawable();
            int transY = (y + fm.descent + y + fm.ascent) / 2
                    - drawable.getBounds().bottom / 2;
            canvas.save();
            canvas.translate(x, transY);
            drawable.draw(canvas);
            canvas.restore();
        }
    }

完畢。

原始碼： github: 歡迎學習和指正 , 如果對你有幫助，歡迎fork和star。