有道词典Demo(WebView)

学习了WebView组件,下面是一个有道词典的小案例

效果图如下:


代码如下:
布局

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/mainbg"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    <EditText
        android:id="@+id/etWord"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="27dp"
        android:background="@android:drawable/edit_text"
        android:ems="10"
        android:singleLine="true"
        android:textColor="#552006"
        android:textColorHint="#782f10" >
        <requestFocus />
    </EditText>
    <WebView
        android:id="@+id/wvSearchResult"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignLeft="@+id/etWord"
        android:layout_below="@+id/etWord"
        android:layout_marginTop="22dp"
        android:background="@drawable/bg_roundcorner"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textSize="25sp" />

    <Button
        android:id="@+id/btnSearch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/wvSearchResult"
        android:layout_alignParentRight="true"
        android:background="@drawable/ibsearchword"
        android:onClick="searchWord" />

</RelativeLayout>

MainActivity.java

package com.example.youdaodictionary;

import android.app.Activity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.Menu;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends Activity {
    private EditText etWord;
    private WebView wvResult;

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

        initViews();
    }

    private void initViews() {
        etWord = (EditText) findViewById(R.id.etWord);
        wvResult = (WebView) findViewById(R.id.wvSearchResult);
        wvResult.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    public void searchWord(View view) {
        String word = etWord.getText().toString();
        if (TextUtils.isEmpty(word)) {
            Toast.makeText(this, "查询内容不能为空!", Toast.LENGTH_LONG).show();
        } else {

            final String strUrl = "http://dict.youdao.com/m/search?keyfrom=dict.mindex&vendor=&q="
                    + word;
            wvResult.loadUrl(strUrl);
        }
    }
}



Webview是一种嵌入Android应用程序内的网页视图控件,可以通过WebView来显示和加载网页内容,同时也支持一些交互功能,比如调用相机、定位等。H5是一种基于HTML和CSS的网页开发技术,可以在Webview中使用。以下是Webview H5调用相机的Demo: 1. HTML代码: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>调用相机Demo</title> <style> img { width: 300px; height: auto; } </style> </head> <body> <h1>Webview H5调用相机Demo</h1> <p>请点击下面的按钮拍摄照片:</p> <button onclick="takePhoto()">拍照</button> <img id="photo" src="" alt="" /> <script> function takePhoto() { // 调用Android的相机接口 android.takePhoto(); } function setPhoto(dataUrl) { // 获取拍照后的base64编码数据,并显示在img标签中 var photo = document.getElementById('photo'); photo.src = dataUrl; photo.style.display = 'block'; } </script> </body> </html> ``` 2. Java代码: ```java public class MainActivity extends AppCompatActivity { private WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = findViewById(R.id.webview); webView.getSettings().setJavaScriptEnabled(true); webView.setWebChromeClient(new MyWebChromeClient(this)); webView.addJavascriptInterface(new JsInterface(this), "android"); webView.loadUrl("file:///android_asset/index.html"); } static class MyWebChromeClient extends WebChromeClient { private Activity mActivity; MyWebChromeClient(Activity mActivity) { this.mActivity = mActivity; } @Override public void onPermissionRequest(final PermissionRequest request) { mActivity.runOnUiThread(new Runnable() { @Override public void run() { request.grant(request.getResources()); } }); } } static class JsInterface { private Activity mActivity; JsInterface(Activity mActivity) { this.mActivity = mActivity; } // 声明被JavaScript调用的方法 @JavascriptInterface public void takePhoto() { Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); if (takePictureIntent.resolveActivity(mActivity.getPackageManager()) != null) { mActivity.startActivityForResult(takePictureIntent, 1); } } // 声明被Android调用的方法 @SuppressWarnings("unused") @JavascriptInterface public void setPhoto(String dataUrl) { final String finalDataUrl = dataUrl; mActivity.runOnUiThread(new Runnable() { @Override public void run() { webView.loadUrl("javascript:setPhoto('" + finalDataUrl + "');"); } }); } } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == 1 && resultCode == RESULT_OK) { Bundle extras = data.getExtras(); Bitmap photo = (Bitmap) extras.get("data"); String dataUrl = "data:image/jpeg;base64," + bitmapToBase64(photo); webView.loadUrl("javascript:setPhoto('" + dataUrl + "');"); } } private String bitmapToBase64(Bitmap bitmap) { ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream(); bitmap.compress(Bitmap.CompressFormat.JPEG, 100, byteArrayOutputStream); byte[] byteArray = byteArrayOutputStream.toByteArray(); return Base64.encodeToString(byteArray, Base64.DEFAULT); } } ``` 这个Demo的实现过程比较简单,大致思路如下: 1. 在HTML代码中添加一个按钮和一个img标签,用于拍照和显示照片。 2. 在Angular中,将这个函数作为一个模块,供调用。比如这样一个调用摄像头的模块: ```javascript angular.module('demo', []) .controller('DemoController', function($scope) { $scope.takePhoto = function() { // 调用相机 navigator.camera.getPicture($scope.onPhotoSuccess, $scope.onPhotoFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL }); }; $scope.onPhotoSuccess = function(imageData) { // 显示照片 $scope.photo = "data:image/jpeg;base64," + imageData; }; $scope.onPhotoFail = function() { alert('拍照失败!'); }; }); ``` 3. 在Java代码中,创建一个WebChromeClient类,用于处理权限请求。在做Android 6.0 runtime权限处理时,无法直接使用`setWebChromeClient`函数,需要重载该函数以保证打开相机时不需要再次请求权限。 ```java static class MyWebChromeClient extends WebChromeClient { private Activity mActivity; MyWebChromeClient(Activity mActivity) { this.mActivity = mActivity; } @Override public void onPermissionRequest(final PermissionRequest request) { mActivity.runOnUiThread(new Runnable() { @Override public void run() { request.grant(request.getResources()); } }); } } ``` 4. 在Java的`JsInterface`类中,声明一个被JavaScript调用的方法`takePhoto()`,该方法通过意图调用系统相机应用。照片拍摄结束后,通过调用另一个被Android调用的方法`setPhoto(String dataUrl)`将照片通过WebView的`loadUrl()`函数传递回JavaScript中。 ```java static class JsInterface { private Activity mActivity; JsInterface(Activity mActivity) { this.mActivity = mActivity; } @JavascriptInterface public void takePhoto() { Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); if (takePictureIntent.resolveActivity(mActivity.getPackageManager()) != null) { mActivity.startActivityForResult(takePictureIntent, 1); } } @SuppressWarnings("unused") @JavascriptInterface public void setPhoto(String dataUrl) { final String finalDataUrl = dataUrl; mActivity.runOnUiThread(new Runnable() { @Override public void run() { webView.loadUrl("javascript:setPhoto('" + finalDataUrl + "');"); } }); } } ``` 5. 在Java代码的`onActivityResult()`方法中获取拍摄后的照片,并通过`loadUrl()`函数传递到JavaScript中。 ```java @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == 1 && resultCode == RESULT_OK) { Bundle extras = data.getExtras(); Bitmap photo = (Bitmap) extras.get("data"); String dataUrl = "data:image/jpeg;base64," + bitmapToBase64(photo); webView.loadUrl("javascript:setPhoto('" + dataUrl + "');"); } } ``` 以上就是一个简单的Webview H5调用相机Demo的实现过程。注意,该Demo中的实现方式仅供参考,实际应用中应该严格控制照片的安全性和隐私保护。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值