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

Question

我正在尝试ConstraintWidth_percent在shop_list_item.xml我的 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 等非常高的值时，它会正常工作（但在设计选项卡中看起来很奇怪）。

标签： androidandroid-layoutandroid-xmlandroid-constraintlayout

Answer 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>