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