Android自定义实现时光轴效果

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

时光轴

时光轴（Time Line）：从开始使用到结束的一段路程，就可以被看做为时光轴。在Android的开发中，时光轴也是一个经常会被列入开发需求的功能。例如：查询信息进度、申办证书进度、浏览历史痕迹等等都可以使用时光轴来处理。时光轴界面就好像一部电影，一点一点的把你一种回忆的感觉，美好。我们先欣赏一下界面

源码

GitHub地址： github.com/cctxwan/Dem…
CSDN地址： download.csdn.net/download/qq…

效果图如下：

看过这个界面之后，可以大概分析一下，这个界面不是太复杂，应该也就是一个lv或者rv显示的，然后通过计算把数据显示到item上就可以啦。

下面的就是代码啦~~

首先xml文件的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="activity.cc.com.demo009.activity.cc.com.TimeLineActivity">

    <LinearLayout
        android:id="@+id/id_layout"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@mipmap/timeline"
        android:orientation="vertical" />

    <RelativeLayout
        android:id="@+id/Re_layout"
        android:layout_below="@+id/id_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp" >

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:srcCompat="@mipmap/addtime"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/txt_addtime"
            android:layout_toStartOf="@+id/txt_addtime" />

        <TextView
            android:id="@+id/txt_addtime"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginEnd="15dp"
            android:layout_marginRight="15dp"
            android:gravity="center"
            android:text="添加时光轴"
            android:textColor="@color/black"
            android:textSize="15dp" />

    </RelativeLayout>

    <View
        android:id="@+id/view"
        android:layout_below="@+id/Re_layout"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:background="@color/gray"/>

    <LinearLayout
        android:id="@+id/lin_layout"
        android:layout_below="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@mipmap/timeline_title" />

        <TextView
            android:layout_width="match_parent"
            android:layout_marginTop="10dp"
            android:layout_height="match_parent"
            android:textColor="@color/black"
            android:gravity="center"
            android:textSize="20dp"
            android:text="我的时光轴" />

    </LinearLayout>

    <RelativeLayout
        android:layout_below="@+id/lin_layout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="10dp"
        android:orientation="vertical">

        <View
            android:id="@+id/group_tiao"
            android:layout_width="1dp"
            android:layout_height="fill_parent"
            android:layout_marginLeft="55dp"
            android:background="@color/time_line_bg"
            android:layout_below="@+id/courses_title" />

        <TextView
            android:id="@+id/courses_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="70dp"
            android:layout_marginTop="10dp"
            android:text="记录美好的瞬间"
            android:textColor="@android:color/black"
            android:textSize="15dp" />

        <ExpandableListView
            android:id="@+id/timeline_listView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/courses_title">

        </ExpandableListView>

    </RelativeLayout>

</RelativeLayout>

注：这里我是用了lv的加强版view（ExpandableListView）

在activity中通过adapter将数据填充到每一个item中（我的数据时保存在数据库中的，这里就不贴数据库的代码了，比较多，可以下载源码看看）

activity.class

statusAdapter = new StatusExpandAdapter(this, getListData());
timeline_listView.setAdapter(statusAdapter);
timeline_listView.setGroupIndicator(null); // 去掉默认带的箭头
timeline_listView.setSelection(0);// 设置默认选中项

// 遍历所有group,将所有项设置成默认展开
int groupCount = timeline_listView.getCount();
for (int i = 0; i < groupCount; i++) {
    timeline_listView.expandGroup(i);
}

timeline_listView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {

    @Override
    public boolean onGroupClick(ExpandableListView parent, View v,
                                int groupPosition, long id) {
        // TODO Auto-generated method stub
        return true;
    }
});


/**
* 填充时光轴上的级数据
 * @return
 */
private List<GroupStatusEntity> getListData() {
    List<GroupStatusEntity> groupList;
    groupList = new ArrayList<GroupStatusEntity>();
//        String[][] childTimeArray = new String[][]{ { "小一", "小二" }, { "二一", "二二" },{ "三一", "三二" }, { "四一", "四儿" } };
    for (int i = 0; i < datas.size(); i++) {
        GroupStatusEntity groupStatusEntity = new GroupStatusEntity();
        groupStatusEntity.setGroupName(datas.get(i).getData());

        List<ChildStatusEntity> childList = new ArrayList<ChildStatusEntity>();

        for (int j = 0; j < childTimeArray[i].length; j++) {
            ChildStatusEntity childStatusEntity = new ChildStatusEntity();
            childStatusEntity.setCompleteTime(childTimeArray[i][j]);
            childStatusEntity.setIsfinished(true);
            childList.add(childStatusEntity);
        }

        groupStatusEntity.setChildList(childList);
        groupList.add(groupStatusEntity);
    }
    return groupList;
}

注：注释简单明了。

adapter.class

package adapter.cc.com;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.TextView;

import java.util.List;

import activity.cc.com.demo009.R;
import info.cc.com.ChildStatusEntity;
import info.cc.com.GroupStatusEntity;

/**
 * Created by admin on 2017/12/4.
 */

public class StatusExpandAdapter extends BaseExpandableListAdapter {

    StatusExpandAdapter statusExpandAdapter;
    LayoutInflater inflater;
    List<GroupStatusEntity> groupList;

    /**
     * 构造方法
     *
     * @param context
     * @param group_list
     */
    public StatusExpandAdapter(Context context,
                               List<GroupStatusEntity> group_list) {
        this.groupList = group_list;
        inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    /**
     * 返回一级Item总数
     */
    @Override
    public int getGroupCount() {
        // TODO Auto-generated method stub
        return groupList.size();
    }

    /**
     * 返回二级Item总数
     */
    @Override
    public int getChildrenCount(int groupPosition) {
        if (groupList.get(groupPosition).getChildList() == null) {
            return 0;
        } else {
            return groupList.get(groupPosition).getChildList().size();
        }
    }

    /**
     * 获取一级Item内容
     */
    @Override
    public Object getGroup(int groupPosition) {
        // TODO Auto-generated method stub
        return groupList.get(groupPosition);
    }

    /**
     * 获取二级Item内容
     */
    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return groupList.get(groupPosition).getChildList().get(childPosition);
    }

    @Override
    public long getGroupId(int groupPosition) {
        // TODO Auto-generated method stub
        return groupPosition;
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        // TODO Auto-generated method stub
        return childPosition;
    }

    @Override
    public boolean hasStableIds() {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded,
                             View convertView, ViewGroup parent) {

        GroupViewHolder holder = new GroupViewHolder();

        if (convertView == null) {
            convertView = inflater.inflate(R.layout.group_status_item, null);
        }
        holder.groupName = (TextView) convertView
                .findViewById(R.id.one_status_name);

        holder.groupName.setText(groupList.get(groupPosition).getGroupName());

        return convertView;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition,
                             boolean isLastChild, View convertView, ViewGroup parent) {
        ChildViewHolder viewHolder = null;
        ChildStatusEntity entity = (ChildStatusEntity) getChild(groupPosition,
                childPosition);
        if (convertView != null) {
            viewHolder = (ChildViewHolder) convertView.getTag();
        } else {
            viewHolder = new ChildViewHolder();
            convertView = inflater.inflate(R.layout.child_status_item, null);
            viewHolder.twoStatusTime = (TextView) convertView
                    .findViewById(R.id.two_complete_time);
        }
        viewHolder.twoStatusTime.setText(entity.getCompleteTime());

        convertView.setTag(viewHolder);
        return convertView;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        // TODO Auto-generated method stub
        return false;
    }

    private class GroupViewHolder {
        TextView groupName;
    }

    private class ChildViewHolder {
        public TextView twoStatusTime;
    }
}

注：源码在后面

其实时光轴效果就相当于一个自定义版的lv、rv，通过定制化布局和操作来达到功能的实现

下面这里是源码

GitHub地址： github.com/cctxwan/Dem…
CSDN地址： download.csdn.net/download/qq…

q：486789970
email：mr.cai_cai@foxmail.com

如果有什么问题，欢迎大家指导。并相互联系，希望能够通过文章互相学习。