android实现点击背景图片不同区域实现不同事件
有时候我们拿到一张背景图片,客户要求点击图片的不同区域去跳转或者实现不同的操作事件。我们首先要确认图片的点击区域,往往我们会在布局文件那里下手,但是这样不好做适配,所以我实现了以下方法,基本功能可以实现,而且也做好了适配,可以参考一下。
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实现点击背景图片不同区域实现不同事件的更多相关文章
- android 项目中设置背景图片
xml文件设置背景图片中:任意一个控件,button imageView 或layout,在其的xml属性设置中,添加 [XML] view plaincopy android:background= ...
- android 自定义ScrollView实现背景图片伸缩(阻尼效果)
android 自定义ScrollView实现强调内容背景图片伸缩(仿多米,qq空间背景的刷新) 看到一篇文章,自己更改了一下bug: 原文地址:http://www.aiuxian.com/arti ...
- Android启动过程中背景图片显示
转自:http://blog.csdn.net/zhangzhikaixinya/article/details/17001321 大部分Android App启动过程中,都会设置一个背景图片,直到A ...
- Android代码中设置背景图片
//设置背景图片 String picfile= Environment.getExternalStorageDirectory() + "/pdp/pdp.png" ...
- Android Studio 换主题 + 背景图片 + 去掉白色竖线
1.去掉AS编辑区域右边的白色竖线: 把right margin 设置的大一点就可以了,默认是120 ,设置成 1200就ok了 2.AS主题下载换装 可以去如下网站下载,然后导入jar, 具体用法百 ...
- 微信android手机中点击大图片会自动放大图片
自己使用的是微信Android客户端,使用img标签的src属性将图片设置好了以后,在微信中调试,点击图片竟然放大,自己没写放大图片的方法,也没有调用wx.previewImage()方法,最后查找, ...
- Android开发案例 设置背景图片轮播
点击按钮实现图片轮播效果 实践案例: xml <?xml version="1.0" encoding="utf-8"?> <LinearLa ...
- Android之点击切换图片
package com.example.SlidePictures; import java.util.Timer; import java.util.TimerTask; import com.ex ...
- Android ListView(Selector 背景图片 全选 Checkbox等按钮)
list_item.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xm ...
随机推荐
- 与成都的幸福行动家交流GTD
今年第四次来成都了,通过<小强升职记>的作者邹鑫的撮合,与成都的幸福行动家何平取得了联系,2014年12月6日下午给几个小伙伴们分享了GTD3年来的一点体会.有几位刚接触GTD的朋友,也有 ...
- 用R语言分析我的fitbit计步数据
目标:把fitbit的每日运动记录导入到R语言中进行分析,画出统计图表来 已有原始数据:fitbit2014年每日的记录电子表格文件,全部数据点此下载,示例如下: 日期 消耗卡路里数 步 距离 攀爬楼 ...
- Sharepoint学习笔记—习题系列--70-573习题解析 -(Q131-Q132)
Question 131You create a SharePoint site by using the Document Center site template.You need to ensu ...
- IOS 开发一些常用的地址
1.开发者中心 https://developer.apple.com/membercenter/index.action 2.itunesconnect https://itunesconnect. ...
- 自己使用 1.C语言历史以及特点。
1. C语言的发展及特点? C在1969--1973年间与Unix操作系统同时诞生:最富创造性的时期是1972年.另一次大的变化发生在1977到1979年间,当Unix系统的可移植性得到证明时.在后一 ...
- ReactiveCocoa中信号的使用
前言: 很早之前就有看过ReactiveCocoa,那会看的时候知道是一个新的框架关于响应式编程,具体什么也没有深入研究,今天也对ReactiveCocoa这个框架的使用进行了一定的了解.在githu ...
- URL、表单数据、IP等处理类
<?php class ev { public $cookie; public $post; public $get; public $file; public $url; public $G; ...
- 问题解决——OpenGL超级宝典 第四章 4.5.2 关于freeglut.lib问题的解决过程
看<OpenGL超级宝典(第四版)>的4.5.2节时遇到了一系列问题,经过不懈努力终于解决,现将过程记录在下,以便查找追思. 在第4.5.2节之前,自己写的的代码都没有使用作者的gltoo ...
- 更改ubuntu下mysql的密码
1.首先,进入环境中去,即 mysql -u root -p ,然后输入原始密码 2.此时会出现 mysql > 3.开始修改密码: mysql > use mysql ; ...
- js 操作select和option
js 操作select和option 1.动态创建select function createSelect(){ var mySelect = document.createElement_x(&qu ...