使可绘制三角形变宽-Android

Question

我在构建三角形的drawable中有此代码。 但是，我认为斜边与三角形的宽度相比太长了。 我希望它像一个等边三角形。 我该怎么做呢？ 谢谢！

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="-45%"
            android:pivotY="100%" >
            <shape
                android:shape="rectangle"
                >
                <solid
                    android:color="@color/loseBackground" />
            </shape>
        </rotate>
    </item>
</layer-list>

我已将此代码设置为按钮的背景。

<Button
        android:id="@+id/loseScreen"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:rotation="90"
        android:visibility="invisible"
        android:layout_x="140dp"
        android:layout_y="120dp"
        android:background="@drawable/triangle_shape" />

Answer 1

我发现弄乱XML中的旋转正方形对于创建所需的三角形有些不可预测。 我做了一个自定义视图类，它根据您给它的宽度和高度绘制三角形：

public class TriangleView extends View {

    public static final int UP = 0;
    public static final int DOWN = 1;
    public static final int LEFT = 2;
    public static final int RIGHT = 3;

    private int colour;
    private int direction;
    private Paint paint;

    public int getColour() {return colour;}
    public int getDirection() {return direction;}

    public void setColour(int colour) {
        this.colour = colour;
        invalidate();
        requestLayout();
    }
    public void setDirection(int direction) {
        this.direction = direction;
        invalidate();
        requestLayout();
    }


    public TriangleView(Context context, AttributeSet attrs) {

        super(context, attrs);
        initAttributes(attrs);
        setupPaint();
    }


    private void initAttributes(AttributeSet attrs) {

        TypedArray attrArray = getContext().getTheme().obtainStyledAttributes(attrs, R.styleable.TriangleView, 0, 0);

        try {

            colour = attrArray.getColor(R.styleable.TriangleView_triangleColor, Color.BLACK);
            direction = attrArray.getInt(R.styleable.TriangleView_direction, UP);
        } finally {

            attrArray.recycle();
        }
    }

    private void setupPaint() {

        paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(colour);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);
        canvas.drawPath(getTrianglePath(), paint);

    }

    protected Path getTrianglePath() {

        Point p1, p2, p3;

        switch (direction) {

            case UP:

                p1 = new Point(getPaddingLeft(), getHeight() - getPaddingBottom());
                p2 = new Point(getWidth() - getPaddingRight(), p1.y);
                p3 = new Point((getWidth() - getPaddingLeft() - getPaddingRight()) / 2 + getPaddingLeft() , getPaddingTop());
                break;

            case DOWN:
            default:

                p1 = new Point(getPaddingLeft(), getPaddingTop());
                p2 = new Point(getWidth() - getPaddingRight(), p1.y);
                p3 = new Point((getWidth() - getPaddingLeft() - getPaddingRight()) / 2 + getPaddingLeft(), getHeight() - getPaddingBottom());
                break;
        }


        Path path = new Path();
        path.moveTo(p1.x, p1.y);
        path.lineTo(p2.x, p2.y);
        path.lineTo(p3.x, p3.y);

        return path;
    }
}

您还需要将以下内容添加到res/values/attrs.xml文件中：

<declare-styleable name="TriangleView">
    <attr name="triangleColor" format="color" />
    <attr name="direction" format="enum">
        <enum name="up" value="0" />
        <enum name="down" value="1" />
        <enum name="left" value="2" />
        <enum name="right" value="3" />
    </attr>
</declare-styleable>

然后，您可以在布局xml中要绘制三角形的任何位置使用它：

<com.mypackagename.TriangleView
    android:id="@+id/loseScreen"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:triangleColor="@color/loseBackground"
    app:direction="up"
    android:padding="10dp"/>

请记住将应用程序名称空间添加到您的xml布局中：

xmlns:app="http://schemas.android.com/apk/res-auto"

Answer 2

我只是通过使用以下方法解决了它：

<TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="▼"/>

效果很好。 如果找到更好的解决方案，我可能会更改它。