android 图片区域点击（图片热区）

背景：在一张图片中，有时希望点击不同的区域时，有不同的表现。

思路：把要用的图片调整为合适的大小后（重要），导入到Dreamweaver中，在图片上，把需要添加事件的部分建立图片“热区”，然后映射到手机上的相应区域（有点麻烦，但没想到其它好的方法）。

在该实例中，只对西藏与新疆做了热区响应

效果图：

图片热区

1.重写ImageView类(关键代码如下)

a.从arrays.xml中加载热点区域

//从arrays.xml中加载热点区域
	protected void initMapArea() {
		mMapArea.clear();
		mFocus.clear();
		String[] keys = mContext.getResources().getStringArray(R.array.map_area);
		MapArea bodyArea = null;
		int idenId = -1;
		if(keys != null) {
			for(String key : keys) {
				idenId = mContext.getResources().getIdentifier(key, "array", mContext.getPackageName());
				int[] paths = mContext.getResources().getIntArray(idenId);
				idenId = mContext.getResources().getIdentifier(key + "_code", "array", mContext.getPackageName());
				String[] ptKeys = mContext.getResources().getStringArray(idenId);
				bodyArea = new MapArea(ptKeys, paths);
				mMapArea.put(key, bodyArea);
			}
		}
	}

b.把照片上的位置与手机位置进行统一

//进行不同材质机器的兼容
private float toDip(Context context,float pxValue){
	final float scale = context.getResources().getDisplayMetrics().density;
	return (int) (pxValue * scale + 0.5f);
}

c.热点区域判断

//判断触摸点是否在热点区域
protected void checkAreas(MotionEvent event) {
        mFocus.clear();
	for(String key : mMapArea.keySet()) {
		mPathRectF.setEmpty();
		Path path = mMapArea.get(key).getPath();
		path.computeBounds(mPathRectF, true);
		if(mPathRectF.contains(event.getX(),event.getY())) {
			mFocus.add(key);
			break;
		}
	}
}

d.热点区域坐标(arrays.xml)

 <string-array name="map_area">
        <item>map_xj</item>
        <item>map_xz</item>
    </string-array>
    
    <string-array name="map_xj_code">
        <item>XinJiang</item>
        <item>新疆</item>
    </string-array>
    
    <string-array name="map_xz_code">
        <item>XiZang</item>
        <item>西藏</item>
    </string-array>

    <integer-array name="map_xz">
        <item>27</item>
        <item>155</item>
           .......

2.在调用的Activity中做交互

protected Handler mHandler = new Handler() {
	public void handleMessage(android.os.Message msg) {
		if(HotImgActivity.this.isFinishing()) {
			return;
		}
		Object obj = msg.obj;
		if(obj != null) {
			String[] codes = (String[]) obj;
			String message  ="Code:" + codes[0] + ", Name:" + codes[1]; 
			Toast.makeText(HotImgActivity.this, message, Toast.LENGTH_SHORT).show();
		}
	};
};

3.在布局文件中体现

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
    <!-- 注意scaleType要为'matrix'即原始图像的大小，这样才能保证绘制的点的位置没有发生变化，如果其它，则需要另做转换 -->
    <com.hotimg.view.MapAreaView
        android:id="@+id/map_areaview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:scaleType="matrix"
        android:src="@drawable/china" />
</HorizontalScrollView>

android 图片区域点击（图片热区）

猜你喜欢