游戏嵌入Webview网页

浏览数：337 / 时间：2015年06月09日

手游《我叫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控件。

1     static Test test  = null;//Test实例
2     WebView m_webView;//WebView控件
3     ImageView m_imageView;//ImageView控件
4     FrameLayout m_webLayout;//FrameLayout布局
5     LinearLayout m_topLayout;//LinearLayout布局
6     Button m_backButton;//关闭按钮

2.2.OnCreate中添加FrameLayout布局

 1     protected void onCreate(Bundle savedInstanceState){
 2         super.onCreate(savedInstanceState);
 3         test=this;
 4         
 5         //初始化一个空布局
 6         m_webLayout = new FrameLayout(this);
 7         FrameLayout.LayoutParams lytp = new FrameLayout.LayoutParams(800,640);
 8         lytp .gravity = Gravity.CENTER;
 9         addContentView(m_webLayout, lytp);
10     }

2.3.返回实例

1     public static Test getInstance() {
2         Log.v("TestJacky","getInstance");
3         return test;
4     }

2.4.显示webview

 1     public void openWebview() {
 2         Log.v("TestJacky", "openWebView");
 3         this.runOnUiThread(new Runnable() {//在主线程里添加别的控件
 4             public void run() {   
 5                 //初始化webView
 6                 m_webView = new WebView(test);
 7                 //设置webView能够执行javascript脚本
 8                 m_webView.getSettings().setJavaScriptEnabled(true);            
 9                 //设置可以支持缩放
10                 m_webView.getSettings().setSupportZoom(true);//设置出现缩放工具
11                 m_webView.getSettings().setBuiltInZoomControls(true);
12                 //载入URL
13                 m_webView.loadUrl("http://m.blog.csdn.net/blog/jackyvincefu/");
14                 //使页面获得焦点
15                 m_webView.requestFocus();
16                 //如果页面中链接，如果希望点击链接继续在当前browser中响应
17                 m_webView.setWebViewClient(new WebViewClient(){       
18                     public boolean shouldOverrideUrlLoading(WebView view, String url) {   
19                         if(url.indexOf("tel:")<0){
20                             view.loadUrl(url); 
21                         }
22                         return true;       
23                     }    
24                 });
25                 
26                 //背景图
27                 m_imageView = new ImageView(test);
28                 m_imageView.setImageResource(R.drawable.bkgnd);
29                 m_imageView.setScaleType(ImageView.ScaleType.FIT_XY);
30                 //初始化线性布局 里面加按钮和webView
31                 m_topLayout = new LinearLayout(test);      
32                 m_topLayout.setOrientation(LinearLayout.VERTICAL);
33                 //初始化返回按钮
34                 m_backButton = new Button(test);
35                 m_backButton.setBackgroundResource(R.drawable.btn);
36                 LinearLayout.LayoutParams lypt=new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
37                 lypt.gravity=Gravity.RIGHT;
38                 m_backButton.setLayoutParams(lypt);            
39                 m_backButton.setOnClickListener(new OnClickListener() {                    
40                     public void onClick(View v) {
41                         removeWebView();
42                     }
43                 });
44                 //把image加到主布局里
45                 m_webLayout.addView(m_imageView);
46                 //把webView加入到线性布局
47                 m_topLayout.addView(m_backButton);
48                 m_topLayout.addView(m_webView);                
49                 //再把线性布局加入到主布局
50                 m_webLayout.addView(m_topLayout);
51             }
52         });
53     }

2.5.移除webview

 1     public void removeWebView() {              
 2         m_webLayout.removeView(m_imageView);
 3         m_imageView.destroyDrawingCache();
 4         
 5         m_webLayout.removeView(m_topLayout);
 6         m_topLayout.destroyDrawingCache();
 7                 
 8         m_topLayout.removeView(m_webView);
 9         m_webView.destroy();
10                 
11         m_topLayout.removeView(m_backButton);
12         m_backButton.destroyDrawingCache();
13     }

2.6.重写返回键

 1     public boolean onKeyDown(int keyCoder,KeyEvent event)
 2     {
 3         //如果网页能回退则后退，如果不能后退移除WebView
 4         if(m_webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){
 5             m_webView.goBack();
 6         }else{
 7             removeWebView();
 8         }
 9         return false;      
10     }

3.cocos2d-x使用Jni

这里直接使用HelloWorld的示例，修改了close按钮的回调函数。

3.1.jni头文件

1 #if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)
2 #include <jni.h>
3 #include "platform/android/jni/JniHelper.h"
4 #endif

3.2.Jni调用打开webview

 1 void HelloWorld::menuCloseCallback(CCObject* pSender)
 2 {
 3 #if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)
 4     JniMethodInfo minfo;
 5     //getStaticMethodInfo，判断Java静态函数是否存在，并且把信息保存到minfo里
 6     //参数1：JniMethodInfo
 7     //参数2：Java类包名+类名
 8     //参数3：Java函数名称
 9     //参数4：函数参数类型和返回值类型
10     bool isHave = JniHelper::getStaticMethodInfo(minfo,"com/jacky/test/Test","getInstance","()Lcom/jacky/test/Test;");
11     jobject jobj;//存对象
12     if (isHave) {
13         //这里的调用getInstance，返回Test类的对象。
14         jobj = minfo.env->CallStaticObjectMethod(minfo.classID, minfo.methodID);
15 
16         isHave = JniHelper::getMethodInfo(minfo,"com/jacky/test/Test","openWebview","()V");
17         if (isHave) {
18             //调用openWebview, 参数1：Test对象   参数2：方法ID
19             minfo.env->CallVoidMethod(jobj, minfo.methodID);
20         }
21     }
22 #else
23     CCDirector::sharedDirector()->end();
24 #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
25     exit(0);
26 #endif
27 #endif
28 }