RecyclerView实现时间轴

据说为了让画面炫酷一点老板用起来心情愉快一点,原本平平常常展示的数据要用时间轴展示.

鸡汁的我在设计图没出来前赶紧撸了个demo.

它一开始是长这样的--

其实就是一个时间的点点上面有一根轴下面有一根轴，然后再适配器里面判断状态（开始，中间，结束）来隐藏或是显示上下的轴。

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">

    <TextView
        android:id="@+id/time"
        android:layout_width="75dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:gravity="center"
        android:layout_marginRight="3dp"
        android:text="2017/2/13" />

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

        <TextView
            android:id="@+id/center_line"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_centerVertical="true" />

        <LinearLayout
            android:id="@+id/time_below_line"
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_below="@+id/center_line"
            android:layout_centerHorizontal="true"
            android:background="#a9a9a9"
            android:orientation="horizontal"></LinearLayout>

        <LinearLayout
            android:id="@+id/time_above_line"
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_above="@+id/center_line"
            android:layout_centerHorizontal="true"
            android:background="#a9a9a9"
            android:orientation="horizontal"></LinearLayout>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:src="@drawable/timeline_greennn" />
    </RelativeLayout>
    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        app:cardBackgroundColor="#deffc7"
        app:cardPreventCornerOverlap="false"
        app:cardCornerRadius="8dp"
        app:cardElevation="3dp">

        <TextView
            android:id="@+id/content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="15dp"
            android:text="巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉" />
    </android.support.v7.widget.CardView>
</LinearLayout>

适配器，一直在用 BaseRecyclerViewAdapterHelper

部分代码如下：这里的0 1 2 是用来记录状态（开始 内容 结束）的。

 @Override
    protected void convert(BaseViewHolder baseViewHolder, TimeLine timeLine) {
        baseViewHolder.setVisible(R.id.time_above_line, false)
                .setVisible(R.id.time_below_line, true)
                .setText(R.id.time, timeLine.getDete().toString().trim());
        if (timeLine.getState() == 0) {
            baseViewHolder.setVisible(R.id.time_above_line, false)
                    .setVisible(R.id.time_below_line, true)
                    .setText(R.id.content, "开始");
        } else if (timeLine.getState() == 2) {
            baseViewHolder.setVisible(R.id.time_above_line, true)
                    .setVisible(R.id.time_below_line, false)
                    .setText(R.id.content, "结束");
        } else {
            baseViewHolder.setVisible(R.id.time_above_line, true)
                    .setVisible(R.id.time_below_line, true)
                    .setText(R.id.content, timeLine.getContent().toString().trim());
        }

    }

然后设计图出来了,长这样--

莫名的感觉好像哪里不一样了...

好像是不对称了,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"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/timeline_startorend"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="@dimen/margin_padding_13dp"
            android:gravity="center"
            android:text="开始"
            android:textSize="@dimen/textSize_20sp"
            android:textStyle="bold" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="@dimen/margin_padding_5dp">

            <TextView
                android:id="@+id/center_line"
                android:layout_width="@dimen/margin_padding_0dp"
                android:layout_height="@dimen/margin_padding_0dp"
                android:layout_centerVertical="true" />

            <LinearLayout
                android:id="@+id/time_below_line"
                android:layout_width="@dimen/margin_padding_2dp"
                android:layout_height="match_parent"
                android:layout_below="@+id/center_line"
                android:layout_centerHorizontal="true"
                android:background="#e7e7e7"
                android:orientation="horizontal"></LinearLayout>

            <LinearLayout
                android:id="@+id/time_above_line"
                android:layout_width="@dimen/margin_padding_2dp"
                android:layout_height="match_parent"
                android:layout_above="@+id/center_line"
                android:layout_centerHorizontal="true"
                android:background="#e7e7e7"
                android:orientation="horizontal"></LinearLayout>

            <ImageView
                android:id="@+id/timeline_point"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:src="@drawable/timeline_green" />
        </RelativeLayout>


        <TextView
            android:id="@+id/timeline_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/margin_padding_12dp"
            android:text="2016/9/9"
            android:layout_gravity="center_vertical"
            android:textSize="@dimen/textSize_15sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="@dimen/margin_padding_13dp"
            android:gravity="center"
            android:text="开始"
            android:textSize="@dimen/textSize_20sp"
            android:textStyle="bold"
            android:visibility="invisible" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="@dimen/margin_padding_5dp">

            <TextView
                android:id="@+id/center_line2"
                android:layout_width="@dimen/margin_padding_0dp"
                android:layout_height="@dimen/margin_padding_0dp"
                android:layout_centerVertical="true" />

            <LinearLayout
                android:id="@+id/time_below_line2"
                android:layout_width="@dimen/margin_padding_2dp"
                android:layout_height="match_parent"
                android:layout_centerHorizontal="true"
                android:background="#e7e7e7"
                android:orientation="horizontal"></LinearLayout>


            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:src="@drawable/timeline_green"
                android:visibility="invisible" />
        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">


                <TextView
                    android:id="@+id/timeline_content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:background="@drawable/timeline_green_bg"
                    android:paddingTop="@dimen/margin_padding_7.5dp"
                    android:paddingBottom="@dimen/margin_padding_7.5dp"
                    android:paddingLeft="@dimen/margin_padding_15dp"
                    android:paddingRight="@dimen/margin_padding_11dp"
                    android:layout_marginRight="@dimen/margin_padding_20dp"
                    android:textColor="#313541"
                    android:layout_marginBottom="@dimen/margin_padding_23dp"
                    android:text="巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

虽然有点麻烦但它的item确实变样了

适配器--

 @Override
    protected void convert(BaseViewHolder baseViewHolder, TimeLine timeLine) {
        if (timeLine.getState() == 0) {//开始  有开始 有日期 有内容
            baseViewHolder.setVisible(R.id.time_above_line, false)
                    .setVisible(R.id.time_below_line, true)
                    .setVisible(R.id.time_below_line2, true)
                    .setAlpha(R.id.timeline_startorend, 100)
                    .setText(R.id.timeline_startorend, "开始")//开始
                    .setImageDrawable(R.id.timeline_point, ContextCompat.getDrawable(mContext, R.drawable.timeline_green))
                    .setBackgroundRes(R.id.timeline_content, R.drawable.timeline_green_bg)
                    .setVisible(R.id.timeline_time, true)//日期
                    .setVisible(R.id.timeline_content, true)//内容
                    .setText(R.id.timeline_time, timeLine.getDete().toString())//日期
                    .setText(R.id.timeline_content, timeLine.getContent().toString());//内容
        } else if (timeLine.getState() == 2) {//结束//有结束 无日期 无内容
            baseViewHolder.setVisible(R.id.time_above_line, true)
                    .setVisible(R.id.time_below_line, false)
                    .setVisible(R.id.time_below_line2, false)
                    .setAlpha(R.id.timeline_startorend, 100)
                    .setText(R.id.timeline_startorend, "结束")
                    .setImageDrawable(R.id.timeline_point, ContextCompat.getDrawable(mContext, R.drawable.timeline_blue))
                    .setVisible(R.id.timeline_time, false)//日期
                    .setVisible(R.id.timeline_content, false);//内容
        } else {//中间的  无开始结束 有日期 有内容
            if (timeLine.getPosition()%2!= 0) {
                baseViewHolder.setImageDrawable(R.id.timeline_point, ContextCompat.getDrawable(mContext, R.drawable.timeline_red))
                        .setBackgroundRes(R.id.timeline_content, R.drawable.timeline_red_bg);
            } else {
                baseViewHolder.setImageDrawable(R.id.timeline_point, ContextCompat.getDrawable(mContext, R.drawable.timeline_green))
                        .setBackgroundRes(R.id.timeline_content, R.drawable.timeline_green_bg);
            }
            baseViewHolder.setVisible(R.id.time_above_line, true)
                    .setVisible(R.id.time_below_line, true)
                    .setVisible(R.id.time_below_line2, true)
                    .setAlpha(R.id.timeline_startorend, 0)//无开始结束
                    .setVisible(R.id.timeline_time, true)//日期
                    .setVisible(R.id.timeline_content, true)//内容
                    .setText(R.id.timeline_time, timeLine.getDete().toString())//日期
                    .setText(R.id.timeline_content, timeLine.getContent().toString());//内容
        }

    }

搞定啦--

就是这样~