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 页面

style="position:absolute;top: 0px;left: 12px;margin-bottom: 15px;"/>

    function changeContent(content) {

    document.getElementById('content').innerHTML = content;

}

这个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 = "
            " + content + "
            ";
        }

        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);


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,只是为大家提供了一种更方便的功能,可以按自己喜欢的内容生成更有效的长图。


原文网址:www.jb51.net/article/108839.htm

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏图像识别与深度学习

《Android》Lesson04-Menu

21070
来自专栏Android干货园

Android源码解析--SwipeMenuListView仿QQ聊天左滑

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/50...

15310
来自专栏飞雪无情的博客

Android EditText使用详解-包含很多教程上看不到的功能演示

标题有点大,说是详解,其实就是对EditText的一些常用功能的介绍,包括密码框,电话框,空白提示文字等等的讲解,尽量的介绍详细一点,也就是所谓的详解了。。呵呵

71820
来自专栏非著名程序员

Android实现两个ScrollView互相联动,同步滚动的效果

最近在做一个项目,用到了两个ScrollView互相联动的效果,简单来说联动效果意思就是滑动其中的一个ScrollView另一个ScrollView也一同跟着滑...

31850
来自专栏Android机动车

Android Jetpack 之Navigation Architecture Component使用

activity中fragment默认为NavHostFragment,NavHostFragment通过navGraph与navigation导航编辑器进行关...

44630
来自专栏Android点滴积累

Android 7.0 PopupWindow 又引入新的问题,Google工程师也不够仔细么

Android7.0 PopupWindow的兼容问题 Android7.0 中对 PopupWindow 这个常用的控件又做了一些改动,修复了以前遗留的一些...

288100
来自专栏androidBlog

RecycleView下拉刷新控件的封装(包括下拉刷新和加载更多 )

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

47810
来自专栏Android 技术栈

Android 关于Glide的拓展(高斯模糊、加载监听、圆形图片)

Glide默认开启磁盘缓存和内存缓存,当然也可以对单张图片进行设置特定的缓存策略。 设置图片不加入到内存缓存

1.4K30
来自专栏向治洪

开源组件photoView学习

功能特性  支持放缩超出边界,多点触控和双击事件  滚动和滑动  和ViewPager等能完美兼容  矩阵变化等有回调,方便前台其他展示的改变  单...

21750
来自专栏Android-薛之涛

ViewFlipper-仿淘宝垂直广告滚动

viewflipper的子布局item_viewflipper.xml,下面是效果图,自己写,不会没招。

1.1K20

扫码关注云+社区

领取腾讯云代金券