Android xml 受限布局中不同大小元素的样式
Android xml styling for different sized elements in constrained layout
我有用于在 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>
现在我想把它变成像bootstrap 那样的卡片，有卡片头、卡片主体和卡片脚注效果，但我只能让它只有主体效果。我对页脚的尝试只将页脚 id 元素定位在中心，它的组件一起崩溃，而不是第一个（减号）被分散到最左边，另一个（数量）在中心和最后一个（加号） )n 在 cardview 的线性布局项目的最右边。
这就是代码给我的
这就是我所期望的
但我想要的是让灰色区域跨越卡片视图的整个宽度，并如前所述适当定位组件
怎么可能实现我的设计理念？
what I want is for the grey area to span the entire width of the card view
我看到你为图像使用了 tools:scaleType，这在运行时不起作用，因为工具名称空间用于设计目的，所以将其更改为 android:scaleType
and position the components appropriately as explained earlier
您需要将容纳按钮的 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>
我有用于在 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>
现在我想把它变成像bootstrap 那样的卡片，有卡片头、卡片主体和卡片脚注效果，但我只能让它只有主体效果。我对页脚的尝试只将页脚 id 元素定位在中心，它的组件一起崩溃，而不是第一个（减号）被分散到最左边，另一个（数量）在中心和最后一个（加号） )n 在 cardview 的线性布局项目的最右边。
这就是代码给我的
what I want is for the grey area to span the entire width of the card view
我看到你为图像使用了 tools:scaleType，这在运行时不起作用，因为工具名称空间用于设计目的，所以将其更改为 android:scaleType
and position the components appropriately as explained earlier
您需要将容纳按钮的 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>