背景

公司新项目中有一个功能要实现时间轴效果，网上也找了很多教程和Demo，但都不是我想要的，大部分用的是RecyclerView实现的，但这些都是一层的数据结构，但我需要的是两层的结构，用RecyclerView应该也可以实现这种效果，但是结合后台返回的数据，用RecyclerView实现可能有些麻烦，最终我选择了使用ExpandableListview实现两层结构的时间轴效果，下面是做好的效果图：

分析

代码很简单，和普通用ExpandableListView一样，没什么特别的，需要注意的是布局的结构。从上面的效果图可以看出，group布局中应该包含这些控件：显示年月的圆形，圆形上方的line和圆形下方的line，其他的就是child布局中的内容了，需要注意的最右侧也是一个动态数据的view，即listview之类的可以动态添加数据的，但是如果要用listview的话，这就会牵扯出来一个亘古久远的问题listview嵌套问题，我们这里等于是在ExpandableListView的child中嵌套listview，注意要想让listview完全伸展就需要重新listview的onMeasure方法，像下面这样：

public class ListViewForScrollView extends ListView {    public ListViewForScrollView(Context context) {        super(context);    }    public ListViewForScrollView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public ListViewForScrollView(Context context, AttributeSet attrs,                                 int defStyle) {        super(context, attrs, defStyle);    }    @Override    /**     * 重写该方法，达到使ListView适应ScrollView的效果     */    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,                MeasureSpec.AT_MOST);        super.onMeasure(widthMeasureSpec, expandSpec);    }}

这是我之前一直在用的方法，但是这样的话带来的问题就是listview的item不能复用而且adapter里面的getView方法会执行很多遍，这无疑是非常浪费性能的，数据多或者布局复杂就会很卡顿，所以今天我们不再用这样的方法了，而是用LinearLayout来实现，这个在下面我们再详细说明，接着分析我们的布局结构，child中以那个小圆view开始，它上边和右边各有一个line，这样child上方的line就可以和group下方的line连接在一起，child上方的line也可以和上一个child中的小圆view连接子在一起，child布局中的小圆和line我是使用LinearLayout和margin来控制对齐的，这样右侧显示动态数据的view就可以根据内容自动填充高度，当然也可以使用其他布局的方式实现。下面是item布局的代码：

group布局：

<?xml version="1.0" encoding="utf-8"?>    android:layout_width="wrap_content"    android:layout_height="match_parent"    xmlns:tools="http://schemas.android.com/tools"    android:orientation="vertical">            android:layout_marginLeft="25dp"        android:gravity="center_horizontal"        android:orientation="vertical"        android:layout_width="wrap_content"        android:layout_height="wrap_content">                    android:id="@+id/item_group_top_line"            android:background="@color/mine_font_little"            android:layout_width="0.5dp"            android:layout_height="50dp"/>                    android:id="@+id/item_group_year_month"            android:gravity="center"            tools:text="1月\n2017"            android:textColor="@android:color/white"            android:background="@drawable/shape_orange_circle"            android:layout_width="wrap_content"            android:layout_height="wrap_content"/>                    android:id="@+id/item_group_bottom_line"            android:background="@color/mine_font_little"            android:layout_width="0.5dp"            android:layout_height="match_parent"/>    

child布局：

<?xml version="1.0" encoding="utf-8"?>    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:tools="http://schemas.android.com/tools">            android:gravity="center_horizontal"        android:orientation="horizontal"        android:layout_marginLeft="47dp"        android:layout_width="match_parent"        android:layout_height="wrap_content">                    android:orientation="vertical"            android:minHeight="50dp"            android:layout_width="match_parent"            android:layout_height="wrap_content">                            android:orientation="horizontal"                android:layout_weight="1"                android:layout_width="match_parent"                android:layout_height="0dp">                                    android:id="@+id/item_child_v_line"                    android:layout_marginLeft="5dp"                    android:background="@color/mine_font_little"                    android:layout_width="0.5dp"                    android:layout_height="match_parent"/>                                    android:layout_width="match_parent"                    android:layout_height="match_parent">                                            android:id="@+id/item_child_month_day"                        android:layout_marginLeft="10dp"                        android:layout_marginBottom="5dp"                        tools:text="1月9日"                        android:layout_gravity="bottom"                        android:textSize="16sp"                        android:layout_width="wrap_content"                        android:layout_height="wrap_content" />                                            android:id="@+id/item_child_lv"                        android:layout_marginLeft="5dp"                        android:layout_marginBottom="5dp"                        android:minHeight="50dp"                        android:orientation="vertical"                        android:gravity="bottom"                        android:layout_width="match_parent"                        android:layout_height="wrap_content"/>                                                        android:orientation="horizontal"                android:gravity="center_vertical"                android:layout_width="match_parent"                android:layout_height="wrap_content">                                    android:id="@+id/item_child_circle"                    android:background="@drawable/shape_little_orange_circle"                    android:layout_width="10dp"                    android:layout_height="10dp"/>                                    android:id="@+id/item_child_r_line"                    android:background="@color/mine_font_little"                    android:layout_width="match_parent"                    android:layout_height="0.5dp"/>                        

在child布局中看到有个NestFullListView，这个就是上面我们说的使用LinearLayout实现的伸展ListView，通过继承LinearLayout，向布局中动态addView来实现，做了类似ListView的adapter和ViewHolder封装，使用起来特别方便，只需几行代码：

childHolder.itemChildLv.setAdapter(new NestFullListViewAdapter(R.layout.item_child_timeline_data,daylistBean.getDatalist()) {                @Override                public void onBind(int pos, TimeLine.RowsBean.DaylistBean.DatalistBean datalistBean, NestFullViewHolder holder) {                    holder.setText(R.id.item_child_sr_name,datalistBean.getName());                    holder.setText(R.id.item_child_sr_progress,datalistBean.getProgress() + "%");                }            });

其中的itemChildLv就是NestFullListView，给它设置一个adapter，adapter指定了数据类型，再给adapter传入item布局的id和数据，通过回调函数onBind，设置指定控件的值就可以了，是不是很方便呢！

源码地址：

https://github.com/hnxylc8818/TimeLineDemo

到这里就结束啦.