android TextView 實現圖文混排
//
一,需求: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" +
" \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" +
" \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。
相關推薦
android TextView 實現圖文混排
// 一,需求:Android 使用TextView實現 圖文混排 android專案中很多圖文混排問題,如果使用簡單的TextView和ImageView很難實現我們想要的效果。但Android TextView其實很強大,如果簡單隻用於顯示我們需要
Android實現圖文混排的筆記·終篇
Android實現圖文混排的筆記·終篇 開始之前,先歡呼一下神馬筆記1.1.0_beta版本完成。 點選〖神馬筆記 版本1.1.0_beta〗瞭解新版本新增的功能。 整個圖文混排的功能經過了以下的開發過程。 〖Android如何實現圖文混排〗
android 你所不知道的類SpannableStringBuilder的總結--實現圖文混排,檢視更多,下劃線等等
今天無意中看到的一個類SpannableStringBuilder,查了下感覺很牛叉; 1.看下實現的效果 第一種 第二種 實現的程式碼見 使用的模板 2.簡單的使用模板: publiccl
TextView + Spanned實現圖文混排以及點選互動
最近要實現圖文混排的需求,webview過大,所以想到了用SpannableStringBuilder來實現。 不過參考了大量國內文章,大多數是教你如何實現圖文混排,並沒有提及圖片點選互動的。有翻閱了一些國外文章,說的也不是很詳細,於是花費時間鼓搗了一下,最終實現了Te
Button實現圖文混排
actor stat 實現圖 1.0 eve onf demo mat ont Button實現圖文混排 一、簡介 本文介紹兩種圖文混排方式 1、android:drawableTop="@drawable/star"實現文字上有圖片 當然有上下左右等等 2、Spannab
利用NSAttributedString實現圖文混排
nes -s union ref and 代理方法 tag erl efault UILabel 和 UITextView 都能添加 NSAttributedString 屬性字符串,通過這一點,可以實現帶有屬性的文字和文字內包含圖片的文本內容展示. 效果如下: 1-
css實現圖文混排
ack con -1 wid das www borde html ges css實現圖文混排 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
相簿選取圖片插入到EditText中,實現圖文混排
1.首先用到了 ImagePicker,上github搜尋仿微信圖片選擇就能找到 2.匯入ImagePicker的包 compile 'com.squareup.picasso:picasso:2.5.2' 3.我是用是 picasso載入圖片,github上imag
Android 純原生 圖文混排 心得
好久沒有上號 今天寫一下 純原生圖文混排心得 最近的專案裡需要展示圖文混排的格式,因為一些特殊原因需要純原生操作。眾所周知,圖文混排我們可以使用Html.fromHtml(source, imageGette
RecyclerView實現圖文混排
RecyclerView實現圖文混排 一、實現效果 二、設計思路 三、實現過程 1. 選擇圖片 2. 載入圖片 3. 顯示圖片 四、最後 一、實現效果
iOS-利用NSAttributedString實現圖文混排
UILabel 和 UITextView 都能新增 NSAttributedString 屬性字串,通過這一點,可以實現帶有屬性的文字和文字內包含圖片的文字內容展示. 效果如下:
安卓如何實現圖文混排
安卓如何實現圖文混排 一、安卓實現圖文混排的幾種方式 1. EditText with Spannable 2. RecyclerView 3. WebView F. 最終方案 二、圖片儲
android 解析html 圖文混排
public class MyImageGetter implements Html.ImageGetter { WeakReference<TextView> mTextViewReference; Context mContext; public MyIm
iOS中UIWebView的使用詳解及利用webview實現圖文混排例項
iOS中UIWebView的使用詳解 一、初始化與三種載入方式 UIWebView繼承與UIView,因此,其初始化方法和一般的view一樣,通過alloc和init進行初始化,其載入資料的方式有三種: 第一種: - (void)loadRequest:(NSU
[Swift通天遁地]八、媒體與動畫-(13)CoreText框架實現圖文混排
rst context 工廠 控制 制圖 sge getattr cgpath origin 本文將演示CoreText框架實現圖文混排。CoreText(富文本)框架並不支持圖片的繪制, 需要借助Core Graphics框架來進行圖片的繪制。 圖文混排的實現原理
android TextView裏邊實現圖文混配效果
分享 str images for pan override 設置 styles @override 用TextView實現這種效果,圖片文字混排,文字不同顏色字體。打電話和吊起瀏覽器等等 代碼例如以下: @Override public v
Android圖文混排-實現EditText圖文混合插入上傳
origin uri keyword src llb fail ren -a amp 前段時間做了一個Android會議管理系統,項目需求涉及到EditText的圖文混排,如圖: 在上圖的”會議詳情”中。須要支持文本和圖片的混合插入,下圖演示輸入的
Android 自繪TextView解決提前換行問題,支援圖文混排
先看下效果圖: 上面是MTextView,下面是預設的TextView。 一、原因 用最簡單的全英文句子為例,如果有一個很長的單詞,這一行剩餘的空間顯示不下了,那麼規則就是不打斷單詞,而是把整個單詞丟到下一行開始顯示。這樣本來沒有錯。一是咱們中國人都是方塊字,怎麼都放
RichEditeText——android圖文混排富文字文章編輯器實現詳解
需求:android 實現富文字編輯器,並且實現html解析和生成。 功能點: 字型加粗,斜體,下劃線,刪除線 字型設定大小 預設大(18px),中(16px),小(14px) 字型設定顏色 換行插入圖片 編輯內容生成html 解析html並且顯示 主要實現
android TextView部分字型顏色設定以及圖文混排
Drawable drawable = context.getResources().getDrawable(R.drawable.icon_wecircle_up); drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getInt