兩行文本前面加圖片用 ImageSpan的實(shí)現(xiàn)

先上效果圖:

Paste_Image.png

左邊應(yīng)該是個(gè)圖片,右邊就是文本中狂,并且第二行是與圖片的左邊相對(duì)齊的凫碌。

這是一個(gè)排行榜,總共有10個(gè)條目胃榕,一開(kāi)始UI 就給切了1-3三個(gè)icon盛险,但是經(jīng)過(guò)考慮以后,這個(gè)標(biāo)題是兩行跟一行混排的這種勋又,如果是1行文本的話還好說(shuō)苦掘,但是還有2行的情況必須還要考慮,沒(méi)辦法這種情況下只能讓 UI 把1-10的 icon 圖片全部切給我們楔壤。

一開(kāi)始做的時(shí)候鹤啡,在文本前面加圖片我們一般用 TextView 的 drawableLeft 屬性,但是在實(shí)際運(yùn)行展示的話達(dá)不到我們要求的效果蹲嚣,在兩行文本的時(shí)候圖片會(huì)占據(jù)兩行递瑰,第二行的文本對(duì)其的是圖片的右邊沿。

沒(méi)辦法了只能考慮用 SpannableString 還有ImageSpan 來(lái)實(shí)現(xiàn)隙畜。
具體代碼如下:

SpannableString ss = new SpannableString(position +" "+ data.title);
        //得到drawable對(duì)象抖部,即所要插入的圖片
 Drawable d = context.getResources().getDrawable(ranks[position]);
 d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
ss.setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);

這個(gè)地方要注意 setSpan 里面的0跟1 這兩個(gè)參數(shù),里面的參數(shù)代表的一個(gè)是 start 一個(gè)是 end 就是在字符串中所占的位置议惰,如果都設(shè)置為0慎颗,0的話就看不到圖片了,再加上圖片與文字之間還有空間言询,這樣的話就需要我們手動(dòng)在要展示的字符串加上任意字符還有加的空格俯萎,這就是上圖代碼中 position +" "+ data.title參數(shù)的由來(lái)。

這應(yīng)該是我們常用的設(shè)置运杭,但是展示的時(shí)候有些問(wèn)題夫啊,因?yàn)閳D片比較大展示的時(shí)候相比較在文字的上方,展示要求的話是在圖片與文本居中县习。

首先想到的是 setBounds 方法涮母,里面的參數(shù)是設(shè)置圖片的位置的,手動(dòng)改變初始的位置改為負(fù)值看看能不能是圖片向下展示躁愿,但是都失敗了叛本,個(gè)人感覺(jué)這個(gè)地方最低應(yīng)該就是以文本的展示的最低點(diǎn)為參考的,就是0 彤钟,0 開(kāi)始的来候。
沒(méi)辦法只能上網(wǎng)谷歌了,最終代碼如下:

SpannableString ss = new SpannableString(position +" "+ data.title);
        //得到drawable對(duì)象逸雹,即所要插入的圖片
ImageSpan span = new MyIm(context, ranks[position]);
ss.setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
holder.tvTitle.setText(ss);
 
public class MyIm extends ImageSpan
    {
        public MyIm(Context arg0,int arg1) {
            super(arg0, arg1);
        }
        public int getSize(Paint paint, CharSequence text, int start, int end,
                           Paint.FontMetricsInt fm) {
            Drawable d = getDrawable();
            Rect rect = d.getBounds();
            if (fm != null) {
                Paint.FontMetricsInt fmPaint=paint.getFontMetricsInt();
                int fontHeight = fmPaint.bottom - fmPaint.top;
                int drHeight=rect.bottom-rect.top;

                int top= drHeight/2 - fontHeight/4;
                int bottom=drHeight/2 + fontHeight/4;

                fm.ascent=-bottom;
                fm.top=-bottom;
                fm.bottom=top;
                fm.descent=top;
            }
            return rect.right;
        }

        @Override
        public void draw(Canvas canvas, CharSequence text, int start, int end,
                         float x, int top, int y, int bottom, Paint paint) {
            Drawable b = getDrawable();
            canvas.save();
            int transY = 0;
            transY = ((bottom-top) - b.getBounds().bottom)/2+top;
            canvas.translate(x, transY);
            b.draw(canvas);
            canvas.restore();
        }
    }

這里要注意营搅,一行文本的話重寫(xiě) ImageSpan的 draw( )方法就行了云挟,但是兩行的話就不行了,還是原先的問(wèn)題转质,這樣的話就需要再重寫(xiě)getSize( )方法了园欣。

水平有限,如果寫(xiě)的有問(wèn)題的話請(qǐng)各位大大不吝賜教休蟹。

參考文章:
Android ImageSpan與TextView中的text居中對(duì)齊問(wèn)題解決
Android ImageSpan的圖文居中對(duì)齊

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末沸枯,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子赂弓,更是在濱河造成了極大的恐慌绑榴,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件盈魁,死亡現(xiàn)場(chǎng)離奇詭異翔怎,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)杨耙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén)赤套,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人珊膜,你說(shuō)我怎么就攤上這事于毙。” “怎么了辅搬?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)脖旱。 經(jīng)常有香客問(wèn)我堪遂,道長(zhǎng),這世上最難降的妖魔是什么萌庆? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任溶褪,我火速辦了婚禮,結(jié)果婚禮上践险,老公的妹妹穿的比我還像新娘猿妈。我一直安慰自己,他們只是感情好巍虫,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布彭则。 她就那樣靜靜地躺著,像睡著了一般占遥。 火紅的嫁衣襯著肌膚如雪俯抖。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,036評(píng)論 1 285
  • 那天瓦胎,我揣著相機(jī)與錄音芬萍,去河邊找鬼尤揣。 笑死,一個(gè)胖子當(dāng)著我的面吹牛柬祠,可吹牛的內(nèi)容都是我干的北戏。 我是一名探鬼主播,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼漫蛔,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼嗜愈!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起惩猫,我...
    開(kāi)封第一講書(shū)人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤芝硬,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后轧房,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體拌阴,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年奶镶,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了迟赃。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡厂镇,死狀恐怖纤壁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情捺信,我是刑警寧澤酌媒,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站迄靠,受9級(jí)特大地震影響秒咨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜掌挚,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一雨席、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧吠式,春花似錦陡厘、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至是目,卻和暖如春罢低,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工网持, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留宜岛,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓功舀,卻偏偏與公主長(zhǎng)得像萍倡,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子辟汰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,509評(píng)論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)列敲、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,024評(píng)論 4 62
  • 前言:這5個(gè)小故事,不僅有趣翩蘸,還富有哲理所意,特別是最后一個(gè),看得我心頭一緊催首,眼眶發(fā)紅扶踊。 1. 《散步》 一女在違背父...
    正好學(xué)拼讀閱讀 457評(píng)論 0 0
  • 最新版本的paragon ntfs for mac的LOGO似乎做了一些變化,像是硬盤(pán)的圖樣郎任,感覺(jué)生動(dòng)了不少秧耗。 這...
    想干啥就干啥閱讀 3,263評(píng)論 1 0
  • 人吃的東西,構(gòu)成了身體的每個(gè)細(xì)胞舶治。同樣分井,經(jīng)歷的人和事,也構(gòu)成了每個(gè)思維的細(xì)胞霉猛。如果杂抽,每天吃健康的食物,人的身體就是...
    遠(yuǎn)黛如眉閱讀 160評(píng)論 0 0