android - 如何处理垂直 RecyclerView 时间轴？

Question

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

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

Answer 1

我一直在寻找在我的应用程序中实现类似 View 的方法。

就我个人而言，我不喜欢静态线。我的想法是采用 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 设计指南)stepper .虽然我在“开发”文档中实际上找不到对它们的任何引用，但它可能会在您搜索合适的库时为您提供帮助。