Android仿简书长按文章生成图片效果

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

使用简书APP的同学都知道，简书有这样一个功能；文章页长按内容时底部会出现一个生成图片分享的按钮，点击之后就可以将当前的文章生成一张长图片；这张图片可以保存到本地或分享给好友，同时还可为图片设置成为白和黑两种风格，很有艺术范

前言

使用简书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 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，这个方法会根据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仿简书长按文章生成图片效果，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

Android中PopuWindow实现下拉列表实例
本篇文章主要介绍了Android中PopuWindow实现下拉列表实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
Android中通过MediaStore获取音乐文件信息方法
这篇文章主要介绍了Android中通过MediaStore获取音乐文件信息方法,本文讲解了获取歌曲的名称、歌曲的专辑名、歌曲的歌手名、歌曲文件的全路径、歌曲文件的名称、歌曲文件的发行日期等音乐文件信息的方法,需要的朋友可以参考下
2015-04-04
Android调节屏幕亮度实现代码
这篇文章主要介绍了Android调节屏幕亮度实现代码,调节屏幕亮度时,先设置当前activity亮度,再并保存为系统亮度即可,本文分别给出两个步骤的实现代码,需要的朋友可以参考下
2015-05-05
Kotlin泛型的使用介绍
泛型，即 "参数化类型"，将类型参数化，可以用在类，接口，方法上。与 Java 一样，Kotlin 也提供泛型，为类型安全提供保证，消除类型强转的烦恼
2022-09-09
Android学习教程之2D绘图基础及绘制太极图
这篇文章主要给大家介绍了Android中2D绘图基础的相关资料，文中介绍了绘图的基础内容，以及通过Canvas和Paint实现绘制太极图的详细过程，对各位Android新手开发者们具有一定的参考价值，需要的朋友下面来一起看看吧。
2017-04-04
Android中关于相对布局RelativeLayout的技巧汇总
RelativeLayout是相对布局控件，以控件之间相对位置或相对父容器位置进行排列。下面这篇文章主要给大家介绍了关于Android中相对布局RelativeLayout的一些技巧，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-02-02
flutter 微信聊天输入框功能实现
这篇文章主要介绍了flutter 微信聊天输入框功能实现,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
Android布局技巧之include、merge与ViewStub标签的巧用
Android 官方提供了三个用来优化布局的标签，分别是include、merge与ViewStub，下面这篇文章主要给大家介绍了关于Android布局技巧之include、merge与ViewStub标签巧用的相关资料，需要的朋友可以参考下
2018-06-06
Android中获取网页表单中的数据实现思路及代码
在Android中获取网页里表单中的数据具体实现代码如下，感兴趣的各位可以参考过下哈，希望对大家有所帮助
2013-06-06
FrameLayout和Fragment处理Android应用UI布局实例
这篇文章主要介绍了FrameLayout和Fragment处理Android应用UI布局实例,安卓3.0以后Fragment的出现为多尺寸屏幕的适配带来了方便,需要的朋友可以参考下
2016-02-02

Android仿简书长按文章生成图片效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具