自定义View实战七：自定义切割view并在每个区域设置点击事件

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/songzi1228/article/details/102683530

目录

0、相关文章

1、根据文章一所写：

1.1、CutView.java

1.2、CutView1Activity.java

1.3、activity_cut_view.xml

2、自己写的一个自定义View

2.1、CutView3.java

2.2、CutView3Activity.java

2.3、activity_cut_view3.xml

---

 

0、相关文章

关于android自定义切割view并在每个区域设置点击事件（文章一：阅读量2500，3赞）

自定义View(二)，强大的Canvas（根据这个，可以为矩形着色）

Android笔记 自定义View（四）：Canvas使用之绘制背景色（阅读量8000，1赞）

android开发学习 ------- 自定义View 圆 ，其点击事件 及 确定当前view的层级关系

Canvas类（自己的）

1、根据文章一所写：

1.1、CutView.java

public class CutView extends View {

    private CutViewTouchListener mClickListener;

    private Paint mPaint;
    private Paint mTextPaint;

    float toolbar;
    float statusbar;

    float width;
    float height;

    public CutView(Context context) {
        this(context, null);
    }

    public CutView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        mPaint = new Paint();
        mTextPaint = new Paint();

        toolbar = getResources().getDimension(R.dimen.abc_action_bar_default_height_material);
        statusbar = getStatusBarHeight(super.getContext());

        Resources resources = this.getResources();
        DisplayMetrics dm = resources.getDisplayMetrics();
        width = dm.widthPixels;
        height = dm.heightPixels;
    }

    int getStatusBarHeight(Context context) {
        int result = 0;
        int resourceId = context.getResources().getIdentifier("status_bar_height",
                "dimen", "android");
        if (resourceId > 0) {
            result = context.getResources().getDimensionPixelOffset(resourceId);
        }
        return result;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(5);

        float[] pts = {
                0, 0, width, toolbar / 3 + (height / 3) * 2 - toolbar,
                width, 0, width / 2, (toolbar / 3) * 2 + height / 3 - toolbar,
                width / 2, (toolbar / 3) * 2 + height / 3 - toolbar, 0, height - toolbar - statusbar,
                0, height - toolbar - statusbar, width, toolbar / 3 + (height / 3) * 2 - toolbar
        };
        canvas.drawLines(pts, mPaint);

        mTextPaint.setTextSize(60);
        mTextPaint.setStrokeWidth(5);
        mTextPaint.setColor(Color.BLUE);
        canvas.drawText("相约运动111", 3 * width / 7, toolbar / 6 + height / 6, mTextPaint);
        canvas.drawText("我的朋友222", width / 6, 2 * toolbar / 3 + height / 3, mTextPaint);
        canvas.drawText("场馆运动333", 2 * width / 3, toolbar / 4 + height / 3 + 5, mTextPaint);
        canvas.drawText("运动百货444", width / 2, 3 * height / 5, mTextPaint);
        canvas.drawText("咨讯天地555", 2 * width / 3, toolbar + 5 * height / 7, mTextPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent motionEvent) {
        double x = (double) motionEvent.getRawX();
        double y = (double) (motionEvent.getRawY() - toolbar - statusbar);
        double l1 = 2 * (height - toolbar) / (3 * width) * x;
        double l2 = 2 * (toolbar - height) / (3 * width) * x - 2 * (toolbar - height) / 3;
        double l3 = (4 * (toolbar - height) / (3 * width) + 2 * statusbar / width) * x + height - toolbar - statusbar;
        double l4 = ((toolbar - height) / (3 * width) + statusbar / width) * x + height - toolbar - statusbar;
        int action = motionEvent.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                if (y > 0 && y < l1 && y < l2)
                    mClickListener.ClickOne();
                if (x > 0 && y > l1 && y < l3)
                    mClickListener.ClickTwo();
                if (x < width && y > l2 && y < l1)
                    mClickListener.ClickThree();
                if (y > l3 && y > l1 && y < l4)
                    mClickListener.ClickFour();
                if (x < width && y < height - toolbar - statusbar && y > l4)
                    mClickListener.ClickFive();
                break;
        }
        return true;
    }

    public interface CutViewTouchListener {
        void ClickOne();

        void ClickTwo();

        void ClickThree();

        void ClickFour();

        void ClickFive();
    }

    public void setCutViewTouchListener(CutViewTouchListener clickListener) {
        this.mClickListener = clickListener;
    }


}

1.2、CutView1Activity.java

public class CutView1Activity extends AppCompatActivity {

    @BindView(R.id.cutView)
    CutView cutView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_cut_view1);
        ButterKnife.bind(this);

        cutView.setCutViewTouchListener(new CutView.CutViewTouchListener() {
            @Override
            public void ClickOne() {
                Toast.makeText(CutView1Activity.this, "111", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void ClickTwo() {
                Toast.makeText(CutView1Activity.this, "222", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void ClickThree() {
                Toast.makeText(CutView1Activity.this, "333", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void ClickFour() {
                Toast.makeText(CutView1Activity.this, "444", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void ClickFive() {
                Toast.makeText(CutView1Activity.this, "555", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

1.3、activity_cut_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gs.common3.aView.customView.cutview.CutView1Activity">

    <com.gs.common3.aView.customView.cutview.CutView
        android:id="@+id/cutView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

2、自己写的一个自定义View

一个大矩形，左右各两个小矩形，颜色不同，点击也会响应不同的事件。

2.1、CutView3.java

public class CutView3 extends View {

    private Paint mPaint;
    private Paint mTextPaint;
    private Paint mLeftPaint;
    private Paint mRightPaint;
    RectF mLeftRectF, mRightRectF;

    private CutView3TouchListener mClickListener;

    public CutView3(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);

        mTextPaint = new Paint();
        mTextPaint.setTextSize(80);
        mTextPaint.setStrokeWidth(5);
        mTextPaint.setColor(Color.BLUE);

        mLeftPaint = new Paint();
        mLeftPaint.setAntiAlias(true);
        mLeftPaint.setColor(Color.RED);

        mRightPaint = new Paint();
        mRightPaint.setAntiAlias(true);
        mRightPaint.setColor(Color.GREEN);

        //两个矩形
        mLeftRectF = new RectF(100, 100, 650, 1200);
        mRightRectF = new RectF(650, 100, 1200, 1200);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//        setMeasuredDimension(getMeasuredWidth(), getMeasuredHeight());
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //画出矩形，并一分为二
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(5);

        float[] pts4 = {//矩形
                100, 100, 1200, 100,
                1200, 100, 1200, 1200,
                1200, 1200, 100, 1200,
                100, 1200, 100, 100,
                650, 100, 650, 1200
        };

        canvas.drawLines(pts4, mPaint);


        //给整个view填充绿色
//        canvas.drawColor(Color.GREEN);

        //给两个小矩形着色
        canvas.drawRect(mLeftRectF, mLeftPaint);
        canvas.drawRect(mRightRectF, mRightPaint);

        //两个小矩形写上字
        canvas.drawText("左边", 300, 650, mTextPaint);
        canvas.drawText("右边", 850, 650, mTextPaint);

    }

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent event) {

        double x = event.getRawX();
        double y = event.getRawY();
        LogUtils.e("x: " + x);
        LogUtils.e("y: " + y);

        double x1 = getLeft();
        double x2 = getLeft() + getWidth() / 2;
        double x3 = getLeft() + getWidth();

//        LogUtils.e("x1: " + x1);
//        LogUtils.e("x2: " + x1);
//        LogUtils.e("x3: " + x1);

        double y1 = getTop();
        double y2 = getTop() + getHeight();

//        LogUtils.e("y1: " + y1);
//        LogUtils.e("y2: " + y2);

        int action = event.getAction();

        switch (action) {
            case MotionEvent.ACTION_DOWN:
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                if (x > 100.0 && x < 650.0 && y > 100.0 && y < 1200.0)
                    mClickListener.clickLeft();
                if (x > 650.0 && x < 1200.0 && y > 100.0 && y < 1200.0)
                    mClickListener.clickRight();
                break;
        }
        return true;
    }

    public interface CutView3TouchListener {
        void clickLeft();

        void clickRight();
    }

    public void setCutView3TouchListener(CutView3TouchListener clickListener) {
        this.mClickListener = clickListener;
    }
}

2.2、CutView3Activity.java

public class CutView3Activity extends AppCompatActivity {

    @BindView(R.id.cutView)
    CutView3 cutView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_cut_view3);
        ButterKnife.bind(this);

        cutView.setCutView3TouchListener(new CutView3.CutView3TouchListener() {
            @Override
            public void clickLeft() {
                Toast.makeText(CutView3Activity.this, "这是左边", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void clickRight() {
                Toast.makeText(CutView3Activity.this, "这是右边", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

2.3、activity_cut_view3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.gs.common3.aView.customView.cutview.CutView1Activity">

    <com.gs.common3.aView.customView.cutview.CutView3
        android:id="@+id/cutView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/cutView"
        android:text="你好"/>


</LinearLayout>