Android网络：开发浏览器（四）——功能完善之长按网页图片菜单

最新推荐文章于 2023-09-14 10:40:01 发布

本人dddd牛仔

最新推荐文章于 2023-09-14 10:40:01 发布

阅读量7.2k

点赞数 3

分类专栏： IT Android基础文章标签： Android开发 webbrowser 仿UC webview与js交互长按显示菜单

本文链接：https://blog.csdn.net/ddddpow/article/details/10477761

版权

IT 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

Android基础

18 篇文章 2 订阅

订阅专栏

上述的历史和书签的功能已经实现。不过如果我们长时间按住图片，并不会出现如同UC中的一系列选项，我们可以来看看UC中的长按图片出现的菜单。

图10.2.9 UC中的长按图片菜单

我们可以看到UC中可以识别出这个网页中的图片，那么它是如何做到的呢？

我们仔细观察，可以发现它是触发了长时间按的事件，我的手机可以清楚的感受到在触发事件的同时有一个震动感，不知道各位的有没有。

其实，WebView已经帮我们封装了一个函数，这个函数可以轻松的获取到我们点击的目标类型，包括一些额外的信息。这些额外的信息是什么？比如说，图片的额外信息就是这张图片的地址，手机号码的额外信息就是手机号，电子邮件的额外信息就是电子邮件字符串等等。

现在我们要做的就是获取图片，包括的操作有查看图片、保存图片和查看属性这三项。其实我们可以通过创建上下文菜单来轻松的创建菜单，不过我不满足这些个效果，我更想要的是UC的那种效果。

那么我们还是可以通过popupwindow这个类来实现弹出菜单的效果。

我们将之前的ItemLongClickedPopWindow这个类进行修改：

package com.example.other;
 
import com.example.androidstudy_web.R;
 
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.PopupWindow;
 
public class ItemLongClickedPopWindow extends PopupWindow{
  
   /**
    * 书签条目弹出菜单
    * @value
    * {@value}
    * */
   public static final int FAVORITES_ITEM_POPUPWINDOW = 0;
   /**
    * 书签页面弹出菜单
    * @value
    * {@value}
    * */
   public static final int FAVORITES_VIEW_POPUPWINDOW = 1;
   /**
    * 历史条目弹出菜单
    * @value
    * {@value}
    * */
   public static final int HISTORY_ITEM_POPUPWINDOW = 3;
   /**
    * 历史页面弹出菜单
    * @value
    * {@value}
    * */
   public static final int HISTORY_VIEW_POPUPWINDOW = 4;
   /**
    * 图片项目弹出菜单
    * @value
    * {@value}
    * */
   public static final int IMAGE_VIEW_POPUPWINDOW = 5;
   /**
    * 超链接项目弹出菜单
    * @value
    * {@value}
    * */
   public static final int ACHOR_VIEW_POPUPWINDOW = 6;
  
    private LayoutInflater itemLongClickedPopWindowInflater;
    private View itemLongClickedPopWindowView;
    private Context context;
   
    private int type;
   
    /**
     * 构造函数
     * @param context 上下文
     * @param width 宽度
     * @param height 高度
     * */
    publicItemLongClickedPopWindow(Context context, int type, int width, int height){
       super(context);
       this.context = context;
       this.type = type;
      
       //创建
       this.initTab();
      
       //设置默认选项
       setWidth(width);
       setHeight(height);
       setContentView(this.itemLongClickedPopWindowView);
       setOutsideTouchable(true);
       setFocusable(true);
    }
   
   
    //实例化
    private void initTab(){
       this.itemLongClickedPopWindowInflater = LayoutInflater.from(this.context);
       switch(type){
       case FAVORITES_ITEM_POPUPWINDOW:
          this.itemLongClickedPopWindowView = this.itemLongClickedPopWindowInflater.inflate(R.layout.list_item_longclicked_favorites, null);
          break;
       case FAVORITES_VIEW_POPUPWINDOW:
          //对于书签内容弹出菜单，未作处理
          break;
       case HISTORY_ITEM_POPUPWINDOW:
          this.itemLongClickedPopWindowView = this.itemLongClickedPopWindowInflater.inflate(R.layout.list_item_longclicked_history, null);
          break;
       case HISTORY_VIEW_POPUPWINDOW:
          //对于历史内容弹出菜单，未作处理
          break;
       case ACHOR_VIEW_POPUPWINDOW:
          //超链接
          break;
       case IMAGE_VIEW_POPUPWINDOW:
          //图片
          this.itemLongClickedPopWindowView = this.itemLongClickedPopWindowInflater.inflate(R.layout.list_item_longclicked_img, null);
          break;
       }
      
}
 
    public View getView(int id){
       return this.itemLongClickedPopWindowView.findViewById(id);
    }
}

代码片段10.2.28 弹出菜单的实现

自然需要的xml布局文件也是不可或缺的

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="5dp"
    android:orientation="vertical" >
   
    <TextView
       android:id="@+id/item_longclicked_viewImage"
       android:layout_width="match_parent"
       android:layout_height="20dp"
       android:textColor="@android:color/white"
       android:textSize="16sp"
       android:text="@string/viewImage"
       android:layout_marginLeft="15dp"
       android:layout_marginTop="20dp"
       android:layout_marginBottom="5dp"
       />
   
    <TextView
       android:id="@+id/item_longclicked_saveImage"
       android:layout_width="match_parent"
       android:layout_height="20dp"
       android:textColor="@android:color/white"
       android:textSize="16sp"
       android:text="@string/saveImage"
       android:layout_marginLeft="15dp"
       android:layout_marginTop="20dp"
       android:layout_marginBottom="5dp"
       />
   
    <TextView
       android:id="@+id/item_longclicked_viewImageAttributes"
       android:layout_width="match_parent"
       android:layout_height="20dp"
       android:textColor="@android:color/white"
       android:textSize="16sp"
       android:text="@string/viewImageAttributes"
       android:layout_marginLeft="15dp"
       android:layout_marginTop="20dp"
       android:layout_marginBottom="5dp"
       />
 
</LinearLayout>

代码片段10.2.29 xml图片弹出菜单布局文件

这个布局文件的预览图如下：

图10.2.10 图片弹出菜单效果预览

好了，定义好了弹出菜单，我们可以来看看如何让他出现了。

之前已经提到过了WebView的getHitTestResult()的函数，现在我们来看下它的一些方法：

方法	描述
getType()	获取所选中目标的类型，可以是图片，超链接，邮件，电话等等
getExtra()	获取额外的信息

表10.2.1 getHitTestResult()函数的方法

简要说下思路，根据这个函数获得目标类型，之后弹出不同的菜单即可。

现在我们可以来看下代码，现在的代码比较简单，对布局没有进行判断，指定了布局判断为图片菜单。

@Override
      public boolean onLongClick(View v) {
         HitTestResult result = ((WebView) v).getHitTestResult();
         if (null == result)
            return false;
 
         int type = result.getType();
         if (type == WebView.HitTestResult.UNKNOWN_TYPE)
            return false;
 
         if (type == WebView.HitTestResult.EDIT_TEXT_TYPE) {
            // let TextViewhandles context menu
            return true;
         }
        
         final ItemLongClickedPopWindow itemLongClickedPopWindow = newItemLongClickedPopWindow(MainActivity.this, ItemLongClickedPopWindow.IMAGE_VIEW_POPUPWINDOW, 200, 250);
 
         // Setup custom handlingdepending on the type
         switch (type) {
         case WebView.HitTestResult.PHONE_TYPE:
            // 处理拨号
            break;
         case WebView.HitTestResult.EMAIL_TYPE:
            // 处理Email
            break;
         case WebView.HitTestResult.GEO_TYPE:
            // TODO
            break;
         case WebView.HitTestResult.SRC_ANCHOR_TYPE:
            // 超链接
            Log.d(DEG_TAG, "超链接");
            break;
         case WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE:
         case WebView.HitTestResult.IMAGE_TYPE:
            // 处理长按图片的菜单项
            Log.d(DEG_TAG, "图片");
            itemLongClickedPopWindow.showAtLocation(v, Gravity.TOP | Gravity.LEFT, 0, 0);
            break;
         default:
            break;
         }
         return true;
      }

代码片段10.2.30 长按事件的实现。

这里的类似于WebView.HitTestResult.PHONE_TYPE这样的变量所指代的就是目标的类型，根据名字很容易就理解了。

为了更方便各位查询，我在这里总结一下类型：

类型名	意义
WebView.HitTestResult.UNKNOWN_TYPE	未知类型
WebView.HitTestResult.PHONE_TYPE	电话类型
WebView.HitTestResult.EMAIL_TYPE	电子邮件类型
WebView.HitTestResult.GEO_TYPE	地图类型
WebView.HitTestResult.SRC_ANCHOR_TYPE	超链接类型
WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE	带有链接的图片类型
WebView.HitTestResult.IMAGE_TYPE	单纯的图片类型
WebView.HitTestResult.EDIT_TEXT_TYPE	选中的文字类型

表10.2.2 HitTestResult各个类型

现在我们可以看看实际的效果。

图10.2.11 长按图片弹出菜单效果

我们可以看到这个菜单弹出来的情况，并不如我们预期的是点击哪里在哪个地方弹出来。很显然使我们没有将x，y的值传递给popupwindow。

那么我们怎么获取x，y的值呢？

这里我们可以利用一下我们之前所构建的GestureDector类，这个类中，我们之前定义了滑动的事件，在这里同样也有个onLongPress事件。而且，最重要且最有趣的是，这个事件虽然跟我们自定义的长按事件一致，但是前者是先发生的。也就是说，webView是先执行onTouch中的onLongPress事件，后执行OnLongClickedListener中的OnLongClick事件。这就给我们提供了一个方便。

我们可以在onLongPress事件中如下定义：

@Override
      public void onLongPress(MotionEvent e) {
         PointerXY.x = (int) e.getX();
         PointerXY.y = (int) e.getY();
      }

代码片段10.2.31 OnLongPress事件

当然这里的PinterXY是我自己定义的一个类，专门用来存放事件触发的坐标。

private static class PointerXY{
      public static int x;
      public static int y;
      public static int getX() {
         return x;
      }
      public static int getY() {
         return y;
      }
     
   }

代码片段10.2.32 PointXY类

好了，定义完了这些。我们就可以轻松的获取到自己想要的东西，将之前展示popupwindow的方法修改如下：

itemLongClickedPopWindow.showAtLocation(v, Gravity.TOP | Gravity.LEFT, PointerXY.getX(),PointerXY.getY()+10);

代码片段10.2.33 修改展示方法

现在我们再来看看，与之前的效果想对比（+10是为了修正）：

图10.2.12 修改前后的对比

现在展示效果已经完成了，那么其他的就相对简单多了，我们只需要进行功能的实现就行了。

case WebView.HitTestResult.IMAGE_TYPE:
            // 处理长按图片的菜单项
            Log.d(DEG_TAG, "图片");
            itemLongClickedPopWindow.showAtLocation(v, Gravity.TOP | Gravity.LEFT, PointerXY.getX(),PointerXY.getY()+10);
            TextView viewImage = (TextView)itemLongClickedPopWindow.getView(R.id.item_longclicked_viewImage);
            TextView saveImage = (TextView)itemLongClickedPopWindow.getView(R.id.item_longclicked_saveImage);
            TextView viewImageAttributes = (TextView)itemLongClickedPopWindow.getView(R.id.item_longclicked_viewImageAttributes);
            popWindowMenu = newPopWindowMenu(result.getType(), result.getExtra());
            viewImage.setOnClickListener(popWindowMenu);
            saveImage.setOnClickListener(popWindowMenu);
            viewImageAttributes.setOnClickListener(popWindowMenu);
            break;

代码片段10.2.34 功能实现图片菜单

至于popWindowMenu的实现如下：

/**
    * OnClickListener自定义继承类
    * 用来解决菜单功能处理问题
    * */
   private class PopWindowMenu implements OnClickListener{
     
      private int type;
      private String value;
     
      public PopWindowMenu(int type, String value){
         this.type = type;
         this.value = value;
      }
 
      @Override
      public void onClick(View v) {
         if(v.getId()==R.id.item_longclicked_viewImage){
            //图片菜单-查看图片
         }else if(v.getId()==R.id.item_longclicked_saveImage){
            //图片菜单-保存图片
         }else if(v.getId()==R.id.item_longclicked_viewImageAttributes){
            //图片菜单-查看属性
         }
      }
     
   }

代码片段10.2.35 点击事件

至于如何实现在下一个版本中实现。

案例源码：

AndroidSudty_web_V3.0_by dddd牛仔

声明：转载请注明出处。