Question

我尝试实现如下图所示的内容：

除了 Pin 应该是第一组标签的中心位置＆amp; 标记到第二个。

以下是我目前的代码：

<?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 设置为右侧（显示文本）布局的顶部/底部。这将使这些图片垂直居中以进行文本布局。然后约束 Pin 和 Flag 之间的垂直线，以便调整大小并填充这两者之间的空间。请记住，右边的每组文本都需要1个布局。

此外，我认为您使用shape xml制作虚线并设置中风的dashGap和dashWidth。

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

1 个答案: