设计 UI Android（CardView 之间的元素）

Question

我的问题信息量更大。我只想知道如何进行这样的设计。我发现 android 应用程序称为 "weather timeline" 并且在 CardViews 之间的应用程序内部（据我所知）他们使用了我在下图中指出的这个元素。我认为它只是 ImageView 但如何将其设置为此处。知道这方面的任何想法都会很有趣！感谢关注！

Answer 1

这可以通过使用 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>

Answer 2

我很确定这可以使用 9-patched 图像来完成。

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

快速插图演示

通过将两个背景调整到恰好一个在另一个之上，您将得到您发布的 UI。

希望对您有所帮助。

进一步阅读

要查看如何绘制 9-patched 图像 here 是一个文档。

Answer 3

您可以通过以下方式轻松完成。让我们假设我们正在使用一个集合视图，其中卡片元素是一种类型，而中间带有文本的黑色间隙是另一种类型。 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，您也可以专门针对顶部或底部执行此操作。

设计 UI Android（CardView 之间的元素）

Design UI Android (Element between CardViews)

android

android-layout

android-cardview

快速插图演示

进一步阅读