Android示例-JavaScript与UI控件交互（一）

本例将实现通过WebView控件的addJavascriptInterface()方法调用JavaScript脚本实现与UI控件的交互。源码如下：

1.MainActivity.java

public class MainActivity extends Activity {

    private Button mButtonMovement;
    private WebView mWebView;
    private String mStartRandomMoveJavaScript;
    private String mStopRandomMoveJavaScript;

    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            int x = msg.arg1;
            int y = msg.arg2;

            mButtonMovement.layout(x, y,mButtonMovement.getMeasuredWidth() + x, mButtonMovement.getMeasuredHeight() + y);
        }
    };

    /**
     * 映射对象
     * 里面的方法必须使用@JavascriptInterface注解
     */
    class MyObject{
        @JavascriptInterface
        public void move(int x, int y){
            Message msg = new Message();
            msg.arg1 = x;
            msg.arg2 = y;
            handler.sendMessage(msg);
        }
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mButtonMovement = findViewById(R.id.button3);
        mWebView = new WebView(this);
        WebSettings mWebSetting = mWebView.getSettings();
        mWebSetting.setJavaScriptEnabled(true);
        //第一个参数：要映射的对象  第二哥参数：映射对象的名字
        mWebView.addJavascriptInterface(new MyObject(),"demo");
        try {
            InputStream is = getResources().openRawResource(R.raw.start_radom_move);
            byte[] buffer = new byte[1024];

            int count = is.read(buffer);
            mStartRandomMoveJavaScript = new String(buffer, 0, count, "utf-8");

            is.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

        try {
            //得到资源中的Raw数据流
            InputStream is = getResources().openRawResource(R.raw.stop_radom_move);
            //得到数据的大小
            int length = is.available();
            byte[] buffer = new byte[length];
            //读取数据
            is.read(buffer);
            mStopRandomMoveJavaScript = new String(buffer, 0, length, "utf-8");
            //关闭流
            is.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    public void onClick_Start(View view){
        mWebView.loadDataWithBaseURL(null,mStartRandomMoveJavaScript, "text/html", "utf-8", null);
    }
    public void onClick_Stop(View view){
        mWebView.loadDataWithBaseURL(null,mStopRandomMoveJavaScript, "text/html", "utf-8", null);
    }
}

2.activity_main.xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.lonly.example.javascripedemo.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="27dp"
        android:layout_toStartOf="@+id/button2"
        android:onClick="onClick_Start"
        android:text="开始移动" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button"
        android:layout_alignBottom="@+id/button"
        android:layout_centerHorizontal="true"
        android:onClick="onClick_Stop"
        android:text="停止移动" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@+id/button2"
        android:layout_centerVertical="true"
        android:text="移动的按钮" />

</RelativeLayout>

3.start_radom_move.js脚本文件

<script language="javascript">
var timer;
function startTimer()
{
    //设置定时器，定时执行randomMoveButton（）函数
    timer = setInterval("randomMoveButton()",1000);
}
function randomMoveButton(){
    var x = Math.round(Math.random() * 300);
    var y = Math.round(100 + Math.random() * 400);
    //调用接口中的方法
    window.demo.move(x,y);
}
startTimer();
</script>

4.stop_radom_move.js脚本文件

<script language="javascript">
    clearInterval(timer);//清除定时器
</script>

运行结果：