背景:在一张图片中,有时希望点击不同的区域时,有不同的表现。
思路:把要用的图片调整为合适的大小后(重要),导入到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>
分享到:
相关推荐
图片不规则区域点击事件处理 HotImg是基于对一张图片进行不规则区域点击响应不同事件。 基本内容 1.对图片的部分区域进行可响应事件 2.对图片进行缩放后,仍可响应区域点击事件 3.对图片进行移动后.仍可响应区域...
在Android开发中,"图片区域点击"是一种常见的交互设计,允许用户在图片的不同区域内执行不同的操作,例如点击某个特定区域跳转到其他页面或者执行特定功能。这种技术通常被称为图片热区,它使得图片不再仅仅是视觉...
在Android开发中,"区域热化"是一种技术,它允许我们为特定的屏幕区域添加交互性,例如点击、滑动等事件监听。这种技术通常用于创建互动式UI元素,如地图上的热点、图像上的可点击区域等。在这个"android区域热化-...
1. **热区**:热区是指在全景图像上设置的交互区域,用户可以通过点击或触碰这些区域来触发特定事件,如查看更多信息、播放视频或链接到其他页面。热区是增强全景体验的重要工具,可以提供丰富的互动元素,使用户更...
在ECharts中,下钻可以通过`dispatchAction`方法实现,监听特定的地图区域点击事件,然后更新配置项,展现更详细的子区域地图。例如,当点击某个洲时,可以切换到显示该洲内的国家地图。 至于“选中”和“高亮”,...
2. "按钮-跑车欣赏":这个名字可能对应一个用户界面(UI)设计的实例,展示了如何创建具有动态效果的按钮,例如在点击时显示跑车图片或信息。这个例子可能涵盖UI/UX设计原则,响应式布局,以及JavaScript或CSS动画的...