Question

我正在创建一个电子商务应用程序，我必须创建我在图中附加的布局。我尝试过动态视图和drawable，但我无法取得任何成功。

Answer 1

你只需要稍微看一下图形图像。

让我们采取顶部水平显示（放置/运送/交付）。如果你创建了这样的图像怎么办：

图片1：

图片2

图3：

然后你可以将显示分成三列，分别用于放置，发货和交付。

一旦三列彼此相邻，这些线将像显示一样连接成一条连续线。

您的列看起来像这样（伪XML）：

    <LinearLayout
        android:orientation="vertical">

        <TextView
            android:text="Placed"/>

        <TextView
            android:text="20th Jan"/>

        <ImageView
            android:src="@drawable/start_with_check"/>

    </LinearLayout>

您可以将它们放在水平LinearLayout，甚至水平RecyclerView中。

对于底部的垂直时间轴，您可以使用相同的策略并使用垂直RecyclerView来显示任意数量的事件。一旦图像堆叠在一起，您就会看到一条连续的垂直线。

修改

因此，通过将线条与圆圈分开，可以更轻松地将图形放在一起。

line_start.png：

line_continue.png：

line_end.png：

white_check.png：

blue_check.png：

dot.png：

（是的，圈子里有小故障。我这么快就做了这个故事。这就是为什么你有图形设计师为你做这些事情。）

使用具有透明度的PNG图像 - 正如我在这些示例中所做的那样 - 是必需的，以便您可以叠加图像。

现在，你可以看到第一个项目总是有line_start，最后一个项目总是有line_end，中间的所有项目都有line_continue。

完成后，您可以使用FrameLayout将圆形图形叠加在线条图形的顶部。例如，以下是前三项：

    <LinearLayout
        android:orientation="vertical">

        <TextView
            android:text="Placed"/>

        <TextView
            android:text="20th Jan"/>

        <FrameLayout
            android:width="wrap_content"
            android:height="wrap_content">
            <ImageView
                android:src="@drawable/line_start"/>
            <ImageView
                android:src="@drawable/white_check"/>
        </FrameLayout>

    </LinearLayout>

    <LinearLayout
        android:orientation="vertical">

        <TextView
            android:text="Shipped"/>

        <TextView
            android:text="21st Jan"/>

        <FrameLayout
            android:width="wrap_content"
            android:height="wrap_content">
            <ImageView
                android:src="@drawable/line_continue"/>
            <ImageView
                android:src="@drawable/dot"/>
        </FrameLayout>

    </LinearLayout>

    <LinearLayout
        android:orientation="vertical">

        <TextView
            android:text="Delivered"/>

        <TextView
            android:text="25th Jan"/>

        <FrameLayout
            android:width="wrap_content"
            android:height="wrap_content">
            <ImageView
                android:src="@drawable/line_end"/>
            <ImageView
                android:src="@drawable/blue_check"/>
        </FrameLayout>

    </LinearLayout>

我将这些显示为预设XML，但由于所有项目都具有相同的基本布局，我希望您能看到动态生成这些项目是多么容易。

使用动态视图创建布局和绘制电子商务应用程序时出现问题

1 个答案: