Android仿简书长按文章生成图片效果
前言
使用简书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仿简书长按文章生成图片效果，希望对大家有所帮助