将正方形划分成四个可点击的三角形 [英] devide square into four clickable triangles

问题描述

我想在一个正方形视图中创建4个三角形按钮 我尝试使用layer-list创建视图，但无法正常工作.左右按钮将覆盖顶部和底部按钮的点击事件

I want to create 4 triangle buttons in a square view I have tried creating view using layer-list but it's not working. Left and right button are overriding the click event of top and bottom button

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45"
        android:pivotX="-20%"
        android:pivotY="5%" >
           <shape
              android:shape="rectangle" >
              <gradient
                android:angle="45"
                  android:startColor="#B841CC"
                  android:endColor="#55149f"/>
          </shape>
      </rotate>
    </item>
</layer-list>

这是我的布局设计

    <RelativeLayout
        android:layout_width="@dimen/lwidth"
        android:layout_height="@dimen/lwidth">

        <Button
            android:id="@+id/btngallery"
            android:layout_width="match_parent"
            android:layout_height="@dimen/lheight"
            android:background="@drawable/pink_down"
            android:textAllCaps="false"
            android:text="Gallery"
            android:textColor="@android:color/white"
            android:paddingBottom="@dimen/lmrgnbottom"
            android:textSize="@dimen/lsize"/>
        <Button
            android:id="@+id/btnfromphone"
            android:layout_width="@dimen/lheight"
            android:layout_height="match_parent"
            android:background="@drawable/pink_right"
            android:textAllCaps="false"
            android:text="Select From Phone"
            android:textColor="@android:color/white"/>
        <Button
            android:layout_width="@dimen/lheight"
            android:layout_height="match_parent"
            android:background="@drawable/pink_left"
            android:layout_alignParentRight="true"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="@dimen/lheight"
            android:background="@drawable/pink_up"
            android:layout_alignParentBottom="true"/>

        <ImageView
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:background="@drawable/home_icon"
            android:layout_centerInParent="true"/>


    </RelativeLayout>

推荐答案

• 您可以通过引入自定义视图class MyView extends View来做到这一点.
• 然后，您可以在此处放置4个可绘制对象，每个三角形一个，或者仅在onDraw(Canvas canvas)方法中绘制它们.
• 然后，您需要重写onTouchEvent方法，您可以在其中接收有用的MotionEvent对象.借助它，您可以了解触摸和动作的坐标(向下，向上，移动等).更多信息此处
• 在这种方法中，您将确定单击了每个三角形.您需要先确定向下"动作，然后在相同的坐标下稍稍延迟一下向上"动作.或者，您可以将GestureDetector连接到您的自定义视图，并对回调onSignleTapUp做出反应.更多信息此处
• You can do this by introducing your custom view class MyView extends View.
• Then you can place here 4 drawables, one for each triangle, or just draw them inside onDraw(Canvas canvas) method.
• Then you need to override onTouchEvent method, where your can receive useful MotionEvent object. With help of it you can know coordinates of touch and action (DOWN, UP, MOVE e.t.c). More info here
• In this method you will determine each triangle was clicked. You need to determine action DOWN firstly, then action UP in same coordinate with some delay. Or you can connect GestureDetector to your custom view and react on callback onSignleTapUp. More info here

这是示例代码(仅是示例).它使用硬代码的宽度和高度，因此您的任务是使其适应多屏幕并在xml中使用，但是我通过此示例提供了要点:

Here is a sample code (It's just an example). It uses hard code width and height, so your task is adapting it to multi screens and for using in xml, but I provided main point though this sample:

public class MyView extends View {

    public enum Triangle {
        RIGHT, LEFT, TOP, BOTTOM
    }

    private final Paint rightPaint = new Paint();
    private final Paint leftPaint = new Paint();
    private final Paint topPaint = new Paint();
    private final Paint bottomPaint = new Paint();

    private final Path rightPath = new Path();
    private final Path leftPath = new Path();
    private final Path topPath = new Path();
    private final Path bottomPath = new Path();

    private OnTriangleTouchedListener triangleTouchedListener;

    public MyView(Context context) {
        super(context);
        init();
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public void setOnTriangleTouchedListener(OnTriangleTouchedListener triangleTouchedListener) {
        this.triangleTouchedListener = triangleTouchedListener;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawPath(rightPath, rightPaint);
        canvas.drawPath(leftPath, leftPaint);
        canvas.drawPath(topPath, topPaint);
        canvas.drawPath(bottomPath, bottomPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            if (event.getX() > 100 && event.getX() <= (200 - event.getY()) ||
                event.getX() <= 100 && event.getX() >= event.getY()) {
                callTriangleTouch(Triangle.TOP);
            } else if (event.getY() > 100 && event.getY() <= (200 - event.getX()) ||
                event.getY() <= 100  && event.getY() >= event.getX()) {
                callTriangleTouch(Triangle.LEFT);
            } else if (event.getY() <= 100 && event.getY() >= (200 - event.getX()) ||
                event.getY() > 100 && event.getY() <= event.getX()) {
                callTriangleTouch(Triangle.RIGHT);
            } else if (event.getX() <= 100 && event.getX() >= (200 - event.getY()) ||
                event.getX() > 100 && event.getX() < event.getY()) {
                callTriangleTouch(Triangle.BOTTOM);
            }
        } 

        return true;
    }

    private void callTriangleTouch(Triangle triangle) {
        if (triangleTouchedListener != null) {
            triangleTouchedListener.onTriangleTouched(triangle);
        }
    }

    private void init() {
        rightPaint.setColor(0xffff0000);
        leftPaint.setColor(0xff00ff00);
        topPaint.setColor(0xff0000ff);
        bottomPaint.setColor(0xffffff00);

        rightPaint.setAntiAlias(true);
        leftPaint.setAntiAlias(true);
        topPaint.setAntiAlias(true);
        bottomPaint.setAntiAlias(true);

        rightPath.moveTo(200, 0);
        rightPath.lineTo(200, 200);
        rightPath.lineTo(100, 100);
        rightPath.lineTo(200, 0);

        leftPath.moveTo(0, 0);
        leftPath.lineTo(100, 100);
        leftPath.lineTo(0, 200);
        leftPath.lineTo(0, 0);

        topPath.moveTo(0, 0);
        topPath.lineTo(200, 0);
        topPath.lineTo(100, 100);
        topPath.lineTo(0, 0);

        bottomPath.moveTo(200, 200);
        bottomPath.lineTo(0, 200);
        bottomPath.lineTo(100, 100);
        bottomPath.lineTo(200, 200);
    }

    public interface OnTriangleTouchedListener {
        void onTriangleTouched(Triangle triangle);
    }
}

这篇关于将正方形划分成四个可点击的三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！