有道词典Demo(WebView)

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

效果图如下:

 

源码下载地址:https://coding.net/u/gxs1225/p/YouDaoDictionary/git

代码如下:
布局

activity_main.xml

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

    <span class="hljs-tag"><<span class="hljs-title">Button
</span>        <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/btnSearch"</span>
        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span>
        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
        <span class="hljs-attribute">android:layout_above</span>=<span class="hljs-value">"@+id/wvSearchResult"</span>
        <span class="hljs-attribute">android:layout_alignParentRight</span>=<span class="hljs-value">"true"</span>
        <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@drawable/ibsearchword"</span>
        <span class="hljs-attribute">android:onClick</span>=<span class="hljs-value">"searchWord"</span> /></span>

<span class="hljs-tag"></<span class="hljs-title">RelativeLayout</span>></span></code>
 

MainActivity.java

<code class="hljs java has-numbering"><span class="hljs-keyword">package</span> com.example.youdaodictionary;

<span class="hljs-keyword">import</span> android.app.Activity;
<span class="hljs-keyword">import</span> android.os.Bundle;
<span class="hljs-keyword">import</span> android.text.TextUtils;
<span class="hljs-keyword">import</span> android.view.Menu;
<span class="hljs-keyword">import</span> android.view.View;
<span class="hljs-keyword">import</span> android.webkit.WebView;
<span class="hljs-keyword">import</span> android.webkit.WebViewClient;
<span class="hljs-keyword">import</span> android.widget.EditText;
<span class="hljs-keyword">import</span> android.widget.Toast;

<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Activity</span> {</span>
    <span class="hljs-keyword">private</span> EditText etWord;
    <span class="hljs-keyword">private</span> WebView wvResult;

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(Bundle savedInstanceState) {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();
    }

    <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">initViews</span>() {
        etWord = (EditText) findViewById(R.id.etWord);
        wvResult = (WebView) findViewById(R.id.wvSearchResult);
        wvResult.setWebViewClient(<span class="hljs-keyword">new</span> WebViewClient() {
            <span class="hljs-annotation">@Override</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">boolean</span> <span class="hljs-title">shouldOverrideUrlLoading</span>(WebView view, String url) {
                view.loadUrl(url);
                <span class="hljs-keyword">return</span> <span class="hljs-keyword">true</span>;
            }
        });
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">boolean</span> <span class="hljs-title">onCreateOptionsMenu</span>(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">true</span>;
    }

    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">searchWord</span>(View view) {
        String word = etWord.getText().toString();
        <span class="hljs-keyword">if</span> (TextUtils.isEmpty(word)) {
            Toast.makeText(<span class="hljs-keyword">this</span>, <span class="hljs-string">"查询内容不能为空!"</span>, Toast.LENGTH_LONG).show();
        } <span class="hljs-keyword">else</span> {

            <span class="hljs-keyword">final</span> String strUrl = <span class="hljs-string">"http://dict.youdao.com/m/search?keyfrom=dict.mindex&vendor=&q="</span>
                    + word;
            wvResult.loadUrl(strUrl);
        }
    }
}
</code>

 

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、付费专栏及课程。

余额充值