`
zhanhao
  • 浏览: 286939 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

android通过webview+jquery设计界面

阅读更多

  相信UI设计是很多人头疼的问题,今天看了一个视频是通过webview+html 设计UI界面,想了一想可以将jquery整合进去(我以前是学做网站的,jquery可以实现很多效果)所以做了个demo,我这个demo只是实验下我的猜想是否可行,不是真正的ui设计,所以更多的是效果的实现界面挺难看的。 (demo在附件中)

先上图:




 

 

关键代码(demo在附件中):

---------------------------------------------activity

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        view = (WebView)findViewById(R.id.wbShwo);
        view.getSettings().setJavaScriptEnabled(true);
        view.getSettings().setCacheMode(0);
        // 注册javascript对象
        view.addJavascriptInterface(new JavaScriptMake(view,this),"jsMake");
        //加载xml文件file:///android_asset 表示 assets 资源
        view.loadUrl("file:///android_asset/test.html");
    }

-----------------------------------------javascript与java交互类

package com.my;

import org.apache.commons.logging.Log;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.app.Activity;
import android.webkit.WebView;
import android.widget.Toast;

public class JavaScriptMake {
 private WebView view;
 private Activity activity ;
 public JavaScriptMake(WebView view,Activity activity) {
  this.view = view;
  this.activity= activity;
 }

 /**
  * java 将数据传给js  通过loadUrl()调用 js方法
  */
 
 public void javaToJs()
 {
  view.loadUrl("javascript:iniData('"+inidata()+"')");
 }
 
 /**
  * js 将数据传给 java 通过WebView 的addJavascriptInterface()方法 映射一个对象 然后再js中通过javascript:对象.方法(参数)的方式调用
  * @param s
  */
 public void jsTojava(String s)
 {
  Toast.makeText(activity,s,Toast.LENGTH_SHORT).show();
 }
 /**
  * 初始化数据
  * @return
  */
 public String inidata() {
  try {
   //封装json对象
   JSONObject jsonObject = new JSONObject();
   jsonObject.put("name", "zhangsan");
   jsonObject.put("sex", "男");
   jsonObject.put("age","16");
   
   JSONObject jsonObject1 = new JSONObject();
   jsonObject1.put("name", "lisi");
   jsonObject1.put("sex", "男");
   jsonObject1.put("age","25");
   
   JSONObject jsonObject2  = new JSONObject();
   jsonObject2.put("name", "wangwu");
   jsonObject2.put("sex", "男");
   jsonObject2.put("age","26");
   
   JSONArray array = new JSONArray();
   array.put(jsonObject);
   array.put(jsonObject1);
   array.put(jsonObject2);
   android.util.Log.d("log",array.toString());
   
   return array.toString();
  } catch (JSONException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  return "";
 }
}

 
 
 

  • 大小: 17.8 KB
  • 大小: 21.8 KB
  • 大小: 24.2 KB
分享到:
评论
3 楼 pigeon200461 2014-03-16  
你好!请问你的这个项目里面是否使用sqlite3数据库。
2 楼 zjjxxhn 2013-06-26  
 
1 楼 gundumw100 2012-05-31  
没有用jquery mobile试试?

相关推荐

    android WebView结合jQuery mobile之基础:整合篇

    通过这样的整合,我们可以在Android应用中充分利用jQuery Mobile的强大功能,创建出具有出色用户体验的移动界面。同时,也可以通过JavaScript与Android的交互,实现更多定制化的功能。 本文主要介绍了如何在Android...

    html5+jquery mobile+android

    在Android平台上,通过WebView组件,可以将HTML5和jQuery Mobile的页面嵌入到原生应用中,实现混合应用开发。WebView不仅支持加载本地或远程的HTML页面,还能调用JavaScript代码,从而实现与Android原生功能的交互,...

    安卓Android源码——Phonegap+HTML5+CSS3+jQuer简单界面模板示例及源码.zip

    本篇文章将深入探讨Phonegap如何与这些Web技术结合,以及如何通过提供的源码创建一个简单的Android界面模板。 首先,Phonegap是一个开源框架,它允许开发者使用Web技术构建原生移动应用。Phonegap的核心是利用...

    android java 通用开发 自适应密度 webview

    通过WebView,我们可以将已有的Web应用嵌入到Android应用中,减少原生开发的工作量。 2. **HTML5**:HTML5是HTML的最新版本,提供了许多新的标签和API,使得构建动态、交互式的Web页面变得更加简单。例如,Canvas...

    Android应用源码之Phonegap+HTML5+CSS3+jQuer简单界面模板示例及源码.zip

    **Android应用源码解析——Phonegap+HTML5+CSS3+jQuery简单界面模板** Phonegap是一种混合移动应用程序开发框架,它允许开发者使用Web技术(HTML、CSS和JavaScript)来构建跨平台的移动应用。本示例是基于Phonegap...

    Android Phonegap+HTML5+CSS3+jQuer简单界面模板示例及源码.rar

    在Android平台上,PhoneGap通过一个WebView组件将Web应用包装成原生应用,让开发者能够利用Java与设备硬件进行交互,如访问摄像头、地理位置、加速计等。PhoneGap的优势在于减少了学习新平台特定编程语言的必要,...

    PhoneGap+Jquery mobile

    PhoneGap的工作原理是通过封装WebView(Android和iOS等平台上的浏览器内核)来运行Web应用,并通过其提供的API接口与设备功能进行交互,如访问摄像头、定位、加速度计等。这样,开发者可以利用他们熟悉的Web技术,...

    android jqueryMobile 类库和实例源代码

    通过WebView,开发者可以将jQuery Mobile的页面嵌入到原生Android应用中。 2. 集成步骤: - 在项目的assets目录下创建HTML、CSS和JS文件夹,放入jQuery Mobile的库文件。 - 在WebView中加载HTML页面,并启用...

    webView登陆小例子

    总的来说,"webView登陆小例子"这个项目涵盖了Android WebView的基本使用、JavaScript与Android的交互、以及可能的UI设计等方面的知识,对于初学者来说,这是一个很好的实践项目,能够帮助他们深入理解WebView的工作...

    WebView启动引导

    通过使用WebView,我们可以直接展示HTML、CSS和JavaScript编写的页面,而无需跳转到浏览器,这样就能在启动引导界面中灵活地设计和控制内容展示。 实现WebView启动引导界面的主要步骤如下: 1. **创建HTML资源**:...

    Android-使用Html来渲染Android界面的动态化界面方案

    综上所述,使用HTML渲染Android界面是一种动态化解决方案,它结合了Web的灵活性和Android的原生特性,为开发者提供了更多设计和实现复杂界面的可能性。然而,也需要注意性能、安全性和版本兼容性等问题,以确保应用...

    Jquery所需驱动

    通过WebView,开发者可以将jQuery加载到Android应用中,实现与用户界面的交互。 2. **加载jQuery**:在WebView中使用jQuery,首先需要加载jQuery库。这可以通过在HTML文件中使用`<script>`标签引入CDN链接,或者将...

    webView让本地页面相互调换案例

    总结一下,通过WebView,我们可以将HTML、CSS和JavaScript技术应用于Android应用,创建丰富的用户界面。结合jQuery Mobile,可以进一步提升用户体验。在实践中,别忘了处理权限问题(如读取外部存储权限),以及考虑...

    android phonegao jquery mobile条码扫描例子源码

    在这个例子中,jQuery Mobile被用来设计和管理应用的界面布局和交互,以提供流畅的用户体验。 ZXing(Zebra Crossing)是Google开发的一个开源条码读取库,支持多种条码格式,如QR码、EAN等。在Android项目中,...

    PhoneGap与android交互及 JQuery Mobile+ iscroll 列表滚动条的实现

    总的来说,这个主题涵盖了多个技术点,包括PhoneGap的跨平台开发、Android API的调用、JQuery Mobile的UI设计和iScroll的性能优化。学习和掌握这些技术可以帮助开发者构建功能丰富的、具有原生感的移动应用,同时...

    安卓内嵌jquery-安卓内嵌jquery.mobile做的网站

    在安卓应用开发中,将jQuery和jQuery Mobile内嵌到项目中可以实现丰富的用户界面和交互效果。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。而jQuery Mobile则是一个专为...

    css API androidAPi jqueryApi

    例如,一个Android应用可能利用WebView加载含有jQuery和自定义CSS的网页内容,通过Android API与JavaScript交互,实现原生与Web的融合。同时,CSS API可以用来美化Android应用中的Web视图,jQuery API则帮助处理用户...

    blades-jquery-source(beporsam.ir)_android_

    通过以上步骤,开发者可以在Android应用中成功集成并实现`jQuery Square Slider`设计,为用户提供流畅且互动性强的浏览体验。记住,良好的用户体验是关键,因此在设计和实现过程中,始终要以用户为中心,确保界面的...

Global site tag (gtag.js) - Google Analytics