|
|
51CTO旗下网站
|
|
移动端

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

开发这个程序应用了浏览器控件,采用了RelativeLayout,下面就简单讲讲开发中我的心得体会.

作者:李超来源:ophonesdn|2010-07-26 12:33

阅读页面
首先从布局开始吧,阅读界面采用了RelativeLayout布局方式,目的是有一个菜单键一直在屏幕下方,方便用户触摸操作。


下面就逐步讲解一下屏幕下部分页面布局的代码:

  1. <?xml version="1.0" encoding="utf-8"?>     
  2. <RelativeLayout xmlns:android=  
  3. "http://schemas.android.com/apk/res/android"    
  4. androidrientation="vertical"    
  5. android:layout_width="fill_parent"    
  6. android:layout_height="fill_parent"    
  7. android:background="#FFdbdbdb"    
  8. >     

设置全屏和背景色

  1. <WebView android:id="@+id/webkit"      
  2. android:layout_width="fill_parent"      
  3. android:layout_height="fill_parent"      
  4. android:background="#FFdbdbdb"    
  5. />   

全屏的WebView控件,即浏览器控件,同样设置了背景色。

  1. <Button android:layout_width="wrap_content"      
  2. android:id="@+id/Button01"      
  3.       
  4. android:layout_centerHorizontal="true"      
  5. android:layout_centerInParent="true"    
  6.  android:layout_alignParentRight="false"      
  7.  android:layout_alignWithParentIfMissing="true"      
  8.  android:layout_height="wrap_content"      
  9.  android:layout_alignBottom="@layout/main" android:text="菜单">     
  10.  </Button>   

菜单键的设置,layout_centerHorizontal layout_alignParentRight layout_alignWithParentIfMissing 的设置,就保证菜单键一直出现在中间,android:layout_alignBottom="@layout/main"设定了菜单键在页面***部。

  1. <Button android:layout_width="wrap_content"      
  2. android:id="@+id/ButtonUp"      
  3.       
  4. android:layout_centerHorizontal="true"      
  5. android:layout_centerInParent="false"    
  6.  android:layout_alignParentLeft="true"      
  7.  android:layout_alignWithParentIfMissing="true"      
  8.  android:layout_height="wrap_content"      
  9.  android:layout_alignBottom="@layout/main" android:text="上一页">     
  10.  </Button>     
  11.  <Button android:layout_width="wrap_content"      
  12. android:id="@+id/ButtonDown"      
  13.       
  14. android:layout_centerHorizontal="true"      
  15. android:layout_centerInParent="false"    
  16.  android:layout_alignParentRight="true"      
  17.  android:layout_alignWithParentIfMissing="true"      
  18.  android:layout_height="wrap_content"      
  19.  android:layout_alignBottom="@layout/main" android:text="下一页">     
  20.  </Button>     
  21. </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设置对象。下面开始设置浏览器控件
举例几个最常用的设置

  1. bs.setSupportMultipleWindows(false);    

浏览器不支持多窗口显示,意思就是说所有页面在单一窗口打开,这样避免了页面布局控制显示问题,也便于操作控制页面。

  1. bs.setSupportZoom(false);   

页面是否可以进行缩放。

  1. bs.setBlockNetworkImage(false)  

是否阻止图像的显示

  1. bs.setCacheMode()  

缓存的模式,分为几种LOAD_CACHE_ELSE_NETWORK(当本地没有缓存时,从网上下载)
        
              LOAD_CACHE_ONLY 只读取本地缓存
              LOAD_DEFAULT默认的缓存模式
              LOAD_NORMAL一般的缓存模式
              LOAD_NO_CACHE不读取缓存,所有内容均从网络下载
 
      bs.setJavaScriptEnabled(flag)

是否支持JS

其他比如设置字体等更不必详说。通过设置,我们可以获得一个我们需要的浏览器窗口。

另外一方面,我们还设置了一个类叫webNotify 这个类继承自WebViewClient,用来监控浏览器的一系列事件。

  1. webNotify wn = new webNotify();     
  2.            
  3.        browser.setWebViewClient(wn) ;    

下面列举了比较常用的4个事件
 1,接收到Http请求的事件

  1. onReceivedHttpAuthRequest  
  2. (WebView view, HttpAuthHandler handler, String host, String realm) 

2,打开链接前的事件

  1. public boolean shouldOverrideUrlLoading  
  2. (WebView view, String url) {     
  3.    view.loadUrl(url);      
  4.        return true;     
  5.  }    

这个函数我们可以做很多操作,比如我们读取到某些特殊的URL,于是就可以不打开地址,取消这个操作,进行预先定义的其他操作,这对一个程序是非常必要的。

3,载入页面完成的事件

  1. public void onPageFinished  
  2. (WebView view, String url){          
  3. }    

同样道理,我们知道一个页面载入完成,于是我们可以关闭loading条,切换程序动作。

4,载入页面开始的事件

  1. public void onPageStarted  
  2. (WebView view, String url, Bitmap favicon) {          
  3. }  


这个事件就是开始载入页面调用的,通常我们可以在这设定一个loading的页面,告诉用户程序在等待网络响应。

通过这几个事件,我们可以很轻松的控制程序操作,一边用着浏览器显示内容,一边监控着用户操作实现我们需要的各种显示方式,同时可以防止用户产生误操作。

***我们的浏览器设置好了,可以监控操作了,于是打开一个网址,

  1. browser.loadUrl("http://www.baidu.com/");   

当然也可以是自己设定的一段html字符串,当然你的URL腰符合规范。

  1. browser.loadDataWithBaseURL()     

如何和JS进行交互
好了,到这里基本的webView的基本使用介绍完了。下面介绍下如何和JS进行交互,这个功能非常强大了,能够做出很多意想不到的事情。

首先我们在页面里有这么一段JS代码

  1. <html>      
  2.         <script language="javascript">      
  3.                 function wave() {      
  4.                     document.getElementById("droid").src="android_waving.png";      
  5.                 }      
  6.         </script>      
  7.         <body>      
  8.             <a onClick="window.demo.clickOnAndroid()">      
  9.                                 <img id="droid" src="android_normal.png"/><br>      
  10.                                 Click me!      
  11.             </a>      
  12.         </body>      
  13. </html>      
  14.       
  15. function wave()  
  16. 就是我们要调用的函数。然后让browser和页面进行交互     
  17. bs.setJavaScriptEnabled(true);      
  18. 首先让浏览器支持JS。     
  19.         browser.addJavascriptInterface(new Object() {      
  20.             public void clickOnAndroid() {      
  21.                 mHandler.post(new Runnable() {      
  22.                     public void run() {      
  23.                         mWebView.loadUrl("javascript:wave()");      
  24.                     }      
  25.                 });      
  26.             }      
  27.         }, "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的事件里写自己的代码了。

  1. @Override    
  2. public boolean onTouchEvent  
  3. (MotionEvent event) {     
  4.     gestureDetector.onTouchEvent(event);     
  5. }    

这里简单介绍了webView和触摸方法的实现,希望对大家有一定帮助,创造出更加适合用户操作的程序来。


点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

276人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

643人订阅学习

WOT2019全球人工智能技术峰会

WOT2019全球人工智能技术峰会

通用技术、应用领域、企业赋能三大章节,13大技术专场,60+国内外一线人工智能精英大咖站台,分享人工智能的平台工具、算法模型、语音视觉等技术主题,助力人工智能落地。
共50章 | WOT峰会

0人订阅学习

读 书 +更多

网络管理员考前辅导

本书按照国家人事部、信息产业部全国计算机技术与软件专业资格(水平)考试要求编写,内容紧扣《网络管理员考试大纲》。全书共分为11章,覆...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客