Android仿簡(jiǎn)書長(zhǎng)按文章生成圖片效果
前言
使用簡(jiǎn)書APP的同學(xué)都知道，簡(jiǎn)書有這樣一個(gè)功能；文章頁長(zhǎng)按內(nèi)容時(shí)底部會(huì)出現(xiàn)一個(gè) 生成圖片分享 的按鈕，點(diǎn)擊之后就可以將當(dāng)前的文章生成一張長(zhǎng)圖片；這張圖片可以保存到本地或分享給好友，同時(shí)還可為圖片設(shè)置成為白和黑兩種風(fēng)格，很有藝術(shù)范。個(gè)人一直很喜歡這個(gè)功能。
但是從某一個(gè)版本開始，這個(gè)功能開始有bug了，生成的圖片只有底部的固定標(biāo)題，而沒有文章內(nèi)容，長(zhǎng)圖也變成了小短圖。向簡(jiǎn)書意見反饋后，得到的回復(fù)是，使用點(diǎn)擊分享按鈕生成圖片功能；分享菜單包含的生成長(zhǎng)圖功能的確是可以的。但是，還是很懷念之前長(zhǎng)按生成圖片的功能，所以作為一名程序猿；懷著好奇的心情，決定自己去實(shí)現(xiàn)這樣一個(gè)功能.
效果預(yù)覽
老規(guī)矩，首先看一下實(shí)現(xiàn)后的效果；雖然整體沒有簡(jiǎn)書有范，個(gè)人感覺還是挺像的。
文章頁實(shí)現(xiàn)
內(nèi)容
文章頁內(nèi)容的實(shí)現(xiàn)，沒有什么難點(diǎn)。布局總的來說很簡(jiǎn)單，包含戶信息和文章信息的一個(gè)LinearLayout，外加一個(gè)WebView即可。數(shù)據(jù)是根據(jù)布局中所需的內(nèi)容，封裝了一個(gè)HtmlBean 對(duì)象，而這個(gè)對(duì)象的則是通過使用Jsoup 解析當(dāng)前頁面的HTML文檔內(nèi)容獲得（這里使用Jsoup 方式獲取簡(jiǎn)書網(wǎng)頁內(nèi)容，只是個(gè)人學(xué)習(xí)，沒有其他用意）。具體實(shí)現(xiàn)可查看 源碼
長(zhǎng)按菜單實(shí)現(xiàn)
這里特意說一下，長(zhǎng)按彈出底部按鈕的實(shí)現(xiàn)方式。一般情況下對(duì)于長(zhǎng)按效果的實(shí)現(xiàn)，我們都會(huì)通過設(shè)置View的OnLongClickListene事件去實(shí)現(xiàn)相應(yīng)的功能，但是對(duì)于這里的WebView可以如下實(shí)現(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)聽何時(shí)顯示底部按鈕；同時(shí)在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就會(huì)跳轉(zhuǎn)到生成長(zhǎng)圖的界面，同時(shí)將之前獲取到的HTMLBean對(duì)象傳遞過去。
長(zhǎng)圖效果實(shí)現(xiàn)
這里首先說一下實(shí)現(xiàn)思路（思路來源于 此 ）。
•首先通過WebView加載一個(gè)本地的Html頁面，這個(gè)頁面包含一些固定，定義了一些標(biāo)簽。然后根據(jù)傳遞過來的mHtmlBean 對(duì)象中的信息，通過執(zhí)行JavaScript動(dòng)態(tài)的替換靜態(tài)HTML頁面中的內(nèi)容；
•關(guān)于黑白兩種風(fēng)格的實(shí)現(xiàn)，同樣是WebView執(zhí)行Js，動(dòng)態(tài)替換HTML中CSS 樣式，修改WebView的背景色呈現(xiàn)出兩種不同的UI 效果。
•通過WebView的capturePicture 和Canvas 可以生成出當(dāng)前WebView的Bitmap對(duì)象，有了這個(gè)Bitmap就可以圖片保存的功能了。
好了，下面就通過代碼分別實(shí)現(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>
這個(gè)HTML頁面的內(nèi)容很簡(jiǎn)單，在整個(gè)文檔左上角放置了一個(gè)小角標(biāo)，就是簡(jiǎn)書APP生成長(zhǎng)圖時(shí)的那個(gè)mark.
同時(shí)定義了一個(gè)JavaScript 方法，功能也很簡(jiǎn)單，就是用傳遞的參數(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", "\\n").replace("\"", "\\\"").replace("'", "\\'") + "\")");
}
}
這幾個(gè)方法是生成長(zhǎng)圖最核心的方法。在loadData 方法中首先調(diào)用了assembleData，這個(gè)方法會(huì)根據(jù)mHtmlBean 這個(gè)對(duì)象中的數(shù)據(jù)拼接出一段 HTML 文檔。在webView的loadUrl 方法中會(huì)從本地加載之前定義好的JianShu.html這個(gè)頁面。然后在頁面加載完成，即onProgressChanged 回調(diào)方法中newProgress 的值等于100時(shí)調(diào)用updateView方法；這個(gè)方法會(huì)根據(jù)當(dāng)前設(shè)置的模式，設(shè)置WebView的背景，如果是夜間模式，則會(huì)對(duì)assembleData 中生成的文檔外部在添加 一個(gè)灰色風(fēng)格的div標(biāo)簽，將整個(gè)內(nèi)容包在這個(gè)div標(biāo)簽中，最后WebView執(zhí)行JS方法 changeContent，傳遞的參數(shù)就是之前我們拼接好的內(nèi)容。這樣整個(gè)WebView又會(huì)刷新一次，整個(gè)WebView的內(nèi)容就是文章內(nèi)容了。
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對(duì)象通過上一個(gè)頁面（文章頁）傳遞的mHtmlBean 對(duì)象就可以更新當(dāng)前視圖了，同時(shí)可以通過RadioButton實(shí)現(xiàn)頁面風(fēng)格的切換。
保存圖片
距離我們最后的目標(biāo) 生成長(zhǎng)圖片 ，前面的工作可以說只是完成了50%，因?yàn)榈侥壳盀橹刮覀冎徊贿^是在WebView中把整個(gè)文章內(nèi)容加載出來而已；長(zhǎng)圖還沒有呢。因此，下面的工作就是通過WebView 生成長(zhǎng)圖。
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 很人性化，通過這個(gè)方法，我們就可以獲得當(dāng)前WebView視圖 可見與不可見 部分的Bitmap了。
其實(shí)通過WebView生成圖片并不是一件難事，難得是如何把我們這里的圖片保存下來；因?yàn)槲覀冞@里生成的是長(zhǎng)圖，如下圖所示，這張照片的高度達(dá)到了驚人的。因此這里就要需要之前在 Bitmap 初探 中提到的第一種壓縮方法進(jìn)行文件大小的壓縮了。具體實(shí)現(xiàn)，就不再重復(fù)貼出代碼了，有興趣的同學(xué)可參考文末Github源碼。
到這里，我們就完全實(shí)現(xiàn)了仿照簡(jiǎn)書長(zhǎng)按生成圖片的功能。那么回過頭再來看，這樣一個(gè)功能，為什么在我的手機(jī)上，簡(jiǎn)書APP的長(zhǎng)按功能會(huì)有bug呢。
缺陷
文章詳情頁的WebView是系統(tǒng)自帶的WebView，在加載帶 代碼的文章時(shí)，沒有對(duì)代碼類的內(nèi)容做特殊的解析，因此無法對(duì)代碼高亮顯示。只是最為普通的文本進(jìn)行了顯示，因此生成的長(zhǎng)圖中代碼也是普通文本。簡(jiǎn)書APP還是高大上呀，對(duì)代碼的高亮顯示正是棒棒噠！
后話
一個(gè)偶然的機(jī)會(huì)，在嘗試簡(jiǎn)書長(zhǎng)按生成圖片的功能時(shí)發(fā)現(xiàn)，原來簡(jiǎn)書是通過WebView選擇的區(qū)域生成第二頁的內(nèi)容；因此當(dāng)我在文章頁空白區(qū)域長(zhǎng)按后，點(diǎn)擊生成圖片時(shí)必然是只有空白的，只有底部的一些固定標(biāo)簽。因此，這應(yīng)該不算是一個(gè)bug，只是為大家提供了一種更方便的功能，可以按自己喜歡的內(nèi)容生成更有效的長(zhǎng)圖。
以上所述是小編給大家介紹的Android仿簡(jiǎn)書長(zhǎng)按文章生成圖片效果，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
Android中PopuWindow實(shí)現(xiàn)下拉列表實(shí)例
本篇文章主要介紹了Android中PopuWindow實(shí)現(xiàn)下拉列表實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
Android中通過MediaStore獲取音樂文件信息方法
這篇文章主要介紹了Android中通過MediaStore獲取音樂文件信息方法,本文講解了獲取歌曲的名稱、歌曲的專輯名、歌曲的歌手名、歌曲文件的全路徑、歌曲文件的名稱、歌曲文件的發(fā)行日期等音樂文件信息的方法,需要的朋友可以參考下2015-04-04
Android調(diào)節(jié)屏幕亮度實(shí)現(xiàn)代碼
這篇文章主要介紹了Android調(diào)節(jié)屏幕亮度實(shí)現(xiàn)代碼,調(diào)節(jié)屏幕亮度時(shí),先設(shè)置當(dāng)前activity亮度,再并保存為系統(tǒng)亮度即可,本文分別給出兩個(gè)步驟的實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-05-05
泛型，即?"參數(shù)化類型"，將類型參數(shù)化，可以用在類，接口，方法上。與?Java?一樣，Kotlin?也提供泛型，為類型安全提供保證，消除類型強(qiáng)轉(zhuǎn)的煩惱2022-09-09
Android學(xué)習(xí)教程之2D繪圖基礎(chǔ)及繪制太極圖
這篇文章主要給大家介紹了Android中2D繪圖基礎(chǔ)的相關(guān)資料，文中介紹了繪圖的基礎(chǔ)內(nèi)容，以及通過Canvas和Paint實(shí)現(xiàn)繪制太極圖的詳細(xì)過程，對(duì)各位Android新手開發(fā)者們具有一定的參考價(jià)值，需要的朋友下面來一起看看吧。2017-04-04
Android中關(guān)于相對(duì)布局RelativeLayout的技巧匯總
RelativeLayout是相對(duì)布局控件，以控件之間相對(duì)位置或相對(duì)父容器位置進(jìn)行排列。下面這篇文章主要給大家介紹了關(guān)于Android中相對(duì)布局RelativeLayout的一些技巧，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
flutter 微信聊天輸入框功能實(shí)現(xiàn)
這篇文章主要介紹了flutter 微信聊天輸入框功能實(shí)現(xiàn),本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
Android布局技巧之include、merge與ViewStub標(biāo)簽的巧用
Android 官方提供了三個(gè)用來優(yōu)化布局的標(biāo)簽，分別是include、merge與ViewStub，下面這篇文章主要給大家介紹了關(guān)于Android布局技巧之include、merge與ViewStub標(biāo)簽巧用的相關(guān)資料，需要的朋友可以參考下2018-06-06
Android中獲取網(wǎng)頁表單中的數(shù)據(jù)實(shí)現(xiàn)思路及代碼
在Android中獲取網(wǎng)頁里表單中的數(shù)據(jù)具體實(shí)現(xiàn)代碼如下，感興趣的各位可以參考過下哈，希望對(duì)大家有所幫助2013-06-06
FrameLayout和Fragment處理Android應(yīng)用UI布局實(shí)例
這篇文章主要介紹了FrameLayout和Fragment處理Android應(yīng)用UI布局實(shí)例,安卓3.0以后Fragment的出現(xiàn)為多尺寸屏幕的適配帶來了方便,需要的朋友可以參考下2016-02-02