Android使用ExpandableListview实现时间轴
背景
公司新项目中有一个功能要实现时间轴效果，网上也找了很多教程和Demo，但都不是我想要的，大部分用的是RecyclerView实现的，但这些都是一层的数据结构，但我需要的是两层的结构，用RecyclerView应该也可以实现这种效果，但是结合后台返回的数据，用RecyclerView实现可能有些麻烦，最终我选择了使用ExpandableListview实现两层结构的时间轴效果，下面是做好的效果图：
Screenshot_2017-02-20-14-39-28-319.jpeg
分析
代码很简单，和普通用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"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical">
<LinearLayout
android:layout_marginLeft="25dp"
android:gravity="center_horizontal"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/item_group_top_line"
android:background="@color/mine_font_little"
android:layout_width="0.5dp"
android:layout_height="50dp"/>
<TextView
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"/>
<TextView
android:id="@+id/item_group_bottom_line"
android:background="@color/mine_font_little"
android:layout_width="0.5dp"
android:layout_height="match_parent"/>
</LinearLayout>
</FrameLayout>
child布局：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools">
<LinearLayout
android:gravity="center_horizontal"
android:orientation="horizontal"
android:layout_marginLeft="47dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:minHeight="50dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
<TextView
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"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
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" />
<cn.demo.timeline.fulllistview.NestFullListView
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"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/item_child_circle"
android:background="@drawable/shape_little_orange_circle"
android:layout_width="10dp"
android:layout_height="10dp"/>
<TextView
android:id="@+id/item_child_r_line"
android:background="@color/mine_font_little"
android:layout_width="match_parent"
android:layout_height="0.5dp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
在child布局中看到有个NestFullListView，这个就是上面我们说的使用LinearLayout实现的伸展ListView，通过继承LinearLayout，向布局中动态addView来实现，做了类似ListView的adapter和ViewHolder封装，使用起来特别方便，只需几行代码：
childHolder.itemChildLv.setAdapter(new NestFullListViewAdapter<TimeLine.RowsBean.DaylistBean.DatalistBean>(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，设置指定控件的值就可以了，是不是很方便呢！这么方便的东西当然要分享给大家了，下面是作者的详细介绍：
NestFullListView
然后呢.....然后就没有了，对，就这么简单！！！
最后附上项目的github地址：
