如何在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> 

而這正是它呈現給：

這是我的TextView XML：

<?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);