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

Posted

技术标签:

【中文标题】约束布局中不同大小元素的Android xml样式【英文标题】：Android xml styling for different sized elements in constrained layout 【发布时间】：2021-11-07 06:35:58 【问题描述】：

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

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_
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_
    android:layout_
    android:layout_margin="@dimen/margin_small"
    android:layout_gravity="center">
    <TextView
        android:id="@+id/name"
        android:layout_
        android:layout_
        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_
        android:layout_
        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_
        android:layout_
        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_
        android:id="@+id/footer"
        android:layout_
        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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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 的线性布局项的最右边。 这就是代码给我的 这就是我所期望的 但是我想要的是灰色区域跨越卡片视图的整个宽度并如前所述适当定位组件 如何实现我的设计理念？

【问题讨论】：

你有一个例子吗？链接或视频？老实说，我不明白你在尝试什么。尝试改写：D @DEX7RA 更新了问题，包括它的外观和外观 @TheOnlySmartBoy 描述仍然不是很清楚......你能提供你想要实现的草稿或示意图吗？甚至是手工制作的 @Zain 我已经更新了问题以包含我的预期 【参考方案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_
    android:layout_
    android:layout_margin="@dimen/margin_small"
    card_view:cardCornerRadius="10dp"
    card_view:cardElevation="@dimen/margin_small">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_
        android:layout_
        android:layout_gravity="center"
        android:layout_margin="@dimen/margin_small">

        <TextView
            android:id="@+id/name"
            android:layout_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
                android:layout_
                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_
                android:layout_
                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_
                android:layout_
                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>

【讨论】：

以上是关于约束布局中不同大小元素的Android xml样式的主要内容，如果未能解决你的问题，请参考以下文章

自动布局视图 xib - 没有可编辑的约束？我需要居中的元素

Android Studio 未检测到约束布局的样式

ListView内的Android约束布局 - 最后一项样式被破坏

一起Talk Android吧（第五百零五回：如何调整组件在约束布局中的大小)

Android ：约束布局ConstraintLayout 之 Chains 链式约束

web移动端屏幕适配方案