浅谈OPhone优阅读书软件的开发心得

OPhone平台开发, 2010-01-05 15:39:43

Tags : 读书软件 RelativeLayout 浏览器控

我公司最近开发了一款简单的读书软件，相信不久大家就可以在MM平台上看到了。开发这个程序应用了浏览器控件，采用了RelativeLayout，下面就简单讲讲开发中我的心得体会。

 
阅读页面
首先从布局开始吧，阅读界面采用了RelativeLayout布局方式，目的是有一个菜单键一直在屏幕下方，方便用户触摸操作。
 
 
 
  
下面就逐步讲解一下屏幕下部分页面布局的代码：
 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
androidrientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFdbdbdb"
>
 
 
设置全屏和背景色
<WebView android:id="@+id/webkit" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:background="#FFdbdbdb"
/>
 全屏的WebView控件，即浏览器控件，同样设置了背景色。
 
<Button android:layout_width="wrap_content" 
android:id="@+id/Button01" 
 
android:layout_centerHorizontal="true" 
android:layout_centerInParent="true"
 android:layout_alignParentRight="false" 
 android:layout_alignWithParentIfMissing="true" 
 android:layout_height="wrap_content" 
 android:layout_alignBottom="@layout/main" android:text="菜单">
 </Button>
 
菜单键的设置，layout_centerHorizontal layout_alignParentRight layout_alignWithParentIfMissing 的设置，就保证菜单键一直出现在中间，android:layout_alignBottom="@layout/main"设定了菜单键在页面最底部。
<Button android:layout_width="wrap_content" 
android:id="@+id/ButtonUp" 
 
android:layout_centerHorizontal="true" 
android:layout_centerInParent="false"
 android:layout_alignParentLeft="true" 
 android:layout_alignWithParentIfMissing="true" 
 android:layout_height="wrap_content" 
 android:layout_alignBottom="@layout/main" android:text="上一页">
 </Button>
 <Button android:layout_width="wrap_content" 
android:id="@+id/ButtonDown" 
 
android:layout_centerHorizontal="true" 
android:layout_centerInParent="false"
 android:layout_alignParentRight="true" 
 android:layout_alignWithParentIfMissing="true" 
 android:layout_height="wrap_content" 
 android:layout_alignBottom="@layout/main" android:text="下一页">
 </Button>
</RelativeLayout>
 
 
类似的一左一右的设置了上下页按键。
 
到这里阅读页面就已经准备好了。
 
RelativeLayout布局的优点就是能够把你需要的button布局在屏幕的相对位置上，适合于不同屏幕大小的手机采用统一代码操作，减轻了移植带来的负担。这里只布局在了屏幕的正下方，同样也可布局在屏幕中央，最上方等位置。
 
webView控件基本使用
浏览器控件即webView，下面谈谈如何设置和监控webView控件：webView是J2ME所没有的，是类似于Symbian和.net CF 里面功能类似的浏览器控件，通过这个控件可以直接访问网页，或者把输入的HTML字符串显示出来，功能比较强大，同Symbian或.net CF 浏览器控件比起来有以下几个优点：
 
1、功能强大，支持CSS，Java script等HTML语言，这样页面就能更漂亮。
2、能够对浏览器控件进行非常详细的设置，比如字体大小，背景色，滚动条样式，等等。
3、能够捕捉到所有浏览器操作，比如点击URL，打开或关闭URL
4、能够很好的融入布局。
5、甚至webView还能和JS进行交互。
 
在使用webView布局的页面后，我们首先取得webView实例，browser就是webView的对象：
 
browser=(WebView)findViewById(R.id.webkit);
 
取得实例后，我们给browser定义下WebSettings，WebSettings是WebView的具体设置类，可以对WebView进行非常详细的设置。
 
WebSettings bs = browser.getSettings();
取得了webView设置对象。下面开始设置浏览器控件
举例几个最常用的设置
 
bs.setSupportMultipleWindows(false);
浏览器不支持多窗口显示，意思就是说所有页面在单一窗口打开，这样避免了页面布局控制显示问题，也便于操作控制页面。
  
    bs.setSupportZoom(false);
     
页面是否可以进行缩放。
      
bs.setBlockNetworkImage(false)
是否阻止图像的显示
 
      bs.setCacheMode（）
缓存的模式，分为几种LOAD_CACHE_ELSE_NETWORK（当本地没有缓存时，从网上下载）
         
              LOAD_CACHE_ONLY 只读取本地缓存
              LOAD_DEFAULT默认的缓存模式
              LOAD_NORMAL一般的缓存模式
              LOAD_NO_CACHE不读取缓存，所有内容均从网络下载
 
      bs.setJavaScriptEnabled(flag)
 
是否支持JS
其他比如设置字体等更不必详说。通过设置，我们可以获得一个我们需要的浏览器窗口。
 
另外一方面，我们还设置了一个类叫webNotify 这个类继承自WebViewClient,用来监控浏览器的一系列事件。
webNotify wn = new webNotify();
      
       browser.setWebViewClient(wn) ;
 
 
下面列举了比较常用的4个事件
 
1，接收到Http请求的事件
 
onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm)
 
2，打开链接前的事件
public boolean shouldOverrideUrlLoading(WebView view, String url) {
   view.loadUrl(url); 
       return true;
 }
 
这个函数我们可以做很多操作，比如我们读取到某些特殊的URL，于是就可以不打开地址，取消这个操作，进行预先定义的其他操作，这对一个程序是非常必要的。
 
3，载入页面完成的事件
public void onPageFinished(WebView view, String url){
   
}
 
同样道理，我们知道一个页面载入完成，于是我们可以关闭loading条，切换程序动作。
 
4，载入页面开始的事件
public void onPageStarted(WebView view, String url, Bitmap favicon) {
   
}
 
 
这个事件就是开始载入页面调用的，通常我们可以在这设定一个loading的页面，告诉用户程序在等待网络响应。
 
通过这几个事件，我们可以很轻松的控制程序操作，一边用着浏览器显示内容，一边监控着用户操作实现我们需要的各种显示方式，同时可以防止用户产生误操作。
     
     
最后我们的浏览器设置好了，可以监控操作了，于是打开一个网址，
 
      
 browser.loadUrl("http://www.baidu.com/");
 
             
当然也可以是自己设定的一段html字符串，当然你的URL腰符合规范。
 
browser.loadDataWithBaseURL（）
 
如何和JS进行交互
好了，到这里基本的webView的基本使用介绍完了。下面介绍下如何和JS进行交互，这个功能非常强大了，能够做出很多意想不到的事情。
 
首先我们在页面里有这么一段JS代码
 
<html> 
        <script language="javascript"> 
                function wave() { 
                    document.getElementById("droid").src="android_waving.png"; 
                } 
        </script> 
        <body> 
            <a onClick="window.demo.clickOnAndroid()"> 
                                <img id="droid" src="android_normal.png"/><br> 
                                Click me! 
            </a> 
        </body> 
</html> 
 
function wave()就是我们要调用的函数。然后让browser和页面进行交互
bs.setJavaScriptEnabled(true); 
首先让浏览器支持JS。
        browser.addJavascriptInterface(new Object() { 
            public void clickOnAndroid() { 
                mHandler.post(new Runnable() { 
                    public void run() { 
                        mWebView.loadUrl("javascript:wave()"); 
                    } 
                }); 
            } 
        }, "index");
 
这里的重点是addJavascriptInterface(Object obj,String interfaceName)方法，该方法将一个java对象绑定到一个javascript对象中，javascript对象名就是interfaceName，作用域是Global。这样初始化webview后，在webview加
载的页面中就可以直接通过javascript:window.demo访问到绑定的java对象了。
 
这样我们就能在自己的浏览器里实现html页面里面的js代码了，具体能实现什么功能这里就不做详细举例了，实用中你会发现，这个功能太强大了。
 
 
View的触摸操作
 
最基本的在View里面 onTouchEvent，它主要实现的功能是Flip，主要原理就是按下的时候记录坐标（用到MotionEvent.ACTION_DOWN），然后滑动（MotionEvent.ACTION_MOVE），然后在抬起（MotionEvent.ACTION_UP），在抬起的时候在记录坐标，把按下的坐标和抬起的坐标做比较，这样就能判断出是左还是右了，然后作出相应的处理。一般情况下，我们执行程序操作时就在ACTION_UP时进行。
 
最基本的就是onTouchEvent，同时Android平台还给我们提供了更多彩的操作方式，我们需要android.view.GestureDetector
android.view.GestureDetector.SimpleOnGestureListener 这两个类
 
新建一个类继承SimpleOnGestureListener，HahaGestureDetectorListener
可以实现以下event事件。
boolean onDoubleTap(MotionEvent e)
解释：双击的第二下Touch down时触发
boolean onDoubleTapEvent(MotionEvent e)
解释：双击的第二下Touch down和up都会触发，可用e.getAction()区分。
boolean onDown(MotionEvent e)
解释：Touch down时触发
boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)
解释：Touch了滑动一点距离后，up时触发。
void onLongPress(MotionEvent e)
解释：Touch了不移动一直Touch down时触发
boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)
解释：Touch了滑动时触发。
void onShowPress(MotionEvent e)
解释：Touch了还没有滑动时触发
（与onDown，onLongPress比较
onDown只要Touch down一定立刻触发。
而Touchdown后过一会没有滑动先触发onShowPress再是onLongPress。
所以Touchdown后一直不滑动，onDown->onShowPress->onLongPress这个顺序触发。
 
boolean onSingleTapConfirmed(MotionEvent e)
boolean onSingleTapUp(MotionEvent e)
解释：上面这两个函数都是在touch down后又没有滑动（onScroll），又没有长按（onLongPress），然后Touchup时触发。
 
点击一下非常快的（不滑动）Touchup：
onDown->onSingleTapUp->onSingleTapConfirmed
 
点击一下稍微慢点的（不滑动）Touchup：
onDown->onShowPress->onSingleTapUp->onSingleTapConfirmed
 
有了这么多的响应方式，我们能更加方便的对用户的触摸操作进行响应，对各种动作都有所对应。那么这个类如何使用呢，其实非常简单，在view的新建一个GestureDetector的对象。
构造函数里
gestureDetector = new GestureDetector(new HahaGestureDetectorListener());
 
然后在View的onTouchEvent里以下这样用，就可以在gestureDetector的事件里写自己的代码了。
@Override
public boolean onTouchEvent(MotionEvent event) {
    gestureDetector.onTouchEvent(event);
}
 
这里简单介绍了webView和触摸方法的实现，希望对大家有一定帮助，创造出更加适合用户操作的程序来。
 
作者介绍：
李超  北京德诺美科技有限公司工程师，有多年的JAVA开发经验，一直从事手机游戏软件和手机阅读软件的开发，开发平台包括 linux, symbian, OPhone。
 
 
（声明：本网的新闻及文章版权均属OPhone SDN网站所有，如需转载请与我们编辑团队联系。任何媒体、网站或个人未经本网书面协议授权，不得进行任何形式的转载。已经取得本网协议授权的媒体、网站，在转载使用时请注明稿件来源。）