Android App 中把WebView分割固定的 最佳解决方案

1. 问题领域

一个线上的android产品，app的架子是由java做成，中间的内容显示是webview。不多说。

产品经理突然脑子进水，想要把webview切割成上中下三块，

a.下块可以上下滑动，当向上滑动时，上中两块跟着上移。

b.当上块，上移到完全看不到的时候，中块固定住不动，不再上移。

c.中块固定不住以后，下块依然可以上移。

d.当下块重新移下去的时候，重新加载上块显示

就技术解决方案而言

a. 最笨的方法，把一个webview分割成几个webview。这个方法最笨。但是我看到赶集网就是用这个办法做的。当然这样有好处，可以保证与android版本无关。

b. 用js+css解决。这个办法最好，但是很少有人实现过

2.js+css的解决之道

利用CSS中的position:fixed可以解决这个问题。

有三条路：

a.用jQuery Mobile框架

http://jquerymobile.com/

b.用iScroll框架

http://cubiq.org/iscroll

c.自己写js

当然自己写js最好。

下面是我实验的结果。

首先写一个demo的html

中间引用如下的css

[css] view plain copy print ?

1. <styletype="text/css">
2. .fixed{
3. position:fixed;
4. top:0;
5. width:100%;
6. z-index:100;
7. }
8. </style>

引用如下的js

[javascript] view plain copy print ?

1. <script>
2. jQuery(function($){
3. if($('.h1').size()>0){
4. varnav=$('.h1');
5. varnavTop=nav.offset().top;
6. $(window).scroll(function(){
7. varwinTop=$(this).scrollTop();
8. if(winTop>navTop){
9. nav.addClass('fixed');
10. }elseif(winTop<=navTop){
11. nav.removeClass('fixed');
12. }
13. });
14. }
15. });
16. </script>

html中要被固定的部分如下

[html] view plain copy print ?

1. <divclass="content">
2. <h1class="h1">fixed</h1>
3. </div>

然后创建一个android工程

在AndroidManifest.xml中添加

[html] view plain copy print ?

1. <uses-permissionandroid:name="android.permission.INTERNET"/>

在layout下的main.xml中如下添加webview

[html] view plain copy print ?

1. <LinearLayout
2. android:id="@+id/linear_layout_webview"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical">
7. <WebView
8. android:id="@+id/test_site"
9. android:layout_width="fill_parent"
10. android:layout_height="fill_parent">
11. </WebView>
12. </LinearLayout>

主Activity的代码如下：

[java] view plain copy print ?

1. packagecom.hyronjs.jiangbiao;
4. importandroid.app.Activity;
5. importandroid.os.Bundle;
6. importandroid.webkit.WebChromeClient;
7. importandroid.webkit.WebView;
8. importandroid.webkit.WebViewClient;
10. publicclassWebViewFixedActivityextendsActivity{
12. privateWebViewwebView=null;
15. /**Calledwhentheactivityisfirstcreated.*/
16. @Override
17. publicvoidonCreate(BundlesavedInstanceState){
18. super.onCreate(savedInstanceState);
19. setContentView(R.layout.main);
21. webView=(WebView)findViewById(R.id.test_site);
23. webView.setWebChromeClient(newWebChromeClient());
24. webView.setWebViewClient(newWebViewClient());
25. webView.getSettings().setJavaScriptEnabled(true);
26. webView.getSettings().setPluginsEnabled(true);
27. webView.loadUrl("file:///android_asset/test.html");
29. }
31. }

在Android 3.1以上启动之后，就能看到webview中有一部分被固定住的效果了。

3. 对应多版本Android的解决之道

但是，同样的上面的代码，如果你用android 2.3系列去跑，就会发现webview中间固定的效果没有了。

原因在于Android 3.0以下版本，不支持position:fixed的CSS

position:fixed的支持情况参见以下

http://caniuse.com/css-fixed

为了解决，你必须要在html开头加上下面这段meta

[html] view plain copy print ?

1. <metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

user-scalable=no把app自动缩防关掉，就成了。

(理由是什么？？)

转载自：http://blog.csdn.net/nanjingjiangbiao/article/details/7790257