设计 Android UI（在 CardViews 之间的元素）

Question

我的问题更多是信息性的。我只想知道如何制作这样的设计。我发现了一个名为“天气时间线”的安卓应用程序，在该应用程序中，在CardViews之间（据我所知），他们使用了我在下面图片中指出的这个元素。我认为它只是一个ImageView，但如何设置它在这里。了解任何关于此的想法将是有趣的！感谢您的关注！

- Nurzhan Nogerbek

---

我相当确定这只是一种布局技巧。您可以在所有单元格中实现圆形设计，并仅在注入单元格的前/后单元格中显示它。 - Evan Bashir

你好！谢谢回复。我不太明白你的意思。能否给我展示一些例子或者更详细地解释一下？ - Nurzhan Nogerbek

我刚刚给您发了一些解释，请看一下。 - Anis LOUNIS aka AnixPasBesoin

Answer 1

您可以按照以下方式轻松完成。假设我们正在使用集合视图，其中卡片元素是一种类型，中间带有文本的黑色间隙是另一种类型。cardView将如下所示。

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="@dimen/circle_radius_half_size"
        android:layout_marginBottom="@dimen/circle_radius_half_size">
    </CardView>

    <ImageView
        android:layout_width="@dimen/circle_radius"
        android:layout_height="@dimen/circle_radius"
        android:layout_align_parentLeft="true"
        android:layout_marginLeft="24dp"
        android:src="@drawable/circle" 
        android:rotation="180"/>

    <ImageView
        android:layout_width="@dimen/circle_radius"
        android:layout_height="@dimen/circle_radius"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="24dp"
        android:src="@drawable/circle" />

</RelativeLayout>

可绘制的圆形看起来像这样

而带有文本的黑葡萄中间布局看起来像这样

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp">

    <View
        android:layout_width="@dimen/width_of_line"
        android:layout_height="match_parent"
        android:layout_margin_left="@dimen/line_margin"
        android:background="@color/white" />


    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin_left="@dimen/line_margin" >


        <!-- The Text View Layouts Here -->

    </LinearLayout>
</LinearLayout>

line_margin是24dp + CircleHalfSize - LineWidthHalfSize

当然，CircleHalfSize和LineWidthHalfSize都是以DP为单位的。

现在只需要通过适配器正确地排列它们。个人推荐使用RecyclerView，非常灵活。

此外，如果你想让气泡消失，只需将气泡ImageView的可见性设置为GONE，而且你可以具体指定是顶部还是底部的气泡。

- prats110892

---

谢谢你的帮助！我觉得你想用RecyclerView来设计很有趣。你说这样更加灵活。 - Nurzhan Nogerbek

很高兴能帮上忙！对于集合视图，我认为在安卓中使用回收视图是最好的选择。它确实非常高效和高度灵活。 - prats110892

Answer 2

我很确定可以使用9-patched图像来实现这一点。

通过确定如何绘制您的补丁以及如何将它们设置为布局的背景，您将获得相同的结果。

快速演示

通过将两个背景调整为完全重合，您将获得您发布的UI。

希望有所帮助。

进一步阅读

要了解如何绘制9-patched图像，请点击这里查看文档。

- Anis LOUNIS aka AnixPasBesoin

Answer 3

这可以通过使用RelativeLayout来实现。然后，您可以在主视图中根据需要对齐所有的视图。

因此，您可以将Card1布局在顶部，然后使用marginTop属性（记住，这是相对于容器顶部而不是卡片底部）来布局气泡连接器，使其出现在任何位置。

基本上，您可以使用一个RelativeLayout，然后根据需要将各个视图相对于彼此对齐（或者实际上是相对于主视图的顶部）。

请查看以下伪代码：

<RelativeLayout >
    <CardView
        layout_height = "8dp"
        alignParentTop = "true"
    />

    <!-- Connector Image -->
    <ImageView 
        alignParentTop = "true"
        layoutMarginTop = "10dp" <!-- or whatever it takes to align properly with CardView -->
    />
</RelativeLayout>

- Booger