Phonegap 原生控件(Android)与html混合

简介:

1. 用命令创建cordova项目

cordova coreate hello com.example.hello hello

 

2.打开MainActivity

在onCreate方法中加入

setContentView(R.layout.main_activity);

 

3. main_activity文件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<? xml  version="1.0" encoding="utf-8"?>
< LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical" >
 
     < RelativeLayout
         android:layout_width="fill_parent"
         android:layout_height="45dip"
         android:background="#25C28B" >
 
         < ImageButton
             android:id="@+id/cordova_back"
             android:layout_width="wrap_content"
             android:layout_height="match_parent"
             android:background="#00FFFFFF"
             android:paddingLeft="10dp"
             android:paddingRight="20dp"
             android:src="@drawable/back_all" />
 
         < TextView
             android:id="@+id/cordova_title"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_centerInParent="true"
             android:text="原生头部"
             android:textColor="#FFFFFF"
             android:textSize="20sp" />
 
         < Button
             android:id="@+id/btn_report"
             android:layout_width="wrap_content"
             android:layout_height="match_parent"
             android:layout_alignParentRight="true"
             android:background="#00FFFFFF"
             android:paddingLeft="10dp"
             android:paddingRight="20dp"
             android:text="报告"
             android:textColor="#FFFFFF"
             android:textSize="20sp" />
     </ RelativeLayout >
 
     < org.apache.cordova.engine.SystemWebView
         android:id="@+id/cordovaWebView"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />
 
</ LinearLayout >

  SystemWebView是一个扩展的webview

 

4. 重新makeWebView方法和createViews方法

1
2
3
4
5
6
@Override
   protected  CordovaWebView makeWebView() {
       SystemWebView webView = (SystemWebView) findViewById(R.id.cordovaWebView);
       CordovaWebView cordovaWebView =  new  CordovaWebViewImpl( new  SystemWebViewEngine(webView));
       return  cordovaWebView;
   }

  cordovaWebView对于xml里的SystemWebView 控件

 

1
2
3
4
5
6
7
8
9
10
@Override
  protected  void  createViews() {
      if  (preferences.contains( "BackgroundColor" )) {
          int  backgroundColor = preferences.getInteger( "BackgroundColor" , Color.BLACK);
          // Background of activity:
          appView.getView().setBackgroundColor(backgroundColor);
      }
      appView.getView().requestFocusFromTouch();
  }

  

 

5. 效果图

 



本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/p/7088821.html,如需转载请自行联系原作者

目录
相关文章
|
6月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
170 0
|
4月前
|
JavaScript
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
|
28天前
|
数据安全/隐私保护
HTML表单(Form)常用控件
HTML表单(Form)常用控件。
14 1
|
1月前
|
移动开发 JavaScript Android开发
Android与Html5交互
Android与Html5交互
|
2月前
|
JavaScript
Vue中嵌入原生HTML页面的方法
Vue中嵌入原生HTML页面的方法
97 0
|
3月前
|
Web App开发 前端开发 JavaScript
新的 HTML 控件登陆 Safari
# html # 网络开发者
25 1
|
3月前
|
JSON 定位技术 数据格式
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)
31 0
|
3月前
|
JavaScript 前端开发 定位技术
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(上)
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)
33 0
|
9月前
|
JavaScript 前端开发
html+原生js制作一个简易音乐播放器
html+原生js制作一个简易音乐播放器
118 0
|
4月前
|
存储 搜索推荐 前端开发
SpringBoot框架+原生HTML云端SaaS服务方式的电子病历编辑器源码
一体化电子病历系统基于云端SaaS服务的方式,采用B/S(Browser/Server)架构提供,覆盖了医疗机构电子病历模板制作到管理使用的整个流程。除实现在线制作内容丰富、图文并茂、功能完善的电子病历模板外,还可按照医疗机构的特色,根据不同业务的需求,使用该系统定制个性化、实用化、特色化电子病历模板。 该系统能对电子病历模板进行统一集中管理,通用的电子病历模板能直接提供给不同的医疗机构直接使用,避免重复制作;提供了功能齐备的控件元素,实现电子病历在业务使用中数据的自动获取功能,简化了人工的大量填报。