文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android开发中怎么实现一个长按将文章生成图片的功能

2023-05-31 08:46

关注

这篇文章将为大家详细讲解有关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的内容就是文章内容了。

GenScreenShotActivitymFakeWebView = (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);     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开发中怎么实现一个长按将文章生成图片的功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯