Question

我想创建一个垂直动态时间轴，它在左边发生的时间，右边发生的事情，中间的一条线，每个事件的线条都有一个气泡。时间，事件和事件数量将是动态的。

我在这里想的可能是在垂直线的静态图像上的RecyclerView。列表项将包含时间，气泡图像，然后是事件视图。在写这篇文章之前，我想我会遇到与垂直线排列泡沫的问题。有没有更好的方法来解决这个问题，或者有人可以指出一种方法来保证在不同的屏幕密度和尺寸上泡沫将超出我的线的中心？

Answer 1

我一直在寻找在我的应用中实现类似的视图。

就个人而言，我不是静态线的粉丝。我的想法是有一个有3列的布局 - 就你的例子而言;一个带有时间，一个带有点和垂直线的图像（或者只是最后一个项目的顶行），第三个列带有cardview。

我发布的布局非常粗糙，但我只是在几分钟内将它们拼凑起来，你应该明白这个想法。需要调整以确保图标上的垂直线到达布局的边缘（在我的示例中它们之间会有间隙）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="1">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp"
        android:layout_weight="0.06">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:layout_gravity="center">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1:45 PM" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:layout_gravity="center">

            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_test" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="10dp">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="Hello there"
                    android:padding="10dp"/>
            </android.support.v7.widget.CardView>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

结果看起来像这样;

我也找到了library看起来没问题 - 图标可以做一些工作，但我想很多腿部工作已经完成。

我刚刚发现这种布局类型是正式的（根据Matrial Design Guidelines）a stepper。虽然我无法在“开发”中找到任何对它们的引用。文档可以帮助您搜索适当的库。

Answer 2

编辑Jonny Wright后回答。我首先创建了一个card_item;

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    >

    <LinearLayout
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        >

        <LinearLayout

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:layout_gravity="top">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1:45 PM" />

        </LinearLayout>

        <android.support.design.widget.CoordinatorLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center">
            <View
                android:id="@+id/first"
        android:layout_gravity="center"
                android:background="@color/material_green_500"
                android:layout_width="2dp"
                android:layout_height="wrap_content"/>
            <ImageView
                app:layout_anchor="@id/first"
                app:layout_anchorGravity="top"
                android:layout_gravity="top"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/ic_test" />


        </android.support.design.widget.CoordinatorLayout>


    </LinearLayout>
    <LinearLayout

        android:layout_weight="1"

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

        <LinearLayout
            android:background="@drawable/chat_bubble"

            android:layout_marginRight="114dp"
            android:layout_marginEnd="114dp"
            android:layout_gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView

                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Hello there, how are you doing. Hello there, how are you doing. Hello there, how are you doing. Hello there, how are you doingHello there, how are you doing"
                android:padding="12dp"/>
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

然后在drawable文件夹中添加两个附加文件。聊天气泡背景和circle.xml的9补丁图片：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
    android:useLevel="false"
    android:innerRadius="0dp"
    >
<size android:width="100dp"
    android:height="100dp"/>
    <solid android:color="@color/material_green_500"/>
</shape>

这是结果。 Example usage

别忘了添加bubble.png

如何处理垂直RecyclerView时间轴？

2 个答案: