如何处理垂直RecyclerView时间轴？

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>

结果看起来像这样；

我还找到了一个看起来不错的库- 图标可以做一些工作，但我想很多跑腿工作已经完成了。

我也从那时起才发现这种布局类型是正式的（根据材料设计指南）步进器。尽管我实际上在“开发”文档中找不到对它们的任何引用，但它可能会在您搜索合适的库时为您提供帮助。