Android Webview 加载额外 CSS

这个需求也是挺好玩的。主要是因为女朋友用的一个 APP,是城市里面的一个实时公交的 APP。但是作为一个会点代码的人,一看到这么一个 APP,第一反应是,为什么这种粗制滥造的 APP 可以存活于世,而且还是政府单位发布的。 本着,吐槽一个东西,就要拿出一个比他更好的解决方案的思路,所以我就花了将近一个下午的时间。重新做了一个 APP 送给她。

其实,APP 的难度很低,主要是实现思路比较好玩。熟悉 Firefox 的同学应该知道 stylish 这个插件,他可以进行一些 CSS 的重写工作,同时覆盖到页面上。这样的效果就是可以完成去广告和简化页面的效果。

所以这边,我也准备使用这个思路。当然,我先看看网上有没有对应的资源。避免重复劳动。

然后就搜到了这么一个问题 关于Android中WebView在加载网页的时候,怎样应用本地的CSS效果?就是说怎样把本地的CSS嵌入到HTML中,底下的一些回答让我觉得,太过高层的编程语言,过于简单的答案获取,让我们失去了独立解决问题的能力。

主要使用了 Justson/AgentWeb 来简化代码的配置工作。

具体的实现思路很简单,就是在每次页面加载完成之后,主动的再去读取一个 CSS 文件,这样能保证最后的 CSS 能够覆盖之前的所有配置。所以这边就涉及到一点,Java 调用 JS 和 JS 反馈给 Java 的问题。其实这个使用原生的 WebView 也可以实现,只不过,有了 AgentWeb 的更方便的封装,我觉得直接使用 AgentWebview 也挺好。

代码主要是这样的:

public class MainActivity extends AppCompatActivity {

    private AgentWeb agentWeb;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RelativeLayout layout = (RelativeLayout) findViewById(R.id.layout);

        agentWeb = AgentWeb.with(this)
                           .setAgentWebParent(layout, new RelativeLayout.LayoutParams(-1, -1))
                           .useDefaultIndicator()
                           .defaultProgressBarColor()
                           .setWebViewClient(mWebViewClient)
                           .createAgentWeb()
                           .go("http://wap.ksbus.com.cn/mapHome");
    }

    //WebViewClient
    private WebViewClient mWebViewClient = new WebViewClient() {
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }


        @Override
        public void onPageFinished(WebView view, final String url) {
            super.onPageFinished(view, url);
            agentWeb.getJsEntraceAccess().callJs(loadCss(Config.CSS_URL));
        }
    };

    public static String loadCss(String url) {
        return "javascript:var d=document;" +
               "var s=d.createElement('link');" +
               "s.setAttribute('rel', 'stylesheet');" +
               "s.setAttribute('href', '" + url + "');" +
               "d.head.appendChild(s);";
    }
}; 

直接重新定义 WebViewClient 对象,然后通过在页面加载完成的时候加载外部的 CSS 流程来实现。当然,这只是其中的一个思路。我们也可以直接在 JS 中进行加载。同时这样的好处还有很多,可以直接集成其他具有页面 H5 页面进入 APP。

所有的 demo 代码在

真的挺简单的,但是,这个思路确实是好玩。业务逻辑不用自己写,只需要一个定制的 CSS,就可以实现 APP 的编写。同时,似乎也可以把页面的主题做成本地化。好处还有很多。方法也还有很多。

版权所有:《Mike's Blog》 => 《Android Webview 加载额外 CSS
本文地址:https://mikecoder.cn/post/189
除非注明,文章均为 《Mike's Blog》 原创,欢迎转载!转载请注明本文地址,谢谢。

发表评论

*