ConstraintWidth_percent 在设计选项卡和实践中看起来不同
ConstraintWidth_percent looks different in design tab and in practice
我正在尝试在我的 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）时，它会正常工作（但在设计选项卡中看起来很奇怪）。
这是正常行为，因为 Android Studio 的设计预览可能与您的移动设备或模拟器的屏幕尺寸不同。您可以更改设计预览 width/height 以具有类似的 width/height 喜欢你的测试 emulator/mobile 你会发现没有任何变化。
您可以更改此表格：
这可能非常明显，因为您的 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>
我正在尝试在我的 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）时，它会正常工作（但在设计选项卡中看起来很奇怪）。
这是正常行为，因为 Android Studio 的设计预览可能与您的移动设备或模拟器的屏幕尺寸不同。您可以更改设计预览 width/height 以具有类似的 width/height 喜欢你的测试 emulator/mobile 你会发现没有任何变化。
您可以更改此表格：
这可能非常明显，因为您的 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>