如何在Android上制作这样的布局?
问题描述:
我想知道如何在Android上制作这样的布局。我可以使用水平方向的LinearLayout,并放置2个线性布局,第一个(红色的)1重量和另一个(白色的),2重量和其中我会把一些文本视图等上,但我的主要问题是:我怎么可以在xml代码,使这个小红色的三角形出现,这是我的问题,因为没有它,很容易使这种布局,但我不知道如何在布局中放置这样的几何形状。你能给我一些建议吗?如果你不想要,你不需要放置代码,想法就够了。如何在Android上制作这样的布局?
答
我会用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>
截图
+0
谢谢你本P,你帮了我很多。上帝祝福你 – Caio
添加更多详细信息你需要待办事项,从你的图像不清楚你在找什么 –
好的,我将编辑我的文章 – Caio