重新排列带有 2 个线性布局的 XML 文件

Question

我有以下 XML 文件 -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_margin="13dp"
    android:padding="13dp"
    android:background="@color/white"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/products_row_item_product_image_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/products_row_item_product_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:lines="1"
        android:text="@string/fragment_marketplace_products_row_item_product_title"
        android:textSize="15sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/products_row_item_description_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="13sp"
        android:text="@string/products_row_item_product_description" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/very_light_grey" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:padding="5dp"
        android:orientation="horizontal">


        <TextView
            android:id="@+id/products_row_item_price_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/products_row_item_price_text"
            android:textSize="17sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/products_row_item_likes"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/fragment_marketplace_products_row_item_likes"
            android:textSize="17sp" />
        <ImageView
            android:id="@+id/products_row_item_heart_image_view"
            android:layout_width="22dp"
            android:layout_height="22dp"
            android:layout_marginEnd="5dp"
            android:layout_marginRight="5dp"
            android:scaleType="fitXY"
            android:src="@drawable/like_heart" />
    </LinearLayout>
</LinearLayout>

看起来像这样 - （相当混乱，这就是我在这里的原因:)）

我的目标是让 XML 看起来像这样 -

所以我需要更改以下问题 -

1) 价格标签需要在开头，喜欢的数量和图片应该在结尾。试图在结束/开始时将重力和 layout_gravity 都放在它们身上 - 没有任何变化。为什么？

2）无论我得到什么图像，图像都需要保持一致。如何确保图像始终保持不变？

3) 底部线性布局太大。我需要把它缩小 - 试图玩弄它的高度并弄得一团糟。

4) 任何其他明显的差异将不胜感激

Answer 1

我会选择RelativeLayout。这是开始的简单布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="13dp"
    android:padding="13dp"
    android:background="#ffffff"
    android:orientation="vertical">

    <ImageView
        android:layout_height="100dp"
        android:layout_width="100dp"
        android:src="@android:drawable/ic_delete"
        android:layout_centerHorizontal="true"
        android:id="@+id/mainImageView1"/>

    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Special | Simple Product Title Very Very Long"
        android:layout_below="@id/mainImageView1"
        android:singleLine="true"
        android:id="@+id/mainTextView1"/>

    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="By Unreliable Vendor"
        android:layout_below="@id/mainTextView1"
        android:id="@+id/mainTextView2"/>

    <RelativeLayout
        android:layout_height="50dp"
        android:layout_width="match_parent"
        android:layout_below="@id/mainTextView2"
        android:background="#1BB140"
        android:layout_marginTop="15dp">

        <TextView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="$200.00"
            android:layout_centerVertical="true"
            android:textColor="#F8F0F0"
            android:paddingLeft="10dp"/>

        <ImageView
            android:layout_height="50dp"
            android:layout_width="50dp"
            android:src="@android:drawable/ic_delete"
            android:layout_alignParentRight="true"
            android:id="@+id/mainImageView2"/>

        <TextView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="0"
            android:layout_toLeftOf="@id/mainImageView2"
            android:layout_centerVertical="true"
            android:textColor="#FFFFFF"/>

    </RelativeLayout>

</RelativeLayout>