webView的简单使用以及 与JS 的交互

MainActivity

package com.example.webview_js;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private EditText edit;
    private Button load;
    private ProgressBar progress;
    private WebView web;
    private Button diao;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        edit = (EditText) findViewById(R.id.edit);
        load = (Button) findViewById(R.id.load);
        progress = (ProgressBar) findViewById(R.id.progress);
        web = (WebView) findViewById(R.id.web);
        diao = (Button) findViewById(R.id.diao);

        load.setOnClickListener(this);
        diao.setOnClickListener(this);
    }

    @SuppressLint("JavascriptInterface")
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.load:
                String trim = edit.getText().toString().trim();
                web.loadUrl("http://172.17.8.100/images/small/default/test.html"+trim);
                //设置web可以不调用浏览器，在本页面显示
                web.setWebViewClient(new WebViewClient());

                //获取更高级的设置对象
                WebSettings settings = web.getSettings();
                //设置可以支持JS
                settings.setJavaScriptEnabled(true);
                //设置WebView是否支持使用屏幕控件或手势进行缩放，默认是true，支持缩放。
                settings.setSupportZoom(true);
                //设置进度条的改变
                web.setWebChromeClient(new WebChromeClient(){
                    @Override
                    public void onProgressChanged(WebView view, int newProgress) {
                        super.onProgressChanged(view, newProgress);

                        progress.setVisibility(View.VISIBLE);
                        progress.setProgress(newProgress);
                        if (newProgress == 100){
                            progress.setVisibility(View.GONE);
                        }
                    }
                });
                // Android端定义一个方法,给js调用,
                // 使用webView对象,调用addJavascriptInterface方法(),
                // 第一个参数是写一个类,在这里面提供要暴露的方法,方法前最好加一个注解:@JavascriptInterface,
                // 第二个参数是标识字符串,js通过这个标识,调用我们的方法.    在js里面是这样使用的:Android.showToast(content);
                web.addJavascriptInterface(new Object(){
                    @JavascriptInterface//这句话千万不能忘
                    public void showToast(String ccccc){
                        Toast.makeText(MainActivity.this, ccccc, Toast.LENGTH_SHORT).show();
                    }
                },"Android");

                break;
            case R.id.diao:
                //调用js暴露的方法.格式固定:webView对象.loadUrl("javascript:js方法名(参数)");
                web.loadUrl("javascript:changeInputValue('我叫xxx')");
                break;
        }
    }
}

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity"
    android:orientation="vertical">
    <LinearLayout
        android:layout_weight="0.5"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal">
        <EditText
            android:id="@+id/edit"
            android:layout_weight="2"
            android:layout_width="0dp"
            android:layout_height="match_parent" />
        <Button
            android:text="加载"
            android:id="@+id/load"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent" />
    </LinearLayout>
    <ProgressBar
        android:layout_weight="0.5"
        android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"
        />
    <WebView
        android:id="@+id/web"
        android:layout_weight="8"
        android:layout_width="match_parent"
        android:layout_height="0dp"/>
    <LinearLayout
        android:layout_weight="0.5"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal">
        <Button
            android:text="调用JS"
            android:id="@+id/diao"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
    </LinearLayout>


</LinearLayout>