你的位置:首页 > ASP.net教程

[ASP.net教程]android实现点击背景图片不同区域实现不同事件

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

 

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

arrays.

<!-- 男人头部 -->  <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")

<??><LinearLayout ="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);  }});