正文
Android网络：开发浏览器（二）——功能完善之长按网页图片菜单
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
上述的历史和书签的功能已经实现。不过如果我们长时间按住图片，并不会出现如同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牛仔
声明：转载请注明出处。
