快捷導(dǎo)航

安卓(Android)開(kāi)發(fā)之分享帶文字的圖片

更新時(shí)間：2016年08月05日 10:11:13 投稿：daisy

用過(guò)微信分享SDK的都應(yīng)該知道，微信分享到朋友圈的時(shí)候是不能同時(shí)分享圖片和文字的，只要有縮略圖，那么文字就不會(huì)生效。那么問(wèn)題就來(lái)了，如果我們想把APP內(nèi)的某些內(nèi)容連帶圖片一起分享到微信，是不是沒(méi)辦法了呢？下面一起來(lái)看看怎么解決。

前言

想想我們常用的網(wǎng)易云音樂(lè)，允許我們把歌詞連帶著歌曲的圖片拼在一起變成一張圖，我們?cè)侔堰@張圖片分享出去就好了。

那么，本篇的內(nèi)容就是動(dòng)手做一個(gè)帶文字的圖片。

這里也記錄下上下文，因?yàn)樽隽艘粋€(gè)失物招領(lǐng)的App，當(dāng)有人上交了失物之后，可以將這個(gè)消息分享出去，這個(gè)消息內(nèi)容有物品的信息和圖片，而微信SDK始終無(wú)法做到，就想著把物品信息嵌入到圖片中分享出去，先放一個(gè)效果圖：

這個(gè)分享出去的圖片很簡(jiǎn)單，上面是圖片，下面是文字組合在一起。

先要知道，方案的原理是通過(guò)操作一個(gè)以Bitmap為基礎(chǔ)的Canvas來(lái)做到的，思路很簡(jiǎn)單：

① 讓畫(huà)布作用在Bitmap上

② 在畫(huà)布的上方繪制拍攝所得的圖片

③ 在②所繪制的圖片下面繪制文字

第一步很簡(jiǎn)單，我們只需要構(gòu)造一個(gè)Bitmap并且裝載到Canvas中就可以了，假設(shè)拍攝得到的圖片名為bitmap，則代碼如下：

Bitmap.Config config = bitmap.getConfig();
Bitmap shareBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), config);
Canvas canvas = new Canvas(shareBitmap);

到這里我們就要思考了，這個(gè)圖片的寬高應(yīng)該怎么設(shè)置比較合理呢？上面的代碼設(shè)置為跟拍攝所得圖片一樣，也就是說(shuō)，如果再需要添加文字，文字只能顯示在圖片上。這個(gè)時(shí)候，如果圖片的顏色比較豐富，那么文字疊在上面就會(huì)很難看得清楚了。按照我上面圖片的做法，是在拍攝圖片的下面增加一些空間來(lái)繪制文字，這里要設(shè)置的高度應(yīng)該要更加大一點(diǎn)。而究竟要多大我們等下再討論。

第二步是在畫(huà)布中繪制拍攝所得的圖片，這里就很簡(jiǎn)單了，直接有這樣的代碼：

canvas.drawBitmap(bitmap, 0, 0, paint);

接著是第三步，也是最難的地方。這里不能直接在canvas中直接調(diào)用drawText方法來(lái)繪制文字！為什么？因?yàn)槲覀兊奈淖謨?nèi)容有可能比圖片的寬度要大，當(dāng)文字比圖片更寬的時(shí)候，使用drawText是無(wú)法讓文字內(nèi)容換行的，這樣文字就被截?cái)嗔恕?/p>

解決的方案是使用TextPaint這個(gè)Paint的子類。這個(gè)類還需要配合StaticLayout來(lái)繪制文字，我們看看它的用法：

Paint paint = new Paint();
paint.setColor(Color.BLACK); // 畫(huà)筆顏色
TextPaint textpaint = new TextPaint(paint);
textpaint.setTextSize(textSize); // 文字大小
textpaint.setAntiAlias(true); // 抗鋸齒
StaticLayout title_layout = new StaticLayout(title.getText().toString(), textpaint, sourceBitmapWidth, Layout.Alignment.ALIGN_CENTER, 1f, 1f, true);

直接通過(guò)我們的Paint對(duì)象來(lái)創(chuàng)建一個(gè)TextPaint，接著設(shè)置抗鋸齒和文字大小。接著創(chuàng)建一個(gè)StaticLayout對(duì)象，構(gòu)造方法需要傳入的參數(shù)分別是：文字內(nèi)容、TextPaint對(duì)象、文本寬度、對(duì)齊方式、行距倍數(shù)、行距加數(shù)和是否包含內(nèi)邊距。這里比較重要的地方是設(shè)置文本寬度，當(dāng)文本寬度比這個(gè)值大的時(shí)候就會(huì)自動(dòng)換行。

當(dāng)我們構(gòu)造好了這個(gè)StaticLayout之后，就可以對(duì)畫(huà)布進(jìn)行定位，然后將文字繪制出來(lái)：

canvas.translate(0, sourceBitmapHeight); // 移動(dòng)位置到圖片的下面
title_layout.draw(canvas); // 在畫(huà)布中繪制文字

完成了這幾步之后，Canvas中的Bitmap就會(huì)有圖片和文字了。

但是我們的問(wèn)題其實(shí)還沒(méi)有解決。

① 這個(gè)分享出去的Bitmap的高度究竟是多少呢？上面我們跳過(guò)了這個(gè)問(wèn)題，其實(shí)已經(jīng)有答案了，我們可以讓它的高度為圖片的內(nèi)容加上我們創(chuàng)建的StaticLayout的高度就可以了。這樣圖片的高度會(huì)跟隨文字內(nèi)容的多少變化。獲取StaticLayout的高度比較簡(jiǎn)單：

title_layout.getHeight()

② 這個(gè)時(shí)候，如果我們直接在App中顯示這個(gè)圖片，是沒(méi)有什么問(wèn)題的，但是如果我們把圖片分享到微信，你會(huì)發(fā)現(xiàn)，圖片的文字部分完全變成了黑色，連文字都看不到了。這里的解決辦法也很簡(jiǎn)單，在繪制的時(shí)候，先給整個(gè)圖片繪制一個(gè)白色的背景：

canvas.drawColor(Color.WHITE);

這里就基本完成了，代碼也給出來(lái)大家參考下吧：

// 拍攝所得的圖片為imageBitmap
  private Bitmap getShareingBitmap(int textSize) {
    Bitmap.Config config = imageBitmap.getConfig();
    int sourceBitmapHeight = imageBitmap.getHeight();
    int sourceBitmapWidth = imageBitmap.getWidth();
    Paint paint = new Paint();
    paint.setColor(Color.BLACK); // 畫(huà)筆顏色
    TextPaint textpaint = new TextPaint(paint);
    textpaint.setTextSize(textSize); // 文字大小
    textpaint.setAntiAlias(true); // 抗鋸齒
    StaticLayout title_layout = new StaticLayout(title.getText().toString(), textpaint,
        sourceBitmapWidth, Layout.Alignment.ALIGN_CENTER, 1f, 1f, true);
    StaticLayout desc_layout = new StaticLayout("物品描述："+description.getText().toString(), textpaint,
        sourceBitmapWidth, Layout.Alignment.ALIGN_NORMAL, 1f, 1f, true);
    StaticLayout phone_layout = new StaticLayout("聯(lián)系電話："+phone.getText().toString(), textpaint,
        sourceBitmapWidth, Layout.Alignment.ALIGN_NORMAL, 1f, 1f, true);
    Bitmap share_bitmap = Bitmap.createBitmap(sourceBitmapWidth, sourceBitmapHeight +
        title_layout.getHeight() + desc_layout.getHeight() + phone_layout.getHeight(),
        config);
    Canvas canvas = new Canvas(share_bitmap);
    canvas.drawColor(Color.WHITE);
    canvas.drawBitmap(imageBitmap, 0, 0, paint); // 繪制圖片
    canvas.translate(0, sourceBitmapHeight);
    title_layout.draw(canvas);

    canvas.translate(0, title_layout.getHeight());
    phone_layout.draw(canvas);

    canvas.translate(0, phone_layout.getHeight());
    desc_layout.draw(canvas);
    return share_bitmap;
  }

總結(jié)

先計(jì)算所有文字內(nèi)容的高度，然后構(gòu)建圖片的大小，繪制白色背景，繪制拍攝圖片，在拍攝圖片下繪制文字。以上就是本文的全部?jī)?nèi)容了，希望對(duì)大家開(kāi)發(fā)Android有所幫助。

您可能感興趣的文章: