如何使用 RelativeLayout 父级将小部件与其他小部件对齐

Question

我想将线性布局与图像视图水平对齐，并且我的布局中有 RelativeLayout 父级。我必须使用相对布局来对齐布局。我现在不想使用约束布局。我关注的是相对布局有多大的灵活性，以便我可以从中受益。 当我使用 android:layout_toEndOf="@+id/product_img" 来对齐时，现在我的 product_img 的边距为 20 dp 但是当我将线性布局设置为 android:layout_toEndOf= "@+id/product_img" 它只将其设置到末端，但我需要再次为我的这个新布局设置 20dp 上边距。为什么我又在每个布局中设置边距顶部？

<RelativeLayout 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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/_10sdp"
android:background="@drawable/round_corner_white_alrt_box"
android:orientation="vertical">

<ImageView
    android:id="@+id/product_img"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_marginTop="@dimen/_20sdp"
    android:src="@mipmap/ic_launcher"
     />

<ImageView

    android:id="@+id/cross_btn"
    android:layout_width="@dimen/_16sdp"
    android:layout_height="@dimen/_16sdp"
    android:layout_alignParentEnd="true"
    android:src="@drawable/ic_x"
    />

<LinearLayout
    android:id="@+id/product_detail_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/_5sdp"
    android:layout_toEndOf="@+id/product_img"
    android:orientation="vertical"
>
    <TextView
        android:id="@+id/price_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/product_img"
        android:fontFamily="@font/montserrat_regular"
        android:text="@string/how_many"
        android:textColor="@color/green"
        android:textSize="@dimen/_11sdp" />

    <TextView
        android:id="@+id/product_detail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/product_img"
        android:fontFamily="@font/montserrat_regular"
        android:text="@string/how_many"
        android:textColor="@color/black"
        android:textSize="@dimen/_11sdp" />

    <TextView
        android:id="@+id/product_quantity"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/product_detail"
        android:layout_toRightOf="@+id/product_img"
        android:fontFamily="@font/montserrat_regular"
        android:text="@string/how_many"
        android:textColor="@color/colorGrey"
        android:textSize="@dimen/_11sdp" />
</LinearLayout>

Answer 1

只需在您的LinearLayout 中添加以下代码。

android:layout_alignTop="@id/product_img"

Answer 2

我对您的代码进行了一些更改，请用您的图像替换图像并检查。

我刚刚添加了

android:layout_centerVertical="true"

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/_10sdp"
android:background="@color/white"
android:orientation="vertical">

<ImageView
    android:id="@+id/product_img"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"  // magic is here
    android:layout_marginTop="@dimen/_20sdp"
    android:src="@mipmap/ic_launcher" />

<ImageView

    android:id="@+id/cross_btn"
    android:layout_width="@dimen/_16sdp"
    android:layout_height="@dimen/_16sdp"
    android:layout_alignParentEnd="true"
    android:src="@drawable/delete_category" />

<LinearLayout
    android:id="@+id/product_detail_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true" // magic is here
    android:layout_marginStart="@dimen/_5sdp"
    android:layout_toEndOf="@+id/product_img"
    android:orientation="vertical">

    <TextView
        android:id="@+id/price_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hom Many you got?"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="@dimen/_11sdp" />

    <TextView
        android:id="@+id/product_detail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hom Many you got?"
        android:textColor="@color/black_overlay_50"
        android:textSize="@dimen/_11sdp" />

    <TextView
        android:id="@+id/product_quantity"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hom Many you got?"
        android:textColor="@color/gray"
        android:textSize="@dimen/_11sdp" />
</LinearLayout>
</RelativeLayout>