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

截图