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

Question

我的问题更具信息性。我只是想知道如何进行这样的设计。我找到了名为＆＃34;天气时间线＆＃34;并且在CardViews之间的应用程序内部（据我所知），他们使用了我在下面的图片中指出的这个元素。我认为它只是ImageView，但如何将其设置为此处。知道任何想法会很有趣！谢谢你的参与！

Answer 1

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

Answer 2

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

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

快速演示演示

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

希望它有所帮助。

进一步阅读

要了解如何绘制9个修补图像here是一个文档。

Answer 3

这可以通过使用RelativeLayout来完成。然后，您可以在主视图中对齐所有视图。

因此，您可以将Card1布局在顶部，然后使用marginTop属性布局气泡连接器（请记住这是从容器的顶部，而不是从卡的底部），以便在任何位置布局该视图。 / p>

基本上，您可以使用单个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>