溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Android開發中怎么實現一個長按將文章生成圖片的功能，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
長按菜單實現
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"
/>
<article id="content" ></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 title = bean.getTitle();
final String username = bean.getUsername();
final String publishTime = bean.getPublishTime();
String Title = "<h3>" + title + "</h3>";
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的內容就是文章內容了。
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);
/**
* @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開發中怎么實現一個長按將文章生成圖片的功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
