如何使用此图片上的按钮创建布局？ （按钮实际上形成三角形，而不是面具）

Question

这是想要的布局：  Layout

我坚持了很久。尝试旋转某些按钮以屏蔽其他方式，如：

            <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="-40%"
            android:pivotY="87%" />

如何编写此布局的代码，按钮需要自定义形状，不能点击它们，实现点击相同？

编辑我尝试了Making a triangle shape using xml definitions?，Creating a triangular shaped button for android application

但这就是我得到的：http://i.stack.imgur.com/X88P0.png

Answer 1

您可以使用您提供的链接定义两个按钮，然后将它们放在相同的 FrameLayout 中，其代码如下：

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="300dp"
    android:layout_height="300dp" >

    <Button
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@drawable/rectangle_1" />

    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="@drawable/rectangle_2" />
/>

使用评论中的链接创建 rectangle_1 和 rectangle_2 。

Answer 2

以下是TriangleButton的代码，只有当您的手指在三角区域中时才会绘制三角形并对clickEvent()作出反应。在这里你可以设置颜色（正常和按下）：

类别：

public class TriangleButton extends Button {

    private final float RADIUS = 50.0f;

    private boolean mIsPressed;

    private Region mPathRegion;
    private final Path mPath = new Path();

    private final Paint mNormalPaint = new Paint(Paint.ANTI_ALIAS_FLAG) {
        {
            setDither(true);
            setStyle(Style.FILL);
            setPathEffect(new CornerPathEffect(RADIUS));
        }
    };

    private final Paint mPressedPaint = new Paint(Paint.ANTI_ALIAS_FLAG) {
        {
            setDither(true);
            setStyle(Style.FILL);
            setPathEffect(new CornerPathEffect(RADIUS));
        }
    };

    public TriangleButton(final Context context) {
        this(context, null);
    }

    public TriangleButton(final Context context, final AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TriangleButton(final Context context, final AttributeSet attrs, final int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        setWillNotDraw(false);
        setBackgroundColor(Color.TRANSPARENT);
        setColors(Color.RED, Color.GRAY);
    }

    public void setColors(final int color, final int pressed) {
        mNormalPaint.setColor(color);
        mPressedPaint.setColor(pressed);
    }

    @Override
    protected void onSizeChanged(final int w, final int h, final int oldw, final int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        // Set triangle
        mPath.reset();
        mPath.moveTo(0.0f, h);
        mPath.lineTo(w / 2.0f, 0.0f);
        mPath.lineTo(w, h);
        mPath.close();

        // Create region for touch detecting
        final RectF rectF = new RectF();
        mPath.computeBounds(rectF, true);
        mPathRegion = new Region();
        mPathRegion.setPath(
                mPath,
                new Region(
                        (int) rectF.left,
                        (int) rectF.top,
                        (int) rectF.right,
                        (int) rectF.bottom)
        );
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (mPathRegion.contains((int) event.getX(), (int) event.getY())) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    mIsPressed = true;
                    break;
                case MotionEvent.ACTION_UP:
                    mIsPressed = false;
                    performClick();
                    break;
                case MotionEvent.ACTION_CANCEL:
                    mIsPressed = false;
                    break;
            }
            postInvalidate();
        } else {
            mIsPressed = false;
            postInvalidate();
            return false;
        }

        postInvalidate();
        return true;
    }

    @Override
    protected void onDraw(final Canvas canvas) {
        canvas.drawPath(mPath, mIsPressed ? mPressedPaint : mNormalPaint);
        super.onDraw(canvas);
    }
}

XML：

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.example.user.timezonetest.TriangleButton
            android:id="@+id/btn_bottom"
            android:layout_width="300dp"
            android:layout_height="250dp"
            android:text="Second Button"
            android:textColor="#000"
            android:layout_gravity="center_horizontal"
            android:gravity="bottom|center_horizontal"
            android:padding="30dp"/>

        <com.example.user.timezonetest.TriangleButton
            android:id="@+id/btn_top"
            android:layout_width="180dp"
            android:layout_height="160dp"
            android:text="First Button"
            android:textColor="#000"
            android:layout_gravity="center_horizontal"
            android:gravity="bottom|center_horizontal"
            android:layout_margin="30dp"
            android:padding="30dp"/>

 </FrameLayout>

代码：

final TriangleButton bottomButton = (TriangleButton) findViewById(R.id.btn_bottom);
final TriangleButton topButton = (TriangleButton) findViewById(R.id.btn_top);

bottomButton.setColors(Color.RED, Color.GRAY);
topButton.setColors(Color.YELLOW, Color.GRAY);