自定义布局某个点击区域

前几天一哥们问了我一个问题，怎样在一个指定的区域内相应点击事件，效果如下：

我的第一反应，这不就是一个基本相对布局或者帧布局之上，添加了一个按钮么，但是基友说，下面一层是一张完整的图片，这样的话，我思考了一下，决定自定义Layout来解决！

基本的思路如下：

点击区域绘制了一个矩形区域，下面一层是图片，基本布局是相对布局；

核心代码如下：

    <com.marsjiang.partimageview.PartImageView
        android:id="@+id/partImageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/back_img"/>

        <TextView
            android:id="@+id/textView"
            android:layout_width="150dp"
            android:layout_height="60dp"
            android:layout_alignBottom="@+id/imageView"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="17dp"/>
    </com.marsjiang.partimageview.PartImageView>

上面的代码是布局，下面你来看自定义布局的完整代码：

package com.marsjiang.partimageview;

import android.content.Context;
import android.support.annotation.AttrRes;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * Created by Jiang on 2017-07-13.
 */

public class PartImageView extends RelativeLayout {
    private TextView tv_test;
    private onPartClickCallBack partClickCallBack;

    //点击接口暴露出来
    public interface onPartClickCallBack {
        public void partClick();
    }

    public PartImageView(@NonNull Context context) {
        super(context);
    }

    public PartImageView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public PartImageView(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setOnPartClickListener(onPartClickCallBack partClickCallBack) {
        this.partClickCallBack = partClickCallBack;
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        initView();
    }

    private void initView() {
        //找到点击的区域，并且设定点击事件
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);
            if (childView instanceof TextView) {
                tv_test = (TextView) getChildAt(i);
                break;
            }
        }
        tv_test.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (partClickCallBack != null) {
                    partClickCallBack.partClick();
                }
            }
        });

    }

}

哈哈，再来看Activity中点击事件是如何绑定的吧！

    private PartImageView partImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        partImageView = (PartImageView) findViewById(R.id.partImageView);
        partImageView.setOnPartClickListener(new PartImageView.onPartClickCallBack() {
            @Override
            public void partClick() {
                Toast.makeText(MainActivity.this, "我特么被猥琐男点击了！", Toast.LENGTH_LONG).show();
            }
        });
    }

这样就可以实现效果图中的效果啦，是不是很简单呢！

源码地址：

点击打开链接