原創作品，轉載請標明：http://blog.csdn.net/jackystudio/article/details/17576995

手游《我叫MT》一開始會彈出一個游戲公告，有玩過的肯定都蠻熟悉的，這就是webview，就是一個網頁。由于webview和平臺相關，這里就介紹下cocos2d-x如何嵌入andorid的webview控件，在cocos2d-x中顯示網頁。

1.Jni

Jni這里我就不再多說了。可用參考wikipedia，或者微信飛機大戰的移植篇。通過Jni，可以實現在cocos2d-x中調用Android的API，當然也可以進行傳值。

2.Android使用webview

直接上代碼。主要是處理布局和webview使用的問題。這里采用代碼布局。以下操作在android的主類（cocos2dxActivity）中處理

2.1.添加成員變量

整個布局的結構是最底層一個FrameLayout，ImageView控件放置在FrameLayout上。然后之上是一個LinearLayout用來放置關閉按鈕，LinearLayout往下是Webview控件。

[cpp]?view plaincopy

static?Test?test??=?null;//Test實例??

WebView?m_webView;//WebView控件??

ImageView?m_imageView;//ImageView控件??

FrameLayout?m_webLayout;//FrameLayout布局??

LinearLayout?m_topLayout;//LinearLayout布局??

Button?m_backButton;//關閉按鈕??

2.2.OnCreate中添加FrameLayout布局

[cpp]?view plaincopy

???protected?void?onCreate(Bundle?savedInstanceState){??

????super.onCreate(savedInstanceState);??

???????test=this;??

?????????

???????//初始化一個空布局??

???????m_webLayout?=?new?FrameLayout(this);??

???????FrameLayout.LayoutParams?lytp?=?new?FrameLayout.LayoutParams(800,640);??

???????lytp?.gravity?=?Gravity.CENTER;??

???????addContentView(m_webLayout,?lytp);??

}??

2.3.返回實例

[cpp]?view plaincopy

public?static?Test?getInstance()?{??

????Log.v("TestJacky","getInstance");??

????return?test;??

}??

2.4.顯示webview

[cpp]?view plaincopy

public?void?openWebview()?{??

????Log.v("TestJacky",?"openWebView");??

????this.runOnUiThread(new?Runnable()?{//在主線程里添加別的控件??

????????public?void?run()?{?????

????????????//初始化webView??

????????????m_webView?=?new?WebView(test);??

????????????//設置webView能夠執行javascript腳本??

????????????m_webView.getSettings().setJavaScriptEnabled(true);??????????????

????????????//設置可以支持縮放??

????????????m_webView.getSettings().setSupportZoom(true);//設置出現縮放工具??

????????????m_webView.getSettings().setBuiltInZoomControls(true);??

????????????//載入URL??

????????????m_webView.loadUrl("http://m.blog.csdn.net/blog/jackyvincefu/");??

????????????//使頁面獲得焦點??

????????????m_webView.requestFocus();??

????????????//如果頁面中鏈接，如果希望點擊鏈接繼續在當前browser中響應??

????????????m_webView.setWebViewClient(new?WebViewClient(){?????????

????????????????public?boolean?shouldOverrideUrlLoading(WebView?view,?String?url)?{?????

????????????????????if(url.indexOf("tel:")<0){??

????????????????????????view.loadUrl(url);???

????????????????????}??

????????????????????return?true;?????????

????????????????}??????

????????????});??

??????????????

????????????//背景圖??

????????????m_imageView?=?new?ImageView(test);??

????????????m_imageView.setImageResource(R.drawable.bkgnd);??

????????????m_imageView.setScaleType(ImageView.ScaleType.FIT_XY);??

????????????//初始化線性布局?里面加按鈕和webView??

????????????m_topLayout?=?new?LinearLayout(test);????????

????????????m_topLayout.setOrientation(LinearLayout.VERTICAL);??

????????????//初始化返回按鈕??

????????????m_backButton?=?new?Button(test);??

????????????m_backButton.setBackgroundResource(R.drawable.btn);??

????????????LinearLayout.LayoutParams?lypt=new?LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,?LinearLayout.LayoutParams.WRAP_CONTENT);??

????????????lypt.gravity=Gravity.RIGHT;??

????????????m_backButton.setLayoutParams(lypt);??????????????

????????????m_backButton.setOnClickListener(new?OnClickListener()?{??????????????????????

????????????????public?void?onClick(View?v)?{??

????????????????????removeWebView();??

????????????????}??

????????????});??

????????????//把image加到主布局里??

????????????m_webLayout.addView(m_imageView);??

????????????//把webView加入到線性布局??

????????????m_topLayout.addView(m_backButton);??

????????????m_topLayout.addView(m_webView);??????????????????

????????????//再把線性布局加入到主布局??

????????????m_webLayout.addView(m_topLayout);??

????????}??

????});??

}??

2.5.移除webview

[cpp]?view plaincopy

public?void?removeWebView()?{????????????????

????m_webLayout.removeView(m_imageView);??

????m_imageView.destroyDrawingCache();??

??????

????m_webLayout.removeView(m_topLayout);??

????m_topLayout.destroyDrawingCache();??

??????????????

????m_topLayout.removeView(m_webView);??

????m_webView.destroy();??

??????????????

????m_topLayout.removeView(m_backButton);??

????m_backButton.destroyDrawingCache();??

}??

2.6.重寫返回鍵

[cpp]?view plaincopy

public?boolean?onKeyDown(int?keyCoder,KeyEvent?event)??

{??

????//如果網頁能回退則后退，如果不能后退移除WebView??

????if(m_webView.canGoBack()?&&?keyCoder?==?KeyEvent.KEYCODE_BACK){??

????????m_webView.goBack();??

????}else{??

????????removeWebView();??

????}??

????return?false;????????

}??

3.cocos2d-x使用Jni

這里直接使用HelloWorld的示例，修改了close按鈕的回調函數。

3.1.jni頭文件

[cpp]?view plaincopy

#if?(CC_TARGET_PLATFORM?==?CC_PLATFORM_ANDROID)??

#include?<jni.h>??

#include?"platform/android/jni/JniHelper.h"??

#endif??

3.2.Jni調用打開webview

[cpp]?view plaincopy

void?HelloWorld::menuCloseCallback(CCObject*?pSender)??

{??

#if?(CC_TARGET_PLATFORM?==?CC_PLATFORM_ANDROID)??

????JniMethodInfo?minfo;??

????//getStaticMethodInfo，判斷Java靜態函數是否存在，并且把信息保存到minfo里??

????//參數1：JniMethodInfo??

????//參數2：Java類包名+類名??

????//參數3：Java函數名稱??

????//參數4：函數參數類型和返回值類型??

????bool?isHave?=?JniHelper::getStaticMethodInfo(minfo,"com/jacky/test/Test","getInstance","()Lcom/jacky/test/Test;");??

????jobject?jobj;//存對象??

????if?(isHave)?{??

????????//這里的調用getInstance，返回Test類的對象。??

????????jobj?=?minfo.env->CallStaticObjectMethod(minfo.classID,?minfo.methodID);??

??

????????isHave?=?JniHelper::getMethodInfo(minfo,"com/jacky/test/Test","openWebview","()V");??

????????if?(isHave)?{??

????????????//調用openWebview,?參數1：Test對象???參數2：方法ID??

????????????minfo.env->CallVoidMethod(jobj,?minfo.methodID);??

????????}??

????}??

#else??

????CCDirector::sharedDirector()->end();??

#if?(CC_TARGET_PLATFORM?==?CC_PLATFORM_IOS)??

????exit(0);??

#endif??

#endif??

}??

4.效果圖

爪機截屏的。

ps：這里沒有處理多次打開webview的情況。可以采用Jni方法來通知cocos2d-x，也可以直接在主類中設置一個成員變量標志位，調用openWebview時設置為true，removeWebView時設置為false，在調用openWebview時檢測這個標志位來決定是否打開即可。

5.源碼下載

包含win32，android代碼，拿掉了android交叉編譯生成的obj，保留so和apk文件。
下載地址：http://download.csdn.net/detail/jackyvincefu/6770315

總結

以上是生活随笔為你收集整理的【玩转cocos2d-x之三十三】游戏嵌入Webview网页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。