如何在卡片视图中设置不同的布局?
how to set different layouts in a cardview?
我正在尝试制作如下所示的卡片视图
+----------------------------+
|[icon1] text 1 |
| ▼ text3 |
|[icon2] text 2 |
+----------------------------+
如何创建这样的卡片?
我尝试在 cardView 中使用 2 种不同的布局,但它们彼此重叠。
如果您查看 CardView 的文档,您会发现它扩展了 FrameLayout,因此如果您有多个子项,它们就会重叠。你需要做的是有一个单一的布局作为 CardView 的直接子视图,比如说 ConstraintLayout,并且在这个 ConstraintLayout 中你可以根据需要设置任意数量的子视图。
所以这段代码...
<androidx.cardview.widget.CardView
app:cardCornerRadius="8dp"
android:layout_margin="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/img1"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_margin="16dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/img2"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_margin="16dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@id/img1" />
<TextView
android:id="@+id/tv1"
android:text="Hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="@+id/img1"
app:layout_constraintBottom_toBottomOf="@+id/img1"
app:layout_constraintLeft_toRightOf="@id/img1"
android:layout_margin="16dp"/>
<TextView
android:id="@+id/tv2"
android:text="World"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="@+id/img2"
app:layout_constraintBottom_toBottomOf="@+id/img2"
app:layout_constraintLeft_toRightOf="@id/img2"
android:layout_margin="16dp"/>
<TextView
android:id="@+id/tv3"
android:text="Hello World!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_margin="16dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
会产生这个:
我正在尝试制作如下所示的卡片视图
+----------------------------+
|[icon1] text 1 |
| ▼ text3 |
|[icon2] text 2 |
+----------------------------+
如何创建这样的卡片?
我尝试在 cardView 中使用 2 种不同的布局,但它们彼此重叠。
如果您查看 CardView 的文档,您会发现它扩展了 FrameLayout,因此如果您有多个子项,它们就会重叠。你需要做的是有一个单一的布局作为 CardView 的直接子视图,比如说 ConstraintLayout,并且在这个 ConstraintLayout 中你可以根据需要设置任意数量的子视图。
所以这段代码...
<androidx.cardview.widget.CardView
app:cardCornerRadius="8dp"
android:layout_margin="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/img1"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_margin="16dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/img2"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_margin="16dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@id/img1" />
<TextView
android:id="@+id/tv1"
android:text="Hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="@+id/img1"
app:layout_constraintBottom_toBottomOf="@+id/img1"
app:layout_constraintLeft_toRightOf="@id/img1"
android:layout_margin="16dp"/>
<TextView
android:id="@+id/tv2"
android:text="World"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="@+id/img2"
app:layout_constraintBottom_toBottomOf="@+id/img2"
app:layout_constraintLeft_toRightOf="@id/img2"
android:layout_margin="16dp"/>
<TextView
android:id="@+id/tv3"
android:text="Hello World!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_margin="16dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
会产生这个: