阅读 27

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地址:

TimeLineDemo

喜欢的麻烦动动小手点个赞来支持我,有不对的地方欢迎大家指正,有什么问题也可以在下方留言,我看到后会第一时间回复!

关注下面的标签,发现更多相似文章
评论