有时候我们拿到一张背景图片,客户要求点击图片的不同区域去跳转或者实现不同的操作事件。我们首先要确认图片的点击区域,往往我们会在布局文件那里下手,但是这样不好做适配,所以我实现了以下方法,基本功能可以实现,而且也做好了适配,可以参考一下。

1.找到对应区域的像素点。图片中需要点击的区域是圆,所以只要找到圆心和测量出半径即可(介绍一款图片软件Mark Man),由于得到的是PX,所以要转换为dip(dp=px/2);

arrays.xml

<!-- 男人头部 -->
<string-array name="man_head">
<item>man_hair</item>
<item>man_eye</item>
<item>man_mouth</item>
<item>man_throat</item>
<item>man_mind</item>
<item>man_ear</item>
<item>man_nose</item>
</string-array> <string-array name="man_hair_code">
<item>hair</item>
<item>头发</item>
</string-array> <string-array name="man_eye_code">
<item>eye</item>
<item>眼</item>
</string-array>
<string-array name="man_mouth_code">
<item>mouth</item>
<item>口腔</item>
</string-array>
<string-array name="man_throat_code">
<item>throat</item>
<item>咽喉</item>
</string-array>
<string-array name="man_mind_code">
<item>mind</item>
<item>头/脑</item>
</string-array>
<string-array name="man_ear_code">
<item>ear</item>
<item>耳朵</item>
</string-array>
<string-array name="man_nose_code">
<item>nose</item>
<item>鼻</item>
</string-array> <integer-array name="man_hair">
<item>30</item>
<item>46</item>
<item>20</item>
</integer-array>
<integer-array name="man_eye">
<item>30</item>
<item>103</item>
<item>20</item>
</integer-array>
<integer-array name="man_mouth">
<item>30</item>
<item>160</item>
<item>20</item>
</integer-array>
<integer-array name="man_throat">
<item>30</item>
<item>220</item>
<item>20</item>
</integer-array>
<integer-array name="man_mind">
<item>289</item>
<item>44</item>
<item>20</item>
</integer-array>
<integer-array name="man_ear">
<item>289</item>
<item>105</item>
<item>20</item>
</integer-array>
<integer-array name="man_nose">
<item>289</item>
<item>162</item>
<item>20</item>
</integer-array>

2.实现自定义ImageView控件,用来存放图片。

BaseBodyView.java

/**
* 类说明:身体区域
* array必存三个点 圆中心坐标 x,y 半径 r
* Author: gaobaiq
* Date: 2016/7/23 11:22
*/
public abstract class BaseBodyView extends ImageView {
protected Context mContext; // 保存所有点击区域
private Map<String, BodyArea> mBodyArea ; // 保存点击的区域
private Set<String> mFocus; protected Paint paint = new Paint(); // 点击时Path区域的转换,用于触摸点的判断
protected RectF mPathRectF = new RectF(); protected OnBodyClickListener mBodyClick; public BaseBodyView(Context context) {
this(context, null);
} public BaseBodyView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
} public BaseBodyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
initDatas();
} private void initDatas() {
mBodyArea = new HashMap<>();
mFocus = new HashSet<>();
//paint.setStyle(Paint.Style.FILL);
//paint.setARGB(170, 0, 205, 0);
initBodyArea();
} @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 进行触摸区域绘制
//for(String key : mFocus) {
// Path path = mBodyArea.get(key).getPath();
// canvas.drawPath(path, paint);
//}
} @Override
public boolean onTouchEvent(MotionEvent event) {
if (mBodyClick != null) {
checkAreas(event);
if(!mFocus.isEmpty()) {
BodyArea area = null;
for(String key : mFocus){
area = mBodyArea.get(key);
//invalidate(); // 渲染选中区域颜色
mBodyClick.onBodyClick(0, area.getPtKeys());
}
}
}
return super.onTouchEvent(event);
} private void checkAreas(MotionEvent event) {
mFocus.clear();
for(String key : mBodyArea.keySet()) {
mPathRectF.setEmpty();
Path path = mBodyArea.get(key).getPath();
path.computeBounds(mPathRectF, true);
if(mPathRectF.contains(event.getX(),event.getY())) {
mFocus.add(key);
break;
}
}
} public void initBodyArea() {
mBodyArea.clear();
mFocus.clear();
String[] keys = mContext.getResources().getStringArray(initArray());
BodyArea bodyArea = null;
int idenId = -1;
if(keys != null) {
for(String key : keys) {
idenId = mContext.getResources().getIdentifier(key, "array", initPackage());
int[] paths = mContext.getResources().getIntArray(idenId);
idenId = mContext.getResources().getIdentifier(key + "_code", "array", initPackage());
String[] ptKeys = mContext.getResources().getStringArray(idenId);
bodyArea = new BodyArea(ptKeys, paths);
mBodyArea.put(key, bodyArea);
}
}
} /**
* 进行不同材质机器的兼容
* */
private float toDip(Context context,float pxValue){
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue * scale + 0.5f);
} protected abstract int initArray();
protected abstract String initPackage(); /**
* 点击事件抽象方法
*/
public void setOnBodyClickListener(OnBodyClickListener listener) {
this.mBodyClick = listener;
} public interface OnBodyClickListener {
void onBodyClick(int position, String[] keys);
} /**
* 圆形区域对象
* */
class BodyArea {
private String[] mPtKeys;
private Path mPath;
public BodyArea(String[] ptKeys, int[] paths) {
super();
this.mPtKeys = ptKeys;
mPath = new Path();
int len = paths.length;
if (len >= 3) {
mPath.addCircle(toDip(mContext, paths[0]), toDip(mContext,
paths[1]), toDip(mContext, paths[2]),
Path.Direction.CW);
} mPath.close();
} public String[] getPtKeys() {
return mPtKeys;
} public void setPtKeys(String[] ptKeys) {
this.mPtKeys = ptKeys;
} public Path getPath() {
return mPath;
}
}
}

ManHeadView.java

/**
* 类说明:男头部图片区域点击
* 自定义控件命名要与array的一样
* Author: gaobaiq
* Date: 2016/7/22 10:00
*/
public class ManHeadView extends BaseBodyView { public ManHeadView(Context context) {
this(context, null);
} public ManHeadView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
} public ManHeadView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
} @Override protected int initArray() {
return R.array.man_head;
} @Override protected String initPackage() {
return mContext.getPackageName();
}
}

3.布局(切记android:scaleType="matrix")

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical"> <com.app.gaobaiq.widget.customview.ManHeadView
android:id="@+id/img_head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="matrix"
android:src="@drawable/view_man_head"/> </LinearLayout>

4.实现方法

mImgHead.setOnBodyClickListener(new ManHeadView.OnBodyClickListener() {
@Override public void onBodyClick(int position, String[] keys) {
String message ="Code:" + keys[0] + ", Name:" + keys[1];
ToastUtils.ToastMessage(getActivity(), message);
}
});

android实现点击背景图片不同区域实现不同事件的更多相关文章

  1. android 项目中设置背景图片

    xml文件设置背景图片中:任意一个控件,button imageView 或layout,在其的xml属性设置中,添加 [XML] view plaincopy android:background= ...

  2. android 自定义ScrollView实现背景图片伸缩(阻尼效果)

    android 自定义ScrollView实现强调内容背景图片伸缩(仿多米,qq空间背景的刷新) 看到一篇文章,自己更改了一下bug: 原文地址:http://www.aiuxian.com/arti ...

  3. Android启动过程中背景图片显示

    转自:http://blog.csdn.net/zhangzhikaixinya/article/details/17001321 大部分Android App启动过程中,都会设置一个背景图片,直到A ...

  4. Android代码中设置背景图片

    //设置背景图片        String picfile= Environment.getExternalStorageDirectory() + "/pdp/pdp.png" ...

  5. Android Studio 换主题 + 背景图片 + 去掉白色竖线

    1.去掉AS编辑区域右边的白色竖线: 把right margin 设置的大一点就可以了,默认是120 ,设置成 1200就ok了 2.AS主题下载换装 可以去如下网站下载,然后导入jar, 具体用法百 ...

  6. 微信android手机中点击大图片会自动放大图片

    自己使用的是微信Android客户端,使用img标签的src属性将图片设置好了以后,在微信中调试,点击图片竟然放大,自己没写放大图片的方法,也没有调用wx.previewImage()方法,最后查找, ...

  7. Android开发案例 设置背景图片轮播

    点击按钮实现图片轮播效果 实践案例: xml <?xml version="1.0" encoding="utf-8"?> <LinearLa ...

  8. Android之点击切换图片

    package com.example.SlidePictures; import java.util.Timer; import java.util.TimerTask; import com.ex ...

  9. Android ListView(Selector 背景图片 全选 Checkbox等按钮)

    list_item.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xm ...

随机推荐

  1. Stooge排序与Bogo排序算法

    本文地址:http://www.cnblogs.com/archimedes/p/stooge-bogo-sort-algorithm.html,转载请注明源地址. Stooge排序算法 Stooge ...

  2. IOS客户端Coding项目记录(四)

    1:打开Xcode,然后闪退,报加载某库出现异常 如/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolc ...

  3. OC--代理模式

    一,代理设计模式的场合: 当对象A发生了一些行为,想告知对象B (让对象B成为对象A的代理对象) 对象B想监听对象A的一些行为 (让对象B成为对象A的代理对象) 当对象A无法处理某些行为的时候,想让对 ...

  4. Mac 下使用sourcetree操作git教程

    SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端,同时也是Mercurial和Subversion版本控制系统工具.支持创建.克隆.提交.push.pu ...

  5. NSURLSession/NSURLConnection的上传文件方法(已做了更新)

    最好的学习方法就是 领悟 + 证悟. 此篇文章的理论基础主要是与HTTP网络通信协议相关.为集中精力,可以先把TCP/IP协议这些置之不理,也就是先只关注HTTP的请求和响应的结构.HTTP完整的原理 ...

  6. CoreAnimation-01-CALayer核心要点及实例解析

    CALayer基础 CALayer是每一个UI控件的核心,一个UI控件之所以能显示可以说是CALayer的功劳 每一个UI控件默认都为自己创建一个CALayer对象,通过drawRect方法将内容绘制 ...

  7. animation of android (4)

    TimeAnimator: 与objectAminator不同,它反馈的时间间隔.也就是说TimeAnimator不产生实际的动画效果,他反馈的时间间隔和时间值. 而你并不关心 interpolate ...

  8. Apache Kafka - Quick Start on Windows

    在这篇文章中,我将要介绍如何搭建和使用Apache Kafka在windows环境.在开始之前,简要介绍一下Kafka,然后再进行实践. Apache Kafka Kafka是分布式的发布-订阅消息的 ...

  9. SQL Server服务器名称与默认实例名不一致的修复方法

    SQL Server服务器名称与默认实例名不一致的修复方法 分类: 个人累积 SQl SERVER 数据库复制2011-08-10 09:49 10157人阅读 评论(0) 收藏 举报 sql ser ...

  10. cocos2d-x之初试内存管理机制

    bool HelloWorld::init() { if ( !Layer::init() ) { return false; } Size visibleSize = Director::getIn ...