如何在xml android中构建梯形形状？

Question

我想shape用它构建它bottom line并且text在里面我很困惑如何实现这个我厌倦了一些代码但是没有得到必需的东西.

到目前为止我已经尝试过这段代码

shape.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- Colored rectangle-->
    <item>
        <shape android:shape="rectangle">
            <size
                android:width="100dp"
                android:height="40dp" />
            <solid android:color="#13a89e" />
        </shape>
    </item>


    <!-- This rectangle for the right side -->
    <!-- Their color should be the same as layout's background -->
    <item
        android:right="-100dp"
        android:left="100dp"
        android:top="-100dp"
        android:bottom="-100dp">
        <rotate
            android:fromDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>

</layer-list>

它提供了以下结果.

我还需要在这个形状下方的黄线.

感谢帮助.

Answer 1

这是你的XML:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<!-- Colored rectangle-->
<item>
    <shape android:shape="rectangle">
        <padding android:top="35dp"/>
        <size android:width="200dp" android:height="40dp" />
        <solid android:color="#13a89e" />
    </shape>
</item>
<!-- Darker colored line-->
<item>
    <shape android:shape="line">
        <size android:width="100dp"/>
        <stroke android:width="4dp" android:color="#123456" />
    </shape>
</item>


<!-- This rectangle for the right side -->
<!-- Their color should be the same as layout's background -->
<item
    android:right="-200dp"
    android:left="200dp"
    android:top="-200dp"
    android:bottom="-200dp">
    <rotate android:fromDegrees="45">
        <shape android:shape="rectangle">
           <padding android:top="-35dp"/>
           <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>
<!-- This rectangle for the left side -->
<item
    android:right="200dp"
    android:left="-200dp"
    android:top="-200dp"
    android:bottom="-200dp">
    <rotate android:fromDegrees="-45">
        <shape android:shape="rectangle">
            <padding android:top="-35dp"/>
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

这就是它所呈现的:

这是我的TextViewXML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="io.kalabalik.tilted.MainActivity">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/box"
    android:text="Your Text!"
    android:textColor="#000000"
    android:gravity="center_horizontal|bottom"
    android:paddingBottom="10dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Answer 2

我强烈建议创建自定义文本视图，这样会更加灵活且可控。您需要创建路径对象，并使用该对象定义您的视图角。如果您想以文本形式查看，您需要覆盖onDraw (Canvas canvas) 函数，您将调用 canvas.draw(path,paint) 方法。如果您不仅需要文本字段，您应该覆盖任何视图组类，但是对于视图组，您应该覆盖onDispatchDraw函数来做到这一点。

你可以像下面的例子一样创建你的形状

    // you can define all points
    Point topLeft = new Point(0,0);
    Point topRight = new Point(getWidth(),0); // your view width
    //... 

    //cover your corner points
    Path path = new Path();
    path.moveTo(topLeft.x, topLeft.y);
    path.lineTo(topRight.x, topRight.y);
    path.lineTo(bottomRight.x, bottomRight.y);
    path.lineTo(shapeBottomRight.x, shapeBottomRight.y);
    path.lineTo(shapeTop.x, shapeTop.y);
    path.lineTo(shapeBottomLeft.x, shapeBottomLeft.y);
    path.lineTo(bottomLeft.x, bottomLeft.y);
    path.lineTo(topLeft.x, topLeft.y);

    canvas.draw(path, paint);