Android仿簡書長按文章生成圖片效果

更新時間：2017年03月19日 11:39:46 投稿：mrr

使用簡書APP的同學都知道，簡書有這樣一個功能；文章頁長按內容時底部會出現(xiàn)一個生成圖片分享的按鈕，點擊之后就可以將當前的文章生成一張長圖片；這張圖片可以保存到本地或分享給好友，同時還可為圖片設置成為白和黑兩種風格，很有藝術范

前言

使用簡書APP的同學都知道，簡書有這樣一個功能；文章頁長按內容時底部會出現(xiàn)一個生成圖片分享的按鈕，點擊之后就可以將當前的文章生成一張長圖片；這張圖片可以保存到本地或分享給好友，同時還可為圖片設置成為白和黑兩種風格，很有藝術范。個人一直很喜歡這個功能。

但是從某一個版本開始，這個功能開始有bug了，生成的圖片只有底部的固定標題，而沒有文章內容，長圖也變成了小短圖。向簡書意見反饋后，得到的回復是，使用點擊分享按鈕生成圖片功能；分享菜單包含的生成長圖功能的確是可以的。但是，還是很懷念之前長按生成圖片的功能，所以作為一名程序猿；懷著好奇的心情，決定自己去實現(xiàn)這樣一個功能.

效果預覽

老規(guī)矩，首先看一下實現(xiàn)后的效果；雖然整體沒有簡書有范，個人感覺還是挺像的。

文章頁實現(xiàn)

內容

文章頁內容的實現(xiàn)，沒有什么難點。布局總的來說很簡單，包含戶信息和文章信息的一個LinearLayout，外加一個WebView即可。數(shù)據(jù)是根據(jù)布局中所需的內容，封裝了一個HtmlBean 對象，而這個對象的則是通過使用Jsoup 解析當前頁面的HTML文檔內容獲得（這里使用Jsoup 方式獲取簡書網(wǎng)頁內容，只是個人學習，沒有其他用意）。具體實現(xiàn)可查看源碼

長按菜單實現(xiàn)

這里特意說一下，長按彈出底部按鈕的實現(xiàn)方式。一般情況下對于長按效果的實現(xiàn)，我們都會通過設置View的OnLongClickListene事件去實現(xiàn)相應的功能，但是對于這里的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, "再次點擊文章可隱藏圖片分享");
      }
    });
    // 點擊隱藏底部按鈕
    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);
      }
    });

點擊底部的Button就會跳轉到生成長圖的界面，同時將之前獲取到的HTMLBean對象傳遞過去。

長圖效果實現(xiàn)

這里首先說一下實現(xiàn)思路（思路來源于此）。

•首先通過WebView加載一個本地的Html頁面，這個頁面包含一些固定，定義了一些標簽。然后根據(jù)傳遞過來的mHtmlBean 對象中的信息，通過執(zhí)行JavaScript動態(tài)的替換靜態(tài)HTML頁面中的內容；

•關于黑白兩種風格的實現(xiàn)，同樣是WebView執(zhí)行Js，動態(tài)替換HTML中CSS 樣式，修改WebView的背景色呈現(xiàn)出兩種不同的UI 效果。

•通過WebView的capturePicture 和Canvas 可以生成出當前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頁面的內容很簡單，在整個文檔左上角放置了一個小角標，就是簡書APP生成長圖時的那個mark.

同時定義了一個JavaScript 方法，功能也很簡單，就是用傳遞的參數(shù)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 = "<div style=\"color: gray;display: inline;\">" + content + "</div>";
    }
    webView.loadUrl("javascript:changeContent(\"" + content.replace("\n", "\\n").replace("\"", "\\\"").replace("'", "\\'") + "\")");
  }
}

這幾個方法是生成長圖最核心的方法。在loadData 方法中首先調用了assembleData，這個方法會根據(jù)mHtmlBean 這個對象中的數(shù)據(jù)拼接出一段 HTML 文檔。在webView的loadUrl 方法中會從本地加載之前定義好的JianShu.html這個頁面。然后在頁面加載完成，即onProgressChanged 回調方法中newProgress 的值等于100時調用updateView方法；這個方法會根據(jù)當前設置的模式，設置WebView的背景，如果是夜間模式，則會對assembleData 中生成的文檔外部在添加一個灰色風格的div標簽，將整個內容包在這個div標簽中，最后WebView執(zhí)行JS方法 changeContent，傳遞的參數(shù)就是之前我們拼接好的內容。這樣整個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實現(xiàn)頁面風格的切換。

保存圖片

距離我們最后的目標生成長圖片，前面的工作可以說只是完成了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 初探中提到的第一種壓縮方法進行文件大小的壓縮了。具體實現(xiàn)，就不再重復貼出代碼了，有興趣的同學可參考文末Github源碼。

到這里，我們就完全實現(xiàn)了仿照簡書長按生成圖片的功能。那么回過頭再來看，這樣一個功能，為什么在我的手機上，簡書APP的長按功能會有bug呢。

缺陷

文章詳情頁的WebView是系統(tǒng)自帶的WebView，在加載帶代碼的文章時，沒有對代碼類的內容做特殊的解析，因此無法對代碼高亮顯示。只是最為普通的文本進行了顯示，因此生成的長圖中代碼也是普通文本。簡書APP還是高大上呀，對代碼的高亮顯示正是棒棒噠！

后話

一個偶然的機會，在嘗試簡書長按生成圖片的功能時發(fā)現(xiàn)，原來簡書是通過WebView選擇的區(qū)域生成第二頁的內容；因此當我在文章頁空白區(qū)域長按后，點擊生成圖片時必然是只有空白的，只有底部的一些固定標簽。因此，這應該不算是一個bug，只是為大家提供了一種更方便的功能，可以按自己喜歡的內容生成更有效的長圖。

以上所述是小編給大家介紹的Android仿簡書長按文章生成圖片效果，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

您可能感興趣的文章:

Android中PopuWindow實現(xiàn)下拉列表實例
本篇文章主要介紹了Android中PopuWindow實現(xiàn)下拉列表實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Android中通過MediaStore獲取音樂文件信息方法
這篇文章主要介紹了Android中通過MediaStore獲取音樂文件信息方法,本文講解了獲取歌曲的名稱、歌曲的專輯名、歌曲的歌手名、歌曲文件的全路徑、歌曲文件的名稱、歌曲文件的發(fā)行日期等音樂文件信息的方法,需要的朋友可以參考下
2015-04-04
Android調節(jié)屏幕亮度實現(xiàn)代碼
這篇文章主要介紹了Android調節(jié)屏幕亮度實現(xiàn)代碼,調節(jié)屏幕亮度時,先設置當前activity亮度,再并保存為系統(tǒng)亮度即可,本文分別給出兩個步驟的實現(xiàn)代碼,需要的朋友可以參考下
2015-05-05
Kotlin泛型的使用介紹
泛型，即?"參數(shù)化類型"，將類型參數(shù)化，可以用在類，接口，方法上。與?Java?一樣，Kotlin?也提供泛型，為類型安全提供保證，消除類型強轉的煩惱
2022-09-09
Android學習教程之2D繪圖基礎及繪制太極圖
這篇文章主要給大家介紹了Android中2D繪圖基礎的相關資料，文中介紹了繪圖的基礎內容，以及通過Canvas和Paint實現(xiàn)繪制太極圖的詳細過程，對各位Android新手開發(fā)者們具有一定的參考價值，需要的朋友下面來一起看看吧。
2017-04-04
Android中關于相對布局RelativeLayout的技巧匯總
RelativeLayout是相對布局控件，以控件之間相對位置或相對父容器位置進行排列。下面這篇文章主要給大家介紹了關于Android中相對布局RelativeLayout的一些技巧，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02
flutter 微信聊天輸入框功能實現(xiàn)
這篇文章主要介紹了flutter 微信聊天輸入框功能實現(xiàn),本文通過實例圖文相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-03-03
Android布局技巧之include、merge與ViewStub標簽的巧用
Android 官方提供了三個用來優(yōu)化布局的標簽，分別是include、merge與ViewStub，下面這篇文章主要給大家介紹了關于Android布局技巧之include、merge與ViewStub標簽巧用的相關資料，需要的朋友可以參考下
2018-06-06
Android中獲取網(wǎng)頁表單中的數(shù)據(jù)實現(xiàn)思路及代碼
在Android中獲取網(wǎng)頁里表單中的數(shù)據(jù)具體實現(xiàn)代碼如下，感興趣的各位可以參考過下哈，希望對大家有所幫助
2013-06-06
FrameLayout和Fragment處理Android應用UI布局實例
這篇文章主要介紹了FrameLayout和Fragment處理Android應用UI布局實例,安卓3.0以后Fragment的出現(xiàn)為多尺寸屏幕的適配帶來了方便,需要的朋友可以參考下
2016-02-02