前言
使用簡書APP的同學都知道，簡書有這樣一個功能：文章頁長按內容時底部會出現一個 生成圖片分享 的按鈕，點選之後就可以將當前的文章生成一張長圖片，這張圖片可以儲存到本地或分享給好友，同時還可為圖片設定成為白和黑兩種風格，很有藝術範。個人一直很喜歡這個功能。
但是從某一個版本開始，這個功能開始有bug了，生成的圖片只有底部的固定標題，而沒有文章內容，長圖也變成了小短圖。向簡書意見反饋後，得到的回覆是，使用點選分享按鈕生成圖片功能；分享選單包含的生成長圖功能的確是可以的。但是，還是很懷念之前長按生成圖片的功能，所以作為一名程式猿；懷著好奇的心情，決定自己去實現這樣一個功能.
效果預覽
老規矩，首先看一下實現後的效果；雖然整體沒有簡書有範，個人感覺還是挺像的。
文章頁實現
內容
文章頁內容的實現，沒有什麼難點。佈局總的來說很簡單，包含戶資訊和文章資訊的一個LinearLayout，外加一個WebView即可。資料是根據佈局中所需的內容，封裝了一個HtmlBean 物件，而這個物件的則是通過使用Jsoup 解析當前頁面的HTML文件內容獲得（這裡使用Jsoup 方式獲取簡書網頁內容，只是個人學習，沒有其他用意）。具體實現可檢視 原始碼
長按選單實現
這裡特意說一下，長按彈出底部按鈕的實現方式。一般情況下對於長按效果的實現，我們都會通過設定View的OnLongClickListene事件去實現相應的功能，但是對於這裡的WebView可以如下實現：
mWebView.setOnCreateContextMenuListener(new View.OnCreateContextMenuListener() {
@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
genImg.setVisibility(View.VISIBLE);
T.showSToast(mContext, "再次點選文章可隱藏圖片分享");
}
});
複製程式碼// 點選隱藏底部按鈕
mWebView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
lastTime = SystemClock.uptimeMillis();
break;
case MotionEvent.ACTION_UP:
if (SystemClock.uptimeMillis() - lastTime < 300) {
genImg.setVisibility(View.GONE);
}
break;
}
return false;
}
});
複製程式碼這裡通過監聽WebView的ContextMenu 監聽何時顯示底部按鈕；同時在onTouch方法中隱藏底部按鈕。
genImg.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
genImg.setVisibility(View.INVISIBLE);
Intent intent = new Intent(FakeJianShuActivity.this, GenScreenShotActivity.class);
intent.putExtra("data", mHtmlBean);
startActivity(intent);
}
});
複製程式碼點選底部的Button就會跳轉到生成長圖的介面，同時將之前獲取到的HTMLBean物件傳遞過去。
長圖效果實現
這裡首先說一下實現思路（思路來源於 此 ）。
-
首先通過WebView載入一個本地的Html頁面，這個頁面包含一些固定，定義了一些標籤。然後根據傳遞過來的mHtmlBean 物件中的資訊，通過執行JavaScript動態的替換靜態HTML頁面中的內容；
-
關於黑白兩種風格的實現，同樣是WebView執行Js，動態替換HTML中CSS 樣式，修改WebView的背景色呈現出兩種不同的UI 效果。
-
通過WebView的capturePicture 和Canvas 可以生成出當前WebView的Bitmap物件，有了這個Bitmap就可以圖片儲存的功能了。
好了，下面就通過程式碼分別實現上述步驟。
Html 頁面
style="position:absolute;top: 0px;left: 12px;margin-bottom: 15px;"/>
function changeContent(content) {
document.getElementById('content').innerHTML = content;
}
複製程式碼這個HTML頁面的內容很簡單，在整個文件左上角放置了一個小角標，就是簡書APP生成長圖時的那個mark.
同時定義了一個JavaScript 方法，功能也很簡單，就是用傳遞的引數content替換article標籤中的文件內容。
自定義WebView
為了方便，我們自定義WebView，這裡看一下核心邏輯：
public class FakeWebView extends WebView {
private boolean isFirstLoad = false;
public void loadData(HtmlBean bean) {
assembleData(bean);
if (Build.VERSION.SDK_INT >= 21) {
isFirstLoad = true;
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
if (newProgress == 100) {
if (isFirstLoad) {
isFirstLoad = false;
Log.e("TAG", "onProgressChanged");
updateView();
}
}
}
});
} else {
isFirstLoad = true;
webView.setVisibility(View.INVISIBLE);
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
if (newProgress == 100) {
updateView();
if (!isFirstLoad)
webView.setVisibility(View.VISIBLE);
}
}
});
}
webView.loadUrl("file:///android_asset/JianShu.html");
}
private void assembleData(HtmlBean bean) {
final String data = bean.getContent();
final String title = bean.getTitle();
final String username = bean.getUsername();
final String publishTime = bean.getPublishTime();
String title = "<h2>"+title+"</h2>";
String Footer ="<p>"+username+"</p><p>"+publishTime+"</p>";
content = Title + data + Footer;
}
public void updateView() {
if (mode == MODE_DAY) {
webView.setBackgroundColor(Color.WHITE);
} else {
webView.setBackgroundColor(Color.parseColor("#263238"));
content = "
" + content + "
";
}
webView.loadUrl(
"javascript:changeContent(\"" + content.replace("\n", "\\n").replace("\"", "\\\"").replace("'", "\\'") + "\")");
}
}
複製程式碼這幾個方法是生成長圖最核心的方法。在loadData 方法中首先呼叫了assembleData，這個方法會根據mHtmlBean 這個物件中的資料拼接出一段 HTML 文件。在webView的loadUrl 方法中會從本地載入之前定義好的JianShu.html這個頁面。然後在頁面載入完成，即onProgressChanged 回撥方法中newProgress 的值等於100時呼叫updateView方法；這個方法會根據當前設定的模式，設定WebView的背景，如果是夜間模式，則會對assembleData 中生成的文件外部在新增 一個灰色風格的div標籤，將整個內容包在這個div標籤中，最後WebView執行JS方法 changeContent，傳遞的引數就是之前我們拼接好的內容。這樣整個WebView又會重新整理一次，整個WebView的內容就是文章內容了。
GenScreenShotActivity程式碼如下：
mFakeWebView = (FakeWebView) findViewById(R.id.fakeWebView);
bean = (HtmlBean) getIntent().getSerializableExtra("data");
RadioGroup changeMode = (RadioGroup) findViewById(R.id.changeMode);
changeMode.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
if (checkedId == R.id.rb_day) {
mFakeWebView.setMode(FakeWebView.MODE_DAY);
} else {
mFakeWebView.setMode(FakeWebView.MODE_NIGHT);
}
}
});
mFakeWebView.loadData(bean);
public void setMode(@ViewMode int mode) {
this.mode = mode;
updateView();
}
複製程式碼這樣在Activity中，mFakeWebView物件通過上一個頁面（文章頁）傳遞的mHtmlBean 物件就可以更新當前檢視了，同時可以通過RadioButton實現頁面風格的切換。
儲存圖片
距離我們最後的目標 生成長圖片 ，前面的工作可以說只是完成了50%，因為到目前為止我們只不過是在WebView中把整個文章內容載入出來而已；長圖還沒有呢。因此，下面的工作就是通過WebView 生成長圖。
public Bitmap getScreenView(){
Picture snapShot = webView.capturePicture();
Bitmap bmp = Bitmap.createBitmap(snapShot.getWidth(),snapShot.getHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bmp);
snapShot.draw(canvas);
return bmp;
}
複製程式碼WebVeiw 很人性化，通過這個方法，我們就可以獲得當前WebView檢視 可見與不可見 部分的Bitmap了。
其實通過WebView生成圖片並不是一件難事，難得是如何把我們這裡的圖片儲存下來；因為我們這裡生成的是長圖，如下圖所示，這張照片的高度達到了驚人的。因此這裡就要需要之前在 Bitmap 初探 中提到的第一種壓縮方法進行檔案大小的壓縮了。具體實現，就不再重複貼出程式碼了，有興趣的同學可參考 Github原始碼 。
到這裡，我們就完全實現了仿照簡書長按生成圖片的功能。那麼回過頭再來看，這樣一個功能，為什麼在我的手機上，簡書APP的長按功能會有bug呢。
缺陷
文章詳情頁的WebView是系統自帶的WebView，在載入帶 程式碼的文章時，沒有對程式碼類的內容做特殊的解析，因此無法對程式碼高亮顯示。只是最為普通的文字進行了顯示，因此生成的長圖中程式碼也是普通文字。簡書APP還是高大上呀，對程式碼的高亮顯示正是棒棒噠！
後話
一個偶然的機會，在嘗試簡書長按生成圖片的功能時發現，原來簡書是通過WebView選擇的區域生成第二頁的內容；因此當我在文章頁空白區域長按後，點選生成圖片時必然是隻有空白的，只有底部的一些固定標籤。因此，這應該不算是一個bug，只是為大家提供了一種更方便的功能，可以按自己喜歡的內容生成更有效的長圖。