这篇文章将为大家详细讲解有关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开发中怎么实现一个长按将文章生成图片的功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
