Android---Java与WebView的交互之Goolge翻译

想找工作了，于是乎，自娱自乐着找了找之前的一些小应用完善完善，以作备用。

今天想介绍的Java与WebView的交互，暂时只应用到了一部分：Java用JS代码实现实时翻译；其次还使用到诸如SharedPreferences、自定义Dialog、网络测试、Spinner控件使用等等，其实完全掌握也是有蛮多东东的。

（1）中间按钮的效果实现，就是用到了SharedPreferences,使用SharedPreferences保存上一次的源语言代码（languagecode）和目标语言代码（例如：简体中文：zh-cn,繁体中文：zh-tw),这两个东东是google翻译api必须得两个参数后面在详细介绍。语言代码为了方便省事，就用一个SrcAndDest类进行封装。

 

代码

   
   

    
    
    
    public
    
     List
    
    <
    
    HashMap
    
    <
    
    String,Object
    
    >>
    
     getSrcAndDest(){
 list
    
    =
    
    new
    
     ArrayList
    
    <
    
    HashMap
    
    <
    
    String,Object
    
    >>
    
    ();
 HashMap
    
    <
    
    String,Object
    
    >
    
     map 
    
    =
    
     
    
    new
    
     HashMap
    
    <
    
    String,Object
    
    >
    
    ();
 map.put(
    
    "
    
    enc
    
    "
    
    , 
    
    "
    
    zh-CN
    
    "
    
    );
 map.put(
    
    "
    
    text
    
    "
    
    , 
    
    "
    
    中文（简体）
    
    "
    
    );
 list.add(map);
 map 
    
    =
    
     
    
    new
    
     HashMap
    
    <
    
    String,Object
    
    >
    
    ();
 map.put(
    
    "
    
    enc
    
    "
    
    , 
    
    "
    
    zh-TW
    
    "
    
    );
 map.put(
    
    "
    
    text
    
    "
    
    , 
    
    "
    
    中文（繁体）
    
    "
    
    );
 list.add(map);
 map 
    
    =
    
     
    
    new
    
     HashMap
    
    <
    
    String,Object
    
    >
    
    ();
 map.put(
    
    "
    
    enc
    
    "
    
    , 
    
    "
    
    en
    
    "
    
    );
 map.put(
    
    "
    
    text
    
    "
    
    , 
    
    "
    
    英语
    
    "
    
    );
 list.add(map);
   
   
   
   

    
    　　　　 ........
}
   
   

每次退出程序时，只用保存源（srcIndex)和目标（destIndex)在list中位置（position)，然后就能得到enc（languagecode：google翻译Api的参数）和text(用于显示在按钮上的文本)

代码

   
   

    
    
    
     
    
    private
    
     
    
    void
    
     putSetting(
    
    int
    
     srcindex,
    
    int
    
     destindex){
 SharedPreferences settings
    
    =
    
    getPreferences(MODE_PRIVATE);
 Editor editor
    
    =
    
    settings.edit();
 editor.putInt(
    
    "
    
    srcIndex
    
    "
    
    , srcindex);
 editor.putInt(
    
    "
    
    destIndex
    
    "
    
    , destindex);
 editor.commit();
 }
   
   

进入界面，进行初始化设置,获得src和dest的enc和text

 

代码

   
   

    
    
    
     
    
    /*
    
    
 * 初始化上一次src和dest
 
    
    */
    
    
 
    
    private
    
     
    
    void
    
     getSetting(){
 SharedPreferences settings
    
    =
    
    getPreferences(MODE_PRIVATE);
 srcIndex
    
    =
    
    settings.getInt(
    
    "
    
    srcIndex
    
    "
    
    , 
    
    0
    
    );
 destIndex
    
    =
    
    settings.getInt(
    
    "
    
    destIndex
    
    "
    
    , 
    
    0
    
    );
 
    
    //
    
    得到src和dest语言LanguageCode：enc（例如：简体中文：zh-cn,繁体中文：zh-tw)和文本(text)
    
    

    
     src
    
    =
    
    alenc.get(srcIndex);
    
    //
    
    alenc一个ArrayList<String>对象，保存enc
    
    

    
     dest
    
    =
    
    alenc.get(destIndex);
 stext
    
    =
    
    altext.get(srcIndex);
    
    //
    
    altext一个ArrayList<String>对象，保存text
    
    

    
     dtext
    
    =
    
    altext.get(destIndex);
 String text
    
    =
    
    stext
    
    +
    
    "
    
    >>
    
    "
    
    +
    
    dtext;
   
   
   
   

    
    　　　　 //第一次使用时，需要进行翻译配置即src和dest的配置
 
    
    if
    
    (srcIndex
    
    !=
    
    destIndex){
 btnch.setText(text);
 }
    
    else
    
    {
 
    
    if
    
    (srcIndex
    
    ==
    
    0
    
    ){
 btnch.setText(
    
    "
    
    翻译设置
    
    "
    
    );
 }
    
    else
    
    {
 btnch.setText(text);
 }
 }
 }
   
   

(2)第一个按钮的作用是实现src和dest的互换，比如说从简体中文>>英语换成英语>>简体中文，实现这个效果很简单，用上面两个方法就能实现，先保存（putsettings(int srcindex,int destindex)）然后再获取(getsettings())

(3)翻译配置：

这里是一个自定义的Dialog,因为使用到了Spinner控件，所以自定义一个xml布局是最方便的。

代码

   
   

    
    
    
    //
    
    自定义view的Dialog
    
    

    
     LayoutInflater flater
    
    =
    
    this
    
    .getLayoutInflater();
 View view
    
    =
    
    flater.inflate(R.layout.alertview, 
    
    null
    
    );
 AlertDialog.Builder builder
    
    =
    
    new
    
     AlertDialog.Builder(
    
    this
    
    );
 builder.setView(view);
 builder.setTitle(
    
    "
    
    languageCode 设置
    
    "
    
    );
 spsrc
    
    =
    
    (Spinner)view.findViewById(R.id.spsrc);
 spdest
    
    =
    
    (Spinner)view.findViewById(R.id.spdest);
 ArrayAdapter
    
    <
    
    String
    
    >
    
     adapter
    
    =
    
    new
    
     ArrayAdapter
    
    <
    
    String
    
    >
    
    (
    
    this
    
    ,
 android.R.layout.simple_spinner_item, altext);
 adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
 spsrc.setAdapter(adapter);
 spsrc.setSelection(srcIndex);
 adapter
    
    =
    
    new
    
     ArrayAdapter
    
    <
    
    String
    
    >
    
    (
    
    this
    
    ,
 android.R.layout.simple_spinner_item, altext);
 adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
 spdest.setAdapter(adapter);
 spdest.setSelection(destIndex);
 builder.setPositiveButton(
    
    "
    
    确定
    
    "
    
    , 
    
    new
    
     DialogInterface.OnClickListener() {
 
 @Override
 
    
    public
    
     
    
    void
    
     onClick(DialogInterface dialog, 
    
    int
    
     which) {
 
    
    //
    
     TODO Auto-generated method stub
    
    

    
     srcIndex
    
    =
    
    spsrc.getSelectedItemPosition();
 destIndex
    
    =
    
    spdest.getSelectedItemPosition();
 
    
    //
    
    先保存，后获取配置
    
    

    
     putSetting(srcIndex, destIndex);
 getSetting();
 }
 });
 builder.setNegativeButton(
    
    "
    
    取消
    
    "
    
    ,
    
    new
    
     DialogInterface.OnClickListener() {
 
 @Override
 
    
    public
    
     
    
    void
    
     onClick(DialogInterface dialog, 
    
    int
    
     which) {
 
    
    //
    
     TODO Auto-generated method stub
    
    

    
     
 }
 });
 builder.create().show();
   
   

（4）最后一个就是使用Google翻译的Api实现翻译，这里需要用到一个html文件，这个文件需要放到assets文件夹中（注意下图中有点的url），html中包含了两个方法，一个是Google的API，另一个是自己写的JavaScript函数（Java中就是调用这个translate函数）

代码

   
   

    
    
    
    <
    
    html
    
    >
    
    

    
    <
    
    head
    
    >
    
    

    
    <
    
    meta 
    
    http-equiv
    
    ="Content-Type"
    
     content
    
    ="text/html; charset=utf-8"
    
     
    
    />
    
    

    
    </
    
    head
    
    >
    
    

    
    <
    
    script 
    
    type
    
    ="text/javascript"
    
     src
    
    ="http://www.google.com/jsapi"
    
    ></
    
    script
    
    >
    
     

    
    <
    
    script 
    
    type
    
    ="text/javascript"
    
    >
    
    
 google.load(
    
    "
    
    language
    
    "
    
    , 
    
    "
    
    1
    
    "
    
    );
 
    
    function
    
     g_translate(strInput,src,dest,out){
 google.language.translate(strInput, src, dest, 
    
    function
    
    (result){
 
    
    if
    
     (
    
    !
    
    result.error){
 document.getElementById(out).innerHTML
    
    =
    
    result.translation;
 }
    
    else
    
    
 document.getElementById(out).innerHTML
    
    =
    
    "
    
    google_translate Error!
    
    "
    
    ;
 });
 } 

    
    </
    
    script
    
    >
    
    
 


    
    <
    
    body 
    
    style
    
    ="background-color:#fff"
    
    >
    
    

    
    <
    
    div 
    
    id
    
    ="show"
    
     style
    
    ="font-size:16px; color:#666;"
    
    ></
    
    div
    
    >
    
    

    
    <
    
    script 
    
    language
    
    ="javascript"
    
    >
   
   
   
   

    
    <!--strTranslate:要翻译的文本；src:源语言；dest:目标语言 -->

    
    function
    
     translate(strTranslate,src,dest)
{
 document.getElementById(
    
    "
    
    show
    
    "
    
    ).innerHTML
    
    =
    
    "
    
    翻译中.....
    
    "
    
    ;
 g_translate(strTranslate,src,dest,
    
    "
    
    show
    
    "
    
    );
}

    
    </
    
    script
    
    >
    
    

    
    </
    
    body
    
    >
    
    

    
    </
    
    html
    
    >
   
   

如果要允许Java调用html中的Js方法，必须设置WebView的WebSettings属性

  
  

   
   
   
   //
   
   添加web设置,js可用
   
   

   
   view.loadUrl(url);
WebSettings settings
   
   =
   
   view.getSettings();
settings.setJavaScriptEnabled(
   
   true
   
   );
  
  

检查网络是否连接：

代码

   
   

    
    
    
     
    
    //
    
    检查网络是否连接
    
    

    
     
    
    public
    
     
    
    boolean
    
     checkIntent(){
 ConnectivityManager mannager
    
    =
    
    (ConnectivityManager)
 
    
    this
    
    .getSystemService(CONNECTIVITY_SERVICE);
 NetworkInfo info
    
    =
    
    mannager.getActiveNetworkInfo();
 
    
    if
    
    (info
    
    ==
    
    null
    
     
    
    ||
    
     
    
    !
    
    info.isConnected()){
 
    
    return
    
     
    
    false
    
    ;
 }
 
    
    if
    
    (info.isRoaming()){
 
    
    return
    
     
    
    true
    
    ;
 }
 
    
    return
    
     
    
    true
    
    ;
 }
   
   

最后点击翻译按钮调用js方法：

代码

   
   

    
    
    
     hander.post(
    
    new
    
     Runnable() {
 
 @Override
 
    
    public
    
     
    
    void
    
     run() {
 String text
    
    =
    
    etinput.getText().toString();
 
    
    if
    
    (
    
    !
    
    text.equals(
    
    ""
    
    )){
 
    
    //
    
     TODO Auto-generated method stub
    
    

    
     Log.v(
    
    "
    
    main
    
    "
    
    , src
    
    +
    
    "
    
    /
    
    "
    
    +
    
    dest
    
    +
    
    "
    
    /
    
    "
    
    +
    
    srcIndex
    
    +
    
    "
    
    /
    
    "
    
    +
    
    destIndex);
 view.loadUrl(
    
    "
    
    javascript:translate('
    
    "
    
    +
    
     
 text 
    
    +
    
     
    
    "
    
    ','
    
    "
    
    +
    
    src
    
    +
    
    "
    
    ','
    
    "
    
    +
    
    dest
    
    +
    
    "
    
    ')
    
    "
    
    );
 }
 }
 });
   
   

 上一张效果图：希望找工作顺利，阿门