服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - Android UI使用HTML布局方法实例

Android UI使用HTML布局方法实例

2021-03-22 15:44Android开发网 Android

这篇文章主要介绍了Android UI使用HTML布局方法实例,布局文件直接用一个WebView来代替,这样就可以在WebView中使用HTML布局了,需要的朋友可以参考下

很多时候我们用HTML布局会更方便直接,记录一下。
我现在主要是直接调用服务器的网页(实际上是jsp的,只是返回的是html),所以需要联网,第一步添加权限。

 

复制代码 代码如下:

<uses-permission android:name="android.permission.INTERNET" />

 

布局文件直接用一个WebView,如下:

 

复制代码 代码如下:


<?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" >

 

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

 

下面就可以直接写代码了:

 

复制代码 代码如下:


package com.yangshidesign.testgryoscope;

 

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;

public class AddEmojiActivity extends Activity {
 private WebView webView;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  this.setContentView(R.layout.activity_addemoji);
  
  webView = (WebView) this.findViewById(R.id.webView1);
  
  webView.getSettings().setJavaScriptEnabled(true);
  webView.addJavascriptInterface(new WebPlugin(), "WebPlugin");
  
  webView.loadUrl(this.getString(R.string.server_url));
 }
 
 /**
  * 插件类,在html的js里面直接调用
  */
 private class WebPlugin {
  
  @JavascriptInterface
  public void test() {
   Log.e("miquan", "kkkkkk");
   Toast.makeText(AddEmojiActivity.this, "test toast ", Toast.LENGTH_SHORT).show();
  }
  
  @JavascriptInterface
  public String test2() {
   return "something";
  }
 }
}

 

 


其中@JavascriptInterface注解是添加在每一个需要用到的方法上面的。
最后就可以直接在HTML网页上调用了。

 

复制代码 代码如下:

<script type="text/javascript">
 function test() {
  WebPlugin.test();
  var something = WebPlugin.test2();
 }
</script>

延伸 · 阅读

精彩推荐