有道词典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);  
        }  
    }  
}  



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值