约束布局中不同大小元素的Android xml样式

Question

我有用于在 gridview 中动态放置项目的分娩代码

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="350dp"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_margin="@dimen/margin_small"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="@dimen/margin_small">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/margin_small"
    android:layout_gravity="center">
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/name"
        card_view:layout_constraintTop_toTopOf="parent"
        card_view:layout_constraintBottom_toTopOf="@+id/cost"
        card_view:layout_constraintStart_toStartOf="@+id/image"
        android:maxLines="3"
        android:padding="9dp"
        android:textAppearance="?android:attr/textAppearanceSmall"/>
    <TextView
        android:id="@+id/cost"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ksh_000_00"
        card_view:layout_constraintTop_toBottomOf="@+id/name"
        card_view:layout_constraintBottom_toTopOf="@+id/image"
        card_view:layout_constraintStart_toStartOf="@+id/image"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:typeface="serif"/>
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:contentDescription="@string/food_fuzz_logo"
        android:src="@drawable/logo"
        card_view:layout_constraintBottom_toTopOf="@+id/footer"
        card_view:layout_constraintEnd_toEndOf="parent"
        card_view:layout_constraintStart_toStartOf="parent"
        card_view:layout_constraintTop_toBottomOf="@+id/cost"
        tools:scaleType="fitCenter" />

    <LinearLayout
        android:layout_width="match_parent"
        android:id="@+id/footer"
        android:layout_height="wrap_content"
        card_view:layout_constraintTop_toBottomOf="@+id/image"
        card_view:layout_constraintBottom_toBottomOf="parent"
        card_view:layout_constraintEnd_toEndOf="@+id/image"
        card_view:layout_constraintStart_toStartOf="@+id/name"
        android:orientation="horizontal"
        android:background="@color/gradient_background">

        <TextView
            android:id="@+id/minus"
            android:layout_width="14dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:layout_marginStart="@dimen/activity_vertical_margin"
            android:gravity="start"
            android:text="@string/minus"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold" />
        <TextView
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:id="@+id/quantity"
            android:text="@string/zero"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_gravity="center"
            android:gravity="center"/>
        <TextView
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:id="@+id/plus"
            android:text="@string/plus"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_gravity="end"
            android:gravity="end"/>
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 </androidx.cardview.widget.CardView>

现在我想让它像具有卡片标题、卡片主体和卡片页脚效果的引导卡一样，但我只能让它具有类似身体的效果。我对页脚的尝试仅将页脚 id 元素定位在中心，并且它的组件崩溃在一起，而不是第一个（减号）分散到最左边，另一个（数量）在中心和最后一个（加)n 到 cardview 的线性布局项的最右边。 这就是代码给我的 这就是我所期望的 但是我想要的是灰色区域跨越卡片视图的整个宽度并如前所述适当定位组件 如何实现我的设计理念？

Answer 1

我想要的是灰色区域跨越卡片视图的整个宽度

我看到你使用了tools:scaleType 作为图像，这在运行时不起作用，因为工具命名空间用于设计目的，所以将其更改为android:scaleType

并如前所述适当放置组件

您需要将保存按钮的LinearLayout 的宽度设置为match_parent，并设置权重值，以便可以根据需要分配按钮：

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="350dp"
    android:layout_margin="@dimen/margin_small"
    card_view:cardCornerRadius="10dp"
    card_view:cardElevation="@dimen/margin_small">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="@dimen/margin_small">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="3"
            android:padding="9dp"
            android:text="@string/name"
            android:textAppearance="?android:attr/textAppearanceSmall"
            card_view:layout_constraintBottom_toTopOf="@+id/cost"
            card_view:layout_constraintStart_toStartOf="@+id/image"
            card_view:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/cost"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ksh_000_00"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:typeface="serif"
            card_view:layout_constraintBottom_toTopOf="@+id/image"
            card_view:layout_constraintStart_toStartOf="@+id/image"
            card_view:layout_constraintTop_toBottomOf="@+id/name" />

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher_background"
            card_view:layout_constraintBottom_toTopOf="@+id/footer"
            card_view:layout_constraintEnd_toEndOf="parent"
            card_view:layout_constraintStart_toStartOf="parent"
            card_view:layout_constraintTop_toBottomOf="@+id/cost"
            tools:scaleType="fitCenter" />

        <LinearLayout
            android:id="@+id/footer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/gradient_background"
            android:orientation="horizontal"
            card_view:layout_constraintBottom_toBottomOf="parent"
            card_view:layout_constraintEnd_toEndOf="@+id/image"
            card_view:layout_constraintStart_toStartOf="@+id/name"
            card_view:layout_constraintTop_toBottomOf="@+id/image">

            <TextView
                android:id="@+id/minus"
                android:layout_width="14dp"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                android:layout_marginStart="@dimen/activity_vertical_margin"
                android:gravity="start"
                android:text="@string/minus"
                android:layout_weight="1"
                android:textColor="@color/white"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/quantity"
                android:layout_width="30dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="@string/zero"
                android:textColor="@color/white"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/plus"
                android:layout_width="30dp"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/activity_vertical_margin"
                android:layout_weight="1"
                android:layout_gravity="end"
                android:gravity="end"
                android:text="@string/plus"
                android:textColor="@color/white"
                android:textSize="18sp"
                android:textStyle="bold" />
        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>