android - 无法使约束布局中的文本远离图像视图居中

问题描述

我有一个约束布局，其宽度被包装，并在 flex 布局的回收器视图中呈现。

这就是我要的。

此示例中图像中的文本Noodle Dish.. is to centered below the image, and the prices。

价格将位于图像的右侧，靠近页边距，但位于底部文本的上方。

我正在生成的是这个

较大视图的底部文本未居中，并且价格正在切入图像。价格将位于图像之后，并且更靠近末端边距。

布局

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <import type="android.view.View"/>

        <variable
            name="product"
            type="com.myproject.mobile.data.Product" />
    </data>

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        style="@style/CardView"
        android:visibility="@{product != null ?  View.VISIBLE : View.GONE}">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/product_image_url"
                android:layout_width="@dimen/product_image_width"
                android:layout_height="@dimen/product_image_height"
                android:importantForAccessibility="no"
                android:layout_alignParentStart="true"
                android:scaleType="fitCenter"
                android:contentDescription="@null"
                android:layout_marginEnd="8dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:imageUrl="@{product.imageUrl}" />

            <LinearLayout
                android:id="@+id/product_price_container"
                android:layout_marginStart="8dp"
                android:layout_marginBottom="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_marginEnd="8dp"
                android:gravity="end"
               app:layout_constraintTop_toTopOf="parent"
               app:layout_constraintEnd_toEndOf="parent"

                >

                <TextView
                    android:id="@+id/product_original_price"
                    android:layout_marginBottom="8dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/strikethrough"
                    android:textAppearance="@style/TextAppearance"
                    app:inUSD="@{product.originalPrice}"
                    tools:text="$5.00"/>

                <TextView
                    android:id="@+id/product_price"
                    android:layout_marginBottom="8dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="@style/TextAppearance.Secondary"
                    app:inUSD="@{product.price}"

                    tools:text="$5.00"/>
            </LinearLayout>
            <TextView
                android:id="@+id/product_display_name"
                android:layout_width="wrap_content"
                android:maxWidth="@dimen/text_display_width"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_centerHorizontal="true"
                android:maxLines="2"
                android:ellipsize="end"
                android:text="@{product.displayName}"
                android:textAppearance="@style/TextAppearance.Bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintTop_toBottomOf="@id/product_price_container"
                tools:text="Onion flavoured rings"
                />
        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>
</layout>

问题

底部文本并非对所有布局都居中
价格没有放在图像的末尾，而是放在最后

期望的结果

所有布局的底部文本居中
要放置在图像末尾的价格，以及接近末尾的价格

标签： androidandroid-layoutandroid-constraintlayout

android - 无法使约束布局中的文本远离图像视图居中

问题描述

解决方案

推荐阅读