[英]How do I create a card like this in Android Studio
您应该将约束布局与 CardView 一起使用。 我为你开始了。 你可以继续它。 有一个最简单的方法。
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/primary">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardBackgroundColor="#7AFFFFFF"
app:cardCornerRadius="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:text="Expenses"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="@id/rightDecorView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/titleDivider"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#FFFFFF"
app:layout_constraintEnd_toEndOf="@id/title"
app:layout_constraintStart_toStartOf="@id/title"
app:layout_constraintTop_toBottomOf="@id/title" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/durationTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Duration"
android:textColor="@color/white"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="@id/titleDivider"
app:layout_constraintStart_toStartOf="@id/titleDivider"
app:layout_constraintTop_toBottomOf="@id/titleDivider" />
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/durationView"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="@drawable/ic_car_placeholder"
app:layout_constraintStart_toStartOf="@id/durationTitle"
app:layout_constraintTop_toBottomOf="@id/durationTitle" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/durationDiff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:src="@drawable/ic_car_placeholder"
android:text="+ 10 min"
android:textColor="@color/white"
app:layout_constraintStart_toEndOf="@id/durationView"
app:layout_constraintTop_toBottomOf="@id/durationTitle" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/durationTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_car_placeholder"
android:text="= 2h 15 km"
android:textColor="@color/white"
app:layout_constraintStart_toStartOf="@id/durationDiff"
app:layout_constraintTop_toBottomOf="@id/durationDiff" />
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/rightDecorView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:src="@drawable/ic_car_placeholder"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
为了简化布局,您可以将重复视图分离到另一个自定义视图。 并在您的代码中重用它。
在此处查看操作方法 https://blogs.oregonstate.edu/workla/2021/11/04/creating-a-custom-view-in-android/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.