先来看看今日效果:

效果一	效果二	效果三
p9-juejin.byteimg.com/tos-cn-i-k3…	p3-juejin.byteimg.com/tos-cn-i-k3…	p3-juejin.byteimg.com/tos-cn-i-k3…

数据来源

要想跑必须先学会走路,先来分析一下数据来源吧

var title:String = """
        <p><span style="font-size:18px">Android</span></p >
        <img src="https://c-ssl.duitang.com/uploads/item/201805/11/20180511145849_UkyGR.jpeg"  />
        
        <p><span style="font-size:18px">kotlin</span></p >
        <img src="https://images1.h128.com/upload/201908/24/201908242352201698.jpg?imageMogr2/auto-orient/thumbnail/787x/blur/1x0/quality/100"  />
        
        <p><span style="font-size:18px">C/C++</span></p >
        <img src="https://images1.h128.com/upload/201908/24/201908242353068534.jpg?imageMogr2/auto-orient/thumbnail/787x/blur/1x0/quality/100"  />
        
        <p><span style="font-size:18px">dart</span></p >
        <img src="https://images1.h128.com/upload/201908/24/201908242355285318.jpg?imageMogr2/auto-orient/thumbnail/787x/blur/1x0/quality/100" />
  
   <p><span style="font-size:18px">html</span></p >
        <img src="https://b-ssl.duitang.com/uploads/item/201708/04/20170804211410_i4myh.thumb.700_0.png"  />
    """.trimIndent()

根据上一章介绍的先把数据展示出来:

效果图:

p9-juejin.byteimg.com/tos-cn-i-k3…

可以看出,图片太大了,接下来适配图片大小

var format =
        """<head>
            <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no'>
             <style>img{max-width: 100%; width:auto; height:auto;}</style></head> $title"""

将 title 数据使用这一行标签声明一下即可

<head><head/>标签内的属性意思是适配手机大小.具体用法还得问html 的小伙伴,这行代码我从我们项目中拷贝出来的!

在来看看效果:

p6-juejin.byteimg.com/tos-cn-i-k3…

Android 对 WebView 图片监听


var format =
        """<head>
            <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no'>
             <style>img{max-width: 100%; width:auto; height:auto;}</style>
             
             <script>
                function callAndroid(url){
                        test.hello(getImages(),url);
                }
                function getImages(){      
                     var objs = document.getElementsByTagName("img");
                     var imgScr = '';       
                     for(var i=0;i<objs.length;i++){
                         if(i!=0){imgScr += '----'
                     }       
                     imgScr = imgScr + objs[i].src;
                  };
                    return imgScr;
                };
    </script></head>
        ${title.replace("<img", "<img onClick=\"callAndroid(this.src)\"")}"""

辅助图:

效果一

分析: 效果一比较简单,点击哪一张图片就加载哪一张即可

//h5 回调
inner class AndroidToJs {
        // 定义JS需要调用的方法
        // 被JS调用的方法必须加入@JavascriptInterface注解
        @JavascriptInterface
        fun hello(urls: String, msg: String) {
            //弹出单个图片
            showImage(msg)

            //弹出多个图片
//            showImages(urls, msg)
        }
    }

//单个照片弹出
    private fun showImage(msg: String) {
        val view = LayoutInflater.from(this).inflate(R.layout.dialog_item, null, false)
        val image = view.findViewById<ImageView>(R.id.image)

        //设置图片(Glide 加载的)
        setUrl(msg, image)

        //用 Dialog 显示
        showDialog(view)
    }

    //显示 Dialog
    private fun showDialog(view: View) {
        val dialog = SwitchDialogFragment(view, "美女来啦~", this)

        dialog.show(supportFragmentManager, dialog.tag)

        //左侧右侧按钮隐藏
        dialog.setLeftVisibility(true)
        dialog.setRightVisibility(true)

        //显示动画
        dialog.setDialogAnimation(true)
    }

辅助图:

SwitchDialogFragment可以参考我的上一章博客:DialogFragment 生命周期及封装

在来看看效果图吧:

p9-juejin.byteimg.com/tos-cn-i-k3…

效果图二

分析:

效果图二也是弹出的DialogFragment,中间的公共布局加载的 ViewPager. 绑定的适配器PagerAdapter

ViewPager适配器参考文档

代码:

 //多个页面
    private fun showImages(urls: String, msg: String) {
        val view = LayoutInflater.from(this).inflate(R.layout.view_pager_layout, null, false)

        //获取 ViewPager 需要添加的 View
        val list = getViews(urls, msg)

        //初始化多图片 ViewPager
        initViewPager(view, list.first,list.second)

        //弹出 DialogFragment
        showDialog(view)
    }

    private fun initViewPager(view: View, list: MutableList<View>, second: Int) {
        val viewPager = view.findViewById<ViewPager>(R.id.viewPager)

        val adapter = MyPageAdapter(list)

        viewPager.adapter = adapter

        viewPager.currentItem = second
    }

    //获取多个图片显示的 View 布局
    //利用 Kotlin 多返回机制,完成图片'锁定'
    private fun getViews(urls: String, msg: String): Pair<MutableList<View>,Int> {
        val list = mutableListOf<View>()

        //截取urls 的字符串
        val url = getUrl(urls)
        for (index in 0..url.lastIndex) {
            val view =
                LayoutInflater.from(this).inflate(R.layout.item_view_pager_layout, null, false)
            val itemTv = view.findViewById<TextView>(R.id.item_tv)
            val itemImage = view.findViewById<ImageView>(R.id.item_image)

            setUrl(url[index], itemImage)
            itemTv.text = "${index + 1}/${url.size}"
            list.add(view)
        }

        //获取当前点击的图片在图片集合中的位置
        val indexOf = url.indexOf(msg)
        return Pair(list,indexOf)
    }

    //解析 Url
    private fun getUrl(urls: String): MutableList<String> {
        val list = mutableListOf<String>()
        if (urls.contains("----")) {
            urls.split("----".toRegex()).toTypedArray().forEach {
                list.add(it)
            }
        }
        return list
    }

辅助图:

getUrl()为什么要使用----截取:

效果图:

p3-juejin.byteimg.com/tos-cn-i-k3…

效果图三

分析:采用普通菜单,并监听

menu 参考我的其他博文

 /**
     * 参考我其他博文: https://blog.csdn.net/weixin_44819566/article/details/114404236
     */
    //普通菜单
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.toolbar_menu,menu)
        return true
    }

    //点击事件监听
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            R.id.menu_1-> {
                mAgentWeb.webCreator.webView.settings.textSize = WebSettings.TextSize.NORMAL
            }
            R.id.menu_2-> {
                mAgentWeb.webCreator.webView.settings.textSize = WebSettings.TextSize.LARGER
            }
            R.id.menu_3-> {
                mAgentWeb.webCreator.webView.settings.textSize = WebSettings.TextSize.LARGEST
            }
        }
        return super.onOptionsItemSelected(item)
    }