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

截图