ConstraintWidth_percent 在设计选项卡和实践中看起来不同答案

【问题标题】：ConstraintWidth_percent looks different in design tab and in practiceConstraintWidth_percent 在设计选项卡和实践中看起来不同
【发布时间】：2021-04-15 19:53:23
【问题描述】：

我正在尝试在我的 shop_list_item.xml 中使用 ConstraintWidth_percent，它在我的 shopadapter 中使用。我遇到的问题是，设计选项卡（它应该是什么样子）和应用内设计（它看起来如何）完全不同。我在这里做错了什么？

它应该是什么样子

外观如何

代码

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/mcv_product_item"
        android:layout_width="0dp"
        android:layout_height="210dp"
        android:clickable="true"
        android:focusable="true"
        app:cardBackgroundColor="@android:color/white"
        app:cardCornerRadius="4dp"
        app:cardElevation="4dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.40">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/iv_product_image"
                android:layout_width="match_parent"
                android:layout_height="110dp"
                android:contentDescription="TODO"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:loadImage="@{product.images[0]}"
                tools:ignore="ContentDescription, HardcodedText"
                tools:src="@drawable/ic_calibrate" />

            <ImageView
                android:id="@+id/iv_service_indicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:contentDescription="@null"
                android:src="@drawable/ic_service"
                app:hideView="@{product.hasService}"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/tv_product_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginTop="12dp"
                android:layout_marginEnd="8dp"
                android:ellipsize="end"
                android:maxLines="2"
                android:text="@{product.name}"
                android:textAlignment="textStart"
                android:textColor="@color/color_text_dark"
                android:textSize="@dimen/textDescriptionNormal1"
                app:layout_constraintEnd_toEndOf="@+id/iv_product_image"
                app:layout_constraintStart_toStartOf="@+id/iv_product_image"
                app:layout_constraintTop_toBottomOf="@+id/iv_product_image"
                tools:text="TEST TITLE TO ENSURE STUFF" />

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/tv_product_price"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="12dp"
                android:text="@{product.price}"
                android:textColor="@color/color_text_blue"
                android:textSize="@dimen/textHeadlineNormal1"
                android:textStyle="italic|bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="@+id/tv_product_name"
                tools:text="4870.00" />

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/tv_euro"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="@string/currency"
                android:textColor="@color/color_text_blue"
                android:textSize="@dimen/textHeadlineNormal1"
                android:textStyle="italic|bold"
                app:layout_constraintBottom_toBottomOf="@+id/tv_product_price"
                app:layout_constraintEnd_toEndOf="@+id/tv_product_name"
                app:layout_constraintStart_toEndOf="@+id/tv_product_price"
                app:layout_constraintTop_toTopOf="@+id/tv_product_price" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.google.android.material.card.MaterialCardView>

    <!-- Currently not using -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.30"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.70"/>

</androidx.constraintlayout.widget.ConstraintLayout>

当我将 constraintWidth_percent 更改为 0.8 等非常高的值时，它会正常工作（但在设计选项卡中看起来很奇怪）。

【问题讨论】：

CardView 的宽度约束告诉您希望宽度与父级相同，然后您使用 `app:layout_constraintWidth_percent="0.40"` 获得父级的 40% ..这可能是过度约束
我不完全明白你的意思。您是指layout_width="0dp" 和app:layout_constraintWidth_percent="0.4" 的组合吗？我看过的每个教程都说我必须将 layout_width 设置为 0dp 才能实现 constraintwidth_percent。那我该如何解决呢？
绝对正确，但您还设置了app:layout_constraintStart_toStartOf="parent" & app:layout_constraintEnd_toEndOf="parent" .. 这两个设置了cardView 宽度以匹配父宽度
我都删除了，没有任何改变，但添加了“此视图不受水平约束”
现在它受到约束，因为您需要 CardView 宽度为父级的 40% .. 但没有告诉它从父级中的哪个点可以消耗 40% ..实例是从父节点开始的

标签： android android-layout android-xml android-constraintlayout

【解决方案1】：

这是正常现象，因为 Android Studio 的设计预览可能具有与您的移动设备或模拟器不同的屏幕尺寸。您可以更改设计预览的宽度/高度，使其具有与您的测试模拟器/移动设备相似的宽度/高度你会发现没有任何变化。

您可以更改此表单：

这可能非常明显，因为您的 CardView 显然占据了 RecyclerView 项目宽度的 40%。您可以注意到这将是下图中的绿色指南。

您可以做的就是将 40% 的部分剪掉，直到您对适合购物车物品的特定宽度感到满意为止。

最后一件事你可以尝试下面的布局来对齐RecyclerView项目布局中间的项目

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/mcv_product_item"
        android:layout_width="0dp"
        android:layout_height="210dp"
        android:clickable="true"
        android:focusable="true"
        app:cardBackgroundColor="@android:color/white"
        app:cardCornerRadius="4dp"
        app:cardElevation="4dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.4">


        <!--        Add CardView items -->


    </com.google.android.material.card.MaterialCardView>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.3" />


</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：