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