1. 程式人生 > >android,activity跳轉Html

android,activity跳轉Html

Android混合開發之Activity類與html頁面之間的相互跳轉(並解決黑屏問題)

本程式流程:程式啟動-->testActivity--->phonegap2框架類--->index.html--->testActivity,主要實現activity與html頁面的相互跳轉,並實現 傳遞引數的功能。

程式結構圖:



1.建立一個安卓專案,在該專案裡面新增PhoneGap框架(具體步驟請點選檢視),我們知道我們在定義一個主介面的時候往往用的是Activity,這裡我們先定義一個TestActivity,程


序程式碼如下:

  1. package com.myphonegap;  
  2. import android.app.Activity;  
  3. import android.content.Intent;  
  4. import android.os.Bundle;  
  5. import android.view.View;  
  6. import android.view.View.OnClickListener;  
  7. import android.widget.Button;  
  8. import android.widget.EditText;  
  9. import android.widget.TextView;  
  10. publicclass TestActivity extends Activity {  
  11.     private EditText edittext;  
  12.     private Button  button;  
  13.     @Override
  14.     protectedvoid onCreate(Bundle savedInstanceState) {  
  15.         // TODO Auto-generated method stub
  16.         super.onCreate(savedInstanceState);  
  17.         setContentView(R.layout.main);  
  18.         edittext = (EditText) findViewById(R.id.EditText1);  
  19.         button = (Button)findViewById(R.id.Button1);          
  20.         // 接收html頁面引數
  21.         String str = getIntent().getStringExtra("name");  
  22.         String str1 = getIntent().getStringExtra("name");  
  23.         //將編輯框文字內容設定接收值
  24.         edittext.setText(str+str1);</span>  
  25.         //為按鈕設定繫結事件
  26.         button.setOnClickListener(new OnClickListener() {  
  27.             publicvoid onClick(View v) {  
  28.                 // 設定intent之間的跳轉
  29.                 Intent intent = new Intent(TestActivity.this,  
  30.                         PhoneGap2Activity.class);  
  31.                 //啟動intent
  32.                 startActivity(intent);        
  33.             }  
  34.         });  
  35.     }  
  36. }  

2.在PhoneGap2Activity裡面,這個類繼承的是DroidGap類,這樣的話在這個activity裡面就很容易跳轉到一個html頁面了。也就是說這個activity會跳轉到

某個html頁面裡面。那麼顯示的就是跳轉後html頁面的內容了。我在思考怎樣從跳轉後的html頁面回到TestActivity裡面去呢,這裡面就涉及到js呼叫java

的程式碼了,其實同過appView.addJavascriptInterface(obj,String str)增加一個js操作java的介面就可以了,第一個引數是類的例項,第二個引數時呼叫

該例項的js的名字。
下面是PhoneGap2Activity程式碼:
  1. package com.myphonegap;  
  2. import org.apache.cordova.DroidGap;  
  3. import android.content.Intent;  
  4. import android.os.Bundle;  
  5. publicclass PhoneGap2Activity extends DroidGap {  
  6.     /** Called when the activity is first created. */
  7.     String str;  
  8.     @Override
  9.     publicvoid onCreate(Bundle savedInstanceState) {  
  10.         super.onCreate(savedInstanceState);  
  11.         super.loadUrl("file:///android_asset/www/index.html");  
  12.         //post方式傳送引數
            //String postData = "clientID = cid & username = name";
            //webview.postUrl(url, EncodingUtils.getBytes(postData, "base64")); super.postUrl();
  13.         //在該方法中增加js操作java的介面,this為當前物件,js1為操作java檔案的javascript的名字
  14.         appView.addJavascriptInterface(this"js1");
  15.     }  
  16.     publicvoid method(String str,String str1) {  
  17.         Intent intent = new Intent();  
  18.         intent.putExtra("name", str);  
  19.         intent.putExtra("pass", str);  
  20.         intent.setClass(PhoneGap2Activity.this, TestActivity.class);  
  21.         startActivity(intent);  
  22.     }  
  23. }  

這時候會遇到黑屏問題:也就是當activity跳轉到html之間的延遲時間,要解決這個問題,需要新增幾句程式碼:

  1. super.init();  
  2. this.appView.setBackgroundResource(R.drawable.load);//設定背景圖片
  3. super.setIntegerProperty("splashscreen",R.drawable.load ); //設定閃屏背景圖片
  4. super.loadUrl("file:///android_asset/www/login.html",3000);    //經過測試3000毫秒比較合適  
以上解決黑屏關鍵程式碼截圖


修改後的程式碼為:

  1. package com.myphonegap;  
  2. import org.apache.cordova.DroidGap;  
  3. import android.content.Intent;  
  4. import android.os.Bundle;  
  5. publicclass PhoneGap2Activity extends DroidGap {  
  6.     /** Called when the activity is first created. */
  7.     String str;  
  8.     @Override
  9.     publicvoid onCreate(Bundle savedInstanceState) {  
  10.         super.onCreate(savedInstanceState);  
  11. <pre code_snippet_id="221630" snippet_file_name="blog_20140306_4_702351"class="java" name="code">       <span style="color:#cc0000;">  super.init();  
  12.         this.appView.setBackgroundResource(R.drawable.load);//設定背景圖片
  13.         super.setIntegerProperty("splashscreen",R.drawable.load ); //設定閃屏背景圖片
  14.         super.loadUrl("file:///android_asset/www/login.html",3000); </span>   //經過測試3000毫秒比較合適  
  15.                //在該方法中增加js操作java的介面,this為當前物件,js1為操作java檔案的javascript的名字
  16.                 appView.addJavascriptInterface(this"js1");  
  17.     }  
  18.     publicvoid method(String str,String str1) {  
  19.         Intent intent = new Intent();  
  20.         intent.putExtra("name", str);  
  21.         intent.putExtra("pass", str);  
  22.         intent.setClass(PhoneGap2Activity.this, TestActivity.class);  
  23.         startActivity(intent);  
  24.     }  
  25. }</pre>  
  26. <pre></pre>  
  27. <br>  
  28. <p></p>  
  29. <p>3.這個html頁面就是跳轉後的html頁面,它通過定義的js函式直接呼叫java方法,通過js呼叫PhoneGap2Activity的method方法,從而實現html頁面向</p>  
  30. <br>  
  31. TestActivity跳轉的功能。----注意引入的包  
  32. <p></p>  
  33. <p></p>  
  34. <pre code_snippet_id="221630" snippet_file_name="blog_20140306_5_4289618"class="html" name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">  
  35. <html>  
  36. <head>  
  37. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  38. <title>PhoneGap</title>  
  39. <span style="color:#cc0000;"><script type="text/javascript" charset="utf-8" src="cordova.js"></script>  
  40. <link rel="stylesheet" type="text/css"
  41.     href="css/jquery.mobile-1.3.2.min.css">  
  42. <script type="text/javascript" charset="utf-8" src="js/jquery-1.6.4.min.js"></script>  
  43. <script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script</span>>  
  44. </head>  
  45. <script type="text/javascript">  
  46.         $("#page").live("pagecreate",function(){  
  47.             $("#b").click(function() {  
  48.             <span style="color:#cc0000;">js1.method($("#text1").val(),$("#text2").val());</span>  
  49.         });  
  50.             });  
  51. </script>  
  52. <body>  
  53.     <div data-role="page" id="page">  
  54.         <div data-role="header" data-position="fixed">  
  55.             <h1>標題</h1>  
  56.         </div>  
  57.         <div data-role="content">  
  58.             <h1>Hello World</h1>  
  59.             <a id="b" data-role="button" >跳轉到activity</a>  
  60.              使用者名稱:<input type="text" id="text1" placeholder="輸入內容" />  
  61.             密 碼:<input type="text" id="text1" placeholder="輸入內容" />  
  62.         </div>  
  63.         <div data-role="footer"