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);
    }
});