05
2017
10

使用 RecyclerView 实现简单时间轴

使用 RecyclerView 实现简单时间轴

前一段时间在公司中有个项目用到了 时间轴 这种形式的控件,我的第一反应就是去找 demo,但是想想好像并不是很复杂,所以开始着手自己写一个,现在算是搞定了一个简单的时间轴,现在记录一下:

先来上一张图,看看效果:

timeAxis

贴上这么一张图,主要还是不会做 GIF 动图,所以只能放一张半图~~(>_<)~~

时间轴这个东西,说透了,主要是中间的点点还有开始、中间、结束三条线的绘制。

然后开始直接上代码,首先是 RecyclerView 中 Adapter 的 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">

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

        <ImageView  android:id="@+id/construction_detail_iv_circular" android:layout_width="26dp" android:layout_height="26dp" android:layout_marginLeft="20dp" android:layout_marginTop="10dp" android:src="@drawable/construction_detail_circular" />

        <View  android:id="@+id/construction_detail_top_line" android:layout_width="1dp" android:layout_height="23dp" android:layout_marginLeft="33dp" android:background="#00cdd0" />

        <View  android:id="@+id/construction_detail_other_line" android:layout_width="1dp" android:layout_height="10000dp" android:layout_alignBottom="@+id/construction_detail_layout" android:layout_below="@+id/construction_detail_top_line" android:layout_marginLeft="33dp" android:background="#00cdd0" />

        <LinearLayout  android:id="@+id/construction_detail_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="15dp" android:layout_toRightOf="@+id/construction_detail_iv_circular" android:orientation="vertical">

            <TextView  android:id="@+id/construction_detail_tv_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:layout_marginRight="5dp" android:text="15:40" android:textColor="@android:color/black" android:textSize="14sp" />

            <TextView  android:id="@+id/construction_detail_tv_data" android:layout_width="wrap_content" android:layout_marginBottom="5dp" android:layout_height="wrap_content" android:layout_marginRight="5dp" android:text="" android:textColor="@android:color/black" android:textSize="14sp" />

        </LinearLayout>

    </RelativeLayout>

</LinearLayout>

timeAxis1

这就是设计之后的样子!!!

适配器一直是使用 BaseRecyclerViewAdapterHelper,主要还是这个比较简单、方便、已操作的。

然后是 Adapter 的代码:

package com.admin.recyclerview.adapter;

import android.view.View;

import com.admin.recyclerview.R;
import com.admin.recyclerview.bean.TimeAxis;
import com.admin.recyclerview.util.Info;
import com.chad.library.adapter.base.BaseItemDraggableAdapter;
import com.chad.library.adapter.base.BaseViewHolder;

import java.util.List;

public class TimeAxisQuickAdapter extends BaseItemDraggableAdapter<TimeAxis> {

    public TimeAxisQuickAdapter(List<TimeAxis> data) {
        super(R.layout.time_axis_mb, data);
        List<TimeAxis> list = data;
    }

    @Override
    protected void convert(BaseViewHolder baseViewHolder, TimeAxis timeAxis) {
        baseViewHolder
                .setText(R.id.construction_detail_tv_time, timeAxis.getTime())// 时间
                .setText(R.id.construction_detail_tv_data, timeAxis.getData())// 内容
                .setVisible(R.id.construction_detail_other_line, (Info.isEmptyOrNullString(timeAxis.getPosition())
                        || !timeAxis.getPosition().equals("1")));// 判断是不是尾,如果是,隐藏;

        // 判断是不是开头,如果是,隐藏开始的线
        View view_TopLine = baseViewHolder.getView(R.id.construction_detail_top_line);
        if ((!Info.isEmptyOrNullString(timeAxis.getPosition())
                && timeAxis.getPosition().equals("0"))) {
            view_TopLine.setVisibility(View.INVISIBLE);
        }
    }
}

首先判断 timeAxis 实体类中的 Position 是不是为空,如果为空,则证明是中间,如果是 “0” 则为开头,如果是 “1” 则为结尾,然后判断显示和隐藏就好了。

然后只需要在对应的 Activity 中进行相应的 RecyclerView 的配置就可以了。

timeAxis2

放一张删除部分内容之后的全部显示图,这就搞定了~!

然后放一个我自己 GitHub 的地址:项目地址

上一篇:RecylerView的使用 下一篇:TextView两端对齐