将ImageView（在RelativeLayout内部）居中到LinearLayout（在RelativeLayout外部）

Question

我尝试实现如下图所示的效果：

别针应位于第一组标签的中心，而标志应位于第二组的中心。

这是我目前拥有的代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".TestDesignActivity"
    >

    <RelativeLayout
        android:id="@+id/ll01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/ll03"
        android:layout_alignTop="@id/ll02"
        android:layout_marginEnd="5dp"
        android:padding="5dp"
        >

        <ImageView
            android:id="@+id/iv01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/ic_pin"
            />

        <View
            android:layout_width="2dp"
            android:layout_height="wrap_content"
            android:layout_above="@+id/iv02"
            android:layout_below="@+id/iv01"
            android:layout_centerHorizontal="true"
            android:background="@color/md_grey_500"
            />

        <ImageView
            android:id="@+id/iv02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentStart="true"
            android:background="@drawable/ic_flag"
            />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/ll02"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_toEndOf="@+id/ll01"
        android:orientation="vertical"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="2"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque metus massa, aliquet id diam et, pellentesque tincidunt nibh. Suspendisse et sodales diam, nec porta dui. Sed."
            android:textColor="@color/black"
            android:textSize="16sp"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="3"
            android:text="Lorem ipsum dolor sit."
            android:textSize="12sp"
            />
    </LinearLayout>

    <Space
        android:id="@+id/space"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_alignParentEnd="true"
        android:layout_below="@id/ll02"
        android:layout_toEndOf="@+id/ll01"
        />

    <LinearLayout
        android:id="@+id/ll03"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_below="@id/space"
        android:layout_toEndOf="@+id/ll01"
        android:orientation="vertical"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="2"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque metus massa, aliquet id diam et, pellentesque tincidunt nibh. Suspendisse et sodales diam, nec porta dui. Sed."
            android:textColor="@color/black"
            android:textSize="16sp"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="3"
            android:text="Lorem ipsum dolor sit."
            android:textSize="12sp"
            />
    </LinearLayout>
</RelativeLayout>

我不太确定是否有可能（在XML中）从子视图访问不在同一“视图级别”的另一个视图。

因此，也许我应该以编程方式进行操作？

就像用内容填充我的视图一样，评估LinearLayout的大小并将一半应用于顶部边缘（对底部边缘也是如此）？

注意 ：

• 垂直的灰色条应位于Pin和Flag的中心。

• 垂直灰色条的大小应适合两个标签组的大小。

• 应该竖竖灰色条（我认为我将为此创建一个CustomView）。

Answer 1

您可以通过以ConstraintLayout作为root用户来实现。

将Pin和Flag的顶部/底部设置为在其右侧的Layout顶部/底部（显示文本）。 这会将这些图片垂直居中放置在这些文本布局中。 然后在Pin和Flag之间限制垂直线，以便调整大小并填充这两者之间的空间。 只要记住，右边的每组文本都需要1个布局。

另外，我认为您可以使用xml形状并设置dashGap和dashWidth来使该虚线dashGap dashWidth 。