前言
使用簡書APP的同學(xué)都知道，簡書有這樣一個功能；文章頁長按內(nèi)容時底部會出現(xiàn)一個 生成圖片分享 的按鈕，點(diǎn)擊之后就可以將當(dāng)前的文章生成一張長圖片；這張圖片可以保存到本地或分享給好友，同時還可為圖片設(shè)置成為白和黑兩種風(fēng)格，很有藝術(shù)范。個人一直很喜歡這個功能。
但是從某一個版本開始，這個功能開始有bug了，生成的圖片只有底部的固定標(biāo)題，而沒有文章內(nèi)容，長圖也變成了小短圖。向簡書意見反饋后，得到的回復(fù)是，使用點(diǎn)擊分享按鈕生成圖片功能；分享菜單包含的生成長圖功能的確是可以的。但是，還是很懷念之前長按生成圖片的功能，所以作為一名程序猿；懷著好奇的心情，決定自己去實現(xiàn)這樣一個功能.
效果預(yù)覽
老規(guī)矩，首先看一下實現(xiàn)后的效果；雖然整體沒有簡書有范，個人感覺還是挺像的。
文章頁實現(xiàn)
內(nèi)容
文章頁內(nèi)容的實現(xiàn)，沒有什么難點(diǎn)。布局總的來說很簡單，包含戶信息和文章信息的一個LinearLayout，外加一個WebView即可。數(shù)據(jù)是根據(jù)布局中所需的內(nèi)容，封裝了一個HtmlBean 對象，而這個對象的則是通過使用Jsoup 解析當(dāng)前頁面的HTML文檔內(nèi)容獲得（這里使用Jsoup 方式獲取簡書網(wǎng)頁內(nèi)容，只是個人學(xué)習(xí)，沒有其他用意）。具體實現(xiàn)可查看 源碼
長按菜單實現(xiàn)
這里特意說一下，長按彈出底部按鈕的實現(xiàn)方式。一般情況下對于長按效果的實現(xiàn)，我們都會通過設(shè)置View的OnLongClickListene事件去實現(xiàn)相應(yīng)的功能，但是對于這里的WebView可以如下實現(xiàn)：
mWebView.setOnCreateContextMenuListener(new View.OnCreateContextMenuListener() { @Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) { genImg.setVisibility(View.VISIBLE); T.showSToast(mContext, "再次點(diǎn)擊文章可隱藏圖片分享"); } }); // 點(diǎn)擊隱藏底部按鈕 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; } });這里通過監(jiān)聽WebView的ContextMenu 監(jiān)聽何時顯示底部按鈕；同時在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); } });點(diǎn)擊底部的Button就會跳轉(zhuǎn)到生成長圖的界面，同時將之前獲取到的HTMLBean對象傳遞過去。
長圖效果實現(xiàn)
這里首先說一下實現(xiàn)思路（思路來源于 此 ）。
•首先通過WebView加載一個本地的Html頁面，這個頁面包含一些固定，定義了一些標(biāo)簽。然后根據(jù)傳遞過來的mHtmlBean 對象中的信息，通過執(zhí)行JavaScript動態(tài)的替換靜態(tài)HTML頁面中的內(nèi)容；
•關(guān)于黑白兩種風(fēng)格的實現(xiàn)，同樣是WebView執(zhí)行Js，動態(tài)替換HTML中CSS 樣式，修改WebView的背景色呈現(xiàn)出兩種不同的UI 效果。
•通過WebView的capturePicture 和Canvas 可以生成出當(dāng)前WebView的Bitmap對象，有了這個Bitmap就可以圖片保存的功能了。
好了，下面就通過代碼分別實現(xiàn)上述步驟。
Html 頁面
<html><head> <meta charset="utf-8"/></head><body><img src="mark.png" width="13px" height="20px" style="position:absolute;top: 0px;left: 12px;margin-bottom: 15px;"/><article id="content" style="margin: 25px;"></article><script type="text/javascript"> function changeContent(content) { document.getElementById('content').innerHTML = content; }</script></body></html>這個HTML頁面的內(nèi)容很簡單，在整個文檔左上角放置了一個小角標(biāo)，就是簡書APP生成長圖時的那個mark.
同時定義了一個JavaScript 方法，功能也很簡單，就是用傳遞的參數(shù)content替換article標(biāo)簽中的文檔內(nèi)容。
自定義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 = "<div style=/"color: gray;display: inline;/">" + content + "</div>"; } webView.loadUrl("javascript:changeContent(/"" + content.replace("/n", "http://n").replace("/"", "http:///"").replace("'", "http://'") + "/")"); }}這幾個方法是生成長圖最核心的方法。在loadData 方法中首先調(diào)用了assembleData，這個方法會根據(jù)mHtmlBean 這個對象中的數(shù)據(jù)拼接出一段 HTML 文檔。在webView的loadUrl 方法中會從本地加載之前定義好的JianShu.html這個頁面。然后在頁面加載完成，即onProgressChanged 回調(diào)方法中newProgress 的值等于100時調(diào)用updateView方法；這個方法會根據(jù)當(dāng)前設(shè)置的模式，設(shè)置WebView的背景，如果是夜間模式，則會對assembleData 中生成的文檔外部在添加 一個灰色風(fēng)格的div標(biāo)簽，將整個內(nèi)容包在這個div標(biāo)簽中，最后WebView執(zhí)行JS方法 changeContent，傳遞的參數(shù)就是之前我們拼接好的內(nèi)容。這樣整個WebView又會刷新一次，整個WebView的內(nèi)容就是文章內(nèi)容了。
GenScreenShotActivitymFakeWebView = (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); /** * @param mode */ public void setMode(@ViewMode int mode) { this.mode = mode; updateView(); }這樣在Activity中，mFakeWebView對象通過上一個頁面（文章頁）傳遞的mHtmlBean 對象就可以更新當(dāng)前視圖了，同時可以通過RadioButton實現(xiàn)頁面風(fēng)格的切換。
保存圖片
距離我們最后的目標(biāo) 生成長圖片 ，前面的工作可以說只是完成了50%，因為到目前為止我們只不過是在WebView中把整個文章內(nèi)容加載出來而已；長圖還沒有呢。因此，下面的工作就是通過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 很人性化，通過這個方法，我們就可以獲得當(dāng)前WebView視圖 可見與不可見 部分的Bitmap了。
其實通過WebView生成圖片并不是一件難事，難得是如何把我們這里的圖片保存下來；因為我們這里生成的是長圖，如下圖所示，這張照片的高度達(dá)到了驚人的。因此這里就要需要之前在 Bitmap 初探 中提到的第一種壓縮方法進(jìn)行文件大小的壓縮了。具體實現(xiàn)，就不再重復(fù)貼出代碼了，有興趣的同學(xué)可參考文末Github源碼。
到這里，我們就完全實現(xiàn)了仿照簡書長按生成圖片的功能。那么回過頭再來看，這樣一個功能，為什么在我的手機(jī)上，簡書APP的長按功能會有bug呢。
缺陷
文章詳情頁的WebView是系統(tǒng)自帶的WebView，在加載帶 代碼的文章時，沒有對代碼類的內(nèi)容做特殊的解析，因此無法對代碼高亮顯示。只是最為普通的文本進(jìn)行了顯示，因此生成的長圖中代碼也是普通文本。簡書APP還是高大上呀，對代碼的高亮顯示正是棒棒噠！
后話
一個偶然的機(jī)會，在嘗試簡書長按生成圖片的功能時發(fā)現(xiàn)，原來簡書是通過WebView選擇的區(qū)域生成第二頁的內(nèi)容；因此當(dāng)我在文章頁空白區(qū)域長按后，點(diǎn)擊生成圖片時必然是只有空白的，只有底部的一些固定標(biāo)簽。因此，這應(yīng)該不算是一個bug，只是為大家提供了一種更方便的功能，可以按自己喜歡的內(nèi)容生成更有效的長圖。
以上所述是小編給大家介紹的Android仿簡書長按文章生成圖片效果，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
新聞熱點(diǎn)
疑難解答
圖片精選
