android实现点击背景图片不同区域实现不同事件-白红宇

android实现点击背景图片不同区域实现不同事件

阅读量：5052 次

发布时间：2019-06-12

本文共 7095 字，大约阅读时间需要 23 分钟。

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

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

arrays.xml

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
     
       mBodyArea ;    // 保存点击的区域    private Set
      
        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"）

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

转载于:https://www.cnblogs.com/gaobaiq/p/5759787.html

你可能感兴趣的文章