前言
使用簡書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 頁面
<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頁面的內容很簡單，在整個文檔左上角放置了一個小角標，就是簡書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 final String username = bean.getUsername(); final String publishTime = bean.getPublishTime(); String 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", "//n").replace("/"", "///"").replace("'", "//'") + "/")"); }}這幾個方法是生成長圖最核心的方法。在loadData 方法中首先調用了assembleData，這個方法會根據mHtmlBean 這個對象中的數據拼接出一段 HTML 文檔。在webView的loadUrl 方法中會從本地加載之前定義好的JianShu.html這個頁面。然后在頁面加載完成，即onProgressChanged 回調方法中newProgress 的值等于100時調用updateView方法；這個方法會根據當前設置的模式，設置WebView的背景，如果是夜間模式，則會對assembleData 中生成的文檔外部在添加 一個灰色風格的div標簽，將整個內容包在這個div標簽中，最后WebView執行JS方法 changeContent，傳遞的參數就是之前我們拼接好的內容。這樣整個WebView又會刷新一次，整個WebView的內容就是文章內容了。
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 對象就可以更新當前視圖了，同時可以通過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，只是為大家提供了一種更方便的功能，可以按自己喜歡的內容生成更有效的長圖。
以上所述是小編給大家介紹的Android仿簡書長按文章生成圖片效果，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
