淺談OPhone優(yōu)閱讀書軟件的開發(fā)心得
閱讀頁面
首先從布局開始吧，閱讀界面采用了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"
- >
設(shè)置全屏和背景色
- <WebView android:id="@+id/webkit"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="#FFdbdbdb"
- />
全屏的WebView控件，即瀏覽器控件，同樣設(shè)置了背景色。
- <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>
菜單鍵的設(shè)置，layout_centerHorizontal layout_alignParentRight layout_alignWithParentIfMissing 的設(shè)置，就保證菜單鍵一直出現(xiàn)在中間，android:layout_alignBottom="@layout/main"設(shè)定了菜單鍵在頁面***部。
- <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>
類似的一左一右的設(shè)置了上下頁按鍵。
到這里閱讀頁面就已經(jīng)準(zhǔn)備好了。
RelativeLayout布局的優(yōu)點就是能夠把你需要的button布局在屏幕的相對位置上，適合于不同屏幕大小的手機采用統(tǒng)一代碼操作，減輕了移植帶來的負(fù)擔(dān)。這里只布局在了屏幕的正下方，同樣也可布局在屏幕中央，最上方等位置。
webView控件基本使用
瀏覽器控件即webView，下面談?wù)勅绾卧O(shè)置和監(jiān)控webView控件：webView是J2ME所沒有的，是類似于Symbian和.net CF 里面功能類似的瀏覽器控件，通過這個控件可以直接訪問網(wǎng)頁，或者把輸入的HTML字符串顯示出來，功能比較強大，同Symbian或.net CF 瀏覽器控件比起來有以下幾個優(yōu)點：
1、功能強大，支持CSS，Java script等HTML語言，這樣頁面就能更漂亮。
2、能夠?qū)g覽器控件進(jìn)行非常詳細(xì)的設(shè)置，比如字體大小，背景色，滾動條樣式，等等。
3、能夠捕捉到所有瀏覽器操作，比如點擊URL，打開或關(guān)閉URL
4、能夠很好的融入布局。
5、甚至webView還能和JS進(jìn)行交互。#t#
在使用webView布局的頁面后，我們首先取得webView實例，browser就是webView的對象：
browser=(WebView)findViewById(R.id.webkit);
取得實例后，我們給browser定義下WebSettings，WebSettings是WebView的具體設(shè)置類，可以對WebView進(jìn)行非常詳細(xì)的設(shè)置。
WebSettings bs = browser.getSettings();
取得了webView設(shè)置對象。下面開始設(shè)置瀏覽器控件#p#
舉例幾個最常用的設(shè)置
- bs.setSupportMultipleWindows(false);
瀏覽器不支持多窗口顯示，意思就是說所有頁面在單一窗口打開，這樣避免了頁面布局控制顯示問題，也便于操作控制頁面。
- bs.setSupportZoom(false);
頁面是否可以進(jìn)行縮放。
- bs.setBlockNetworkImage(false)
是否阻止圖像的顯示
- bs.setCacheMode（）
緩存的模式，分為幾種LOAD_CACHE_ELSE_NETWORK（當(dāng)本地沒有緩存時，從網(wǎng)上下載）
LOAD_CACHE_ONLY 只讀取本地緩存
LOAD_DEFAULT默認(rèn)的緩存模式
LOAD_NORMAL一般的緩存模式
LOAD_NO_CACHE不讀取緩存，所有內(nèi)容均從網(wǎng)絡(luò)下載
bs.setJavaScriptEnabled(flag)
是否支持JS
其他比如設(shè)置字體等更不必詳說。通過設(shè)置，我們可以獲得一個我們需要的瀏覽器窗口。
另外一方面，我們還設(shè)置了一個類叫webNotify 這個類繼承自WebViewClient,用來監(jiān)控瀏覽器的一系列事件。
- 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;
- }
這個函數(shù)我們可以做很多操作，比如我們讀取到某些特殊的URL，于是就可以不打開地址，取消這個操作，進(jìn)行預(yù)先定義的其他操作，這對一個程序是非常必要的。
3，載入頁面完成的事件
- public void onPageFinished
- (WebView view, String url){
- }
同樣道理，我們知道一個頁面載入完成，于是我們可以關(guān)閉loading條，切換程序動作。
4，載入頁面開始的事件
- public void onPageStarted
- (WebView view, String url, Bitmap favicon) {
- }
這個事件就是開始載入頁面調(diào)用的，通常我們可以在這設(shè)定一個loading的頁面，告訴用戶程序在等待網(wǎng)絡(luò)響應(yīng)。
通過這幾個事件，我們可以很輕松的控制程序操作，一邊用著瀏覽器顯示內(nèi)容，一邊監(jiān)控著用戶操作實現(xiàn)我們需要的各種顯示方式，同時可以防止用戶產(chǎn)生誤操作。#p#
***我們的瀏覽器設(shè)置好了，可以監(jiān)控操作了，于是打開一個網(wǎng)址，
- browser.loadUrl("http://www.baidu.com/");
當(dāng)然也可以是自己設(shè)定的一段html字符串，當(dāng)然你的URL腰符合規(guī)范。
- browser.loadDataWithBaseURL（）
如何和JS進(jìn)行交互
好了，到這里基本的webView的基本使用介紹完了。下面介紹下如何和JS進(jìn)行交互，這個功能非常強大了，能夠做出很多意想不到的事情。
首先我們在頁面里有這么一段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()
- 就是我們要調(diào)用的函數(shù)。然后讓browser和頁面進(jìn)行交互
- 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對象了。
這樣我們就能在自己的瀏覽器里實現(xiàn)html頁面里面的js代碼了，具體能實現(xiàn)什么功能這里就不做詳細(xì)舉例了，實用中你會發(fā)現(xiàn)，這個功能太強大了。
View的觸摸操作
最基本的在View里面 onTouchEvent，它主要實現(xiàn)的功能是Flip，主要原理就是按下的時候記錄坐標(biāo)（用到MotionEvent.ACTION_DOWN），然后滑動（MotionEvent.ACTION_MOVE），然后在抬起（MotionEvent.ACTION_UP），在抬起的時候在記錄坐標(biāo)，把按下的坐標(biāo)和抬起的坐標(biāo)做比較，這樣就能判斷出是左還是右了，然后作出相應(yīng)的處理。一般情況下，我們執(zhí)行程序操作時就在ACTION_UP時進(jìn)行。
最基本的就是onTouchEvent，同時Android平臺還給我們提供了更多彩的操作方式，我們需要android.view.GestureDetector
android.view.GestureDetector.SimpleOnGestureListener 這兩個類
新建一個類繼承SimpleOnGestureListener，HahaGestureDetectorListener
可以實現(xiàn)以下event事件。
boolean onDoubleTap(MotionEvent e)
解釋：雙擊的第二下Touch down時觸發(fā)
boolean onDoubleTapEvent(MotionEvent e)
解釋：雙擊的第二下Touch down和up都會觸發(fā)，可用e.getAction()區(qū)分。
boolean onDown(MotionEvent e)
解釋：Touch down時觸發(fā)
boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)
解釋：Touch了滑動一點距離后，up時觸發(fā)。
void onLongPress(MotionEvent e)
解釋：Touch了不移動一直Touch down時觸發(fā)
boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)
解釋：Touch了滑動時觸發(fā)。
void onShowPress(MotionEvent e)
解釋：Touch了還沒有滑動時觸發(fā)
（與onDown，onLongPress比較
onDown只要Touch down一定立刻觸發(fā)。
而Touchdown后過一會沒有滑動先觸發(fā)onShowPress再是onLongPress。
所以Touchdown后一直不滑動，onDown->onShowPress->onLongPress這個順序觸發(fā)。
boolean onSingleTapConfirmed(MotionEvent e)
boolean onSingleTapUp(MotionEvent e)
解釋：上面這兩個函數(shù)都是在touch down后又沒有滑動（onScroll），又沒有長按（onLongPress），然后Touchup時觸發(fā)。
點擊一下非?？斓模ú换瑒樱㏕ouchup：
onDown->onSingleTapUp->onSingleTapConfirmed
點擊一下稍微慢點的（不滑動）Touchup：
onDown->onShowPress->onSingleTapUp->onSingleTapConfirmed
有了這么多的響應(yīng)方式，我們能更加方便的對用戶的觸摸操作進(jìn)行響應(yīng)，對各種動作都有所對應(yīng)。那么這個類如何使用呢，其實非常簡單，在view的新建一個GestureDetector的對象。
構(gòu)造函數(shù)里
gestureDetector = new GestureDetector(new HahaGestureDetectorListener());
然后在View的onTouchEvent里以下這樣用，就可以在gestureDetector的事件里寫自己的代碼了。
- @Override
- public boolean onTouchEvent
- (MotionEvent event) {
- gestureDetector.onTouchEvent(event);
- }
這里簡單介紹了webView和觸摸方法的實現(xiàn)，希望對大家有一定幫助，創(chuàng)造出更加適合用戶操作的程序來。
