如何在Android上製作這樣的佈局？

Question

我想知道如何在Android上製作這樣的佈局。我可以使用水平方向的LinearLayout，並放置2個線性佈局，第一個（紅色的）1重量和另一個（白色的），2重量和其中我會把一些文本視圖等上，但我的主要問題是：我怎麼可以在xml代碼，使這個小紅色的三角形出現，這是我的問題，因爲沒有它，很容易使這種佈局，但我不知道如何在佈局中放置這樣的幾何形狀。你能給我一些建議嗎？如果你不想要，你不需要放置代碼，想法就夠了。

Answer 1

我會用ConstraintLayout。一般來說，這是複雜佈局的最佳選擇。以下是我試圖重現這種佈局;我沒有對完美的色彩或字體感到困擾，但總體結構就在那裏。

佈局XML

<FrameLayout 
    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="150dp" 
    android:layout_margin="12dp" 
    android:padding="1dp" 
    android:background="#f00"> 

    <android.support.constraint.ConstraintLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#fff"> 

     <FrameLayout 
      android:id="@+id/redBg" 
      android:layout_width="120dp" 
      android:layout_height="0dp" 
      android:background="#f00" 
      app:layout_constraintTop_toTopOf="parent" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintBottom_toBottomOf="parent"/> 

     <FrameLayout 
      android:id="@+id/caret" 
      android:layout_width="12dp" 
      android:layout_height="40dp" 
      android:background="@drawable/caret" 
      app:layout_constraintTop_toTopOf="parent" 
      app:layout_constraintLeft_toRightOf="@+id/redBg" 
      app:layout_constraintBottom_toBottomOf="parent"/> 

     <android.support.constraint.Guideline 
      android:id="@+id/guideline" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:orientation="horizontal" 
      app:layout_constraintGuide_percent="0.5"/> 

     <TextView 
      android:id="@+id/subtitle" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:textColor="#fff" 
      android:textSize="12sp" 
      app:layout_constraintLeft_toLeftOf="@+id/redBg" 
      app:layout_constraintRight_toRightOf="@+id/redBg" 
      app:layout_constraintBottom_toTopOf="@+id/guideline" 
      tools:text="26/04/2017"/> 

     <TextView 
      android:id="@+id/title" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:textColor="#fff" 
      android:textSize="16sp" 
      app:layout_constraintLeft_toLeftOf="@+id/redBg" 
      app:layout_constraintRight_toRightOf="@+id/redBg" 
      app:layout_constraintBottom_toTopOf="@+id/subtitle" 
      tools:text="Amanha"/> 

     <TextView 
      android:id="@+id/description" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="12dp" 
      android:layout_marginStart="12dp" 
      android:textColor="#f00" 
      android:textSize="12sp" 
      app:layout_constraintLeft_toRightOf="@+id/caret" 
      app:layout_constraintBottom_toTopOf="@+id/guideline" 
      tools:text="1 Mililitro"/> 

     <TextView 
      android:id="@+id/name" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="12dp" 
      android:layout_marginStart="12dp" 
      android:textColor="#f00" 
      android:textSize="16sp" 
      app:layout_constraintLeft_toRightOf="@+id/caret" 
      app:layout_constraintBottom_toTopOf="@+id/description" 
      tools:text="Amoxilina"/> 

     <ImageView 
      android:layout_width="24dp" 
      android:layout_height="24dp" 
      android:layout_marginRight="16dp" 
      android:src="@drawable/oval" 
      app:layout_constraintBottom_toTopOf="@+id/guideline" 
      app:layout_constraintRight_toRightOf="parent"/> 

     <TextView 
      android:id="@+id/time" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginBottom="4dp" 
      android:textColor="#f00" 
      android:textSize="16sp" 
      app:layout_constraintLeft_toRightOf="@+id/caret" 
      app:layout_constraintBottom_toBottomOf="parent" 
      tools:text="08:00"/> 

     <TextView 
      android:id="@+id/details" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginRight="8dp" 
      android:layout_marginBottom="4dp" 
      android:textColor="#f00" 
      android:textSize="16sp" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintBottom_toBottomOf="parent" 
      tools:text="+detalhes"/> 

    </android.support.constraint.ConstraintLayout> 

</FrameLayout> 

插入符號矢量

<vector 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:width="24dp" 
    android:height="24dp" 
    android:viewportWidth="24.0" 
    android:viewportHeight="24.0"> 
    <path 
     android:fillColor="#FFff0000" 
     android:pathData="M0 0L24 12L0 24z"/> 
</vector> 

截圖