Question

我想知道如何在Android上制作这样的布局。我可以使用一个水平方向的LinearLayout并放置2个线性布局，第一个（红色一个）有1个重量，另一个（白色），有2个重量，在里面我会放一些文本视图等等on，但我的主要问题是：我如何在xml中加入一个代码来使这个小红色三角形出现，这是我的问题，因为没有它，很容易做出这个布局，但我不知道如何在布局中放置这样的几何形状。你能给我一些建议吗？如果你不想，你不需要放代码，想法就够了:)先谢谢。

Layout Image

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>

Caret vector

<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>

<强>截图

如何在Android上制作这样的布局？

1 个答案: