设计 UI Android (CardViews 之间的元素)

Question

我的问题提供了更多信息。我只是想知道如何进行这样的设计。我发现了名为“天气时间线”的 android 应用程序，并且在 CardViews 之间的该应用程序内部（据我所知），他们使用了我在下图中指出的这个元素。我认为它只是 ImageView 但如何将其设置为此处。知道任何关于这个的想法会很有趣！谢谢关注！

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并且您也可以专门针对顶部或底部执行此操作。