做项目的过程中呢，有个需求，要做出一个跟时间轴差不多的效果的页面，于是找了部分资料，基本上都是用ExpandableListView来实现这一效果的，于是开始着手了，我也要开始写我的项目了，先写个Demo，自己项目中当然还要自己去进行写优化什么的，先把类似效果实现出来再管项目啦。

Demo效果图

大概就是上图效果啦，有时候项目中发帖子什么的页面，就有时间记录什么的，然后旁边就是展现帖子的概要情况，当然页面不会这么简陋啦，实际项目根据需求来写出漂亮的布局什么，原理都差不多啦，好啦，开始贴Demo代码啦。

MainActivity.java

public class MainActivity extends AppCompatActivity {

private ExpandableListView elvTimerShaft;

private TimerShaftAdapter adapter;

private String datas = "[{\"time\":1456761600,\"data\":[{\"title\":\"title\",\"content\":\"新人报到啦啦啦啦啦\"},{\"title\":\"标题咯\",\"content\":\"新人报到\"}]},{\"time\":1455638400,\"data\":[{\"title\":\"我\",\"content\":\"哈哈哈哈哈哈\"}]},{\"time\":1453651200,\"data\":[{\"title\":\"新人报道\",\"content\":\"签到啦\"}]}]";

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

elvTimerShaft = (ExpandableListView) findViewById(R.id.elv_timer_shaft);

List parents = JSON.parseArray(datas, TimeShaftParentBean.class);

adapter = new TimerShaftAdapter(MainActivity.this, parents);

elvTimerShaft.setAdapter(adapter); // 遍历所有group,将所有项设置成默认展开

for (int i = 0; i < parents.size(); i++) {

elvTimerShaft.expandGroup(i);

}

elvTimerShaft.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {

@Override

public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {

return true;

}

});

}

}

TimerShaftAdapter.java

public class TimerShaftAdapter extends BaseExpandableListAdapter {

private LayoutInflater inflater = null;

private Context mContext;

private List timeShaftParentBeans;

public TimerShaftAdapter(Context context, List timeShaftBeans) {

inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

this.timeShaftParentBeans = timeShaftBeans;

this.mContext = context;

}

@Override

public int getGroupCount() {

return timeShaftParentBeans.size();

}

@Override

public int getChildrenCount(int groupPosition) {

String data = timeShaftParentBeans.get(groupPosition).getData();

List childBeans = JSON.parseArray(data, TimeShaftChildBean.class);

return childBeans.size();

}

@Override

public Object getGroup(int groupPosition) {

return timeShaftParentBeans.get(groupPosition);

}

@Override

public Object getChild(int groupPosition, int childPosition) {

String data = timeShaftParentBeans.get(groupPosition).getData();

List childBeans = JSON.parseArray(data, TimeShaftChildBean.class);

return childBeans.get(childPosition);

}

@Override

public long getGroupId(int groupPosition) {

return groupPosition;

}

@Override

public long getChildId(int groupPosition, int childPosition) {

return childPosition;

}

@Override

public boolean hasStableIds() {

return false;

}

@Override

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

GroupViewHolder groupHolder = null;

if (convertView == null) {

convertView = inflater.inflate(R.layout.item_parent, null);

groupHolder = new GroupViewHolder();

groupHolder.tvDay = (TextView) convertView.findViewById(R.id.tv_day);

convertView.setTag(groupHolder);

} else {

groupHolder = (GroupViewHolder) convertView.getTag();

}

String time = timestamp2StrTime(timeShaftParentBeans.get(groupPosition).getTime());

groupHolder.tvDay.setText(time);

return convertView;

}

@Override

public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {

ChildViewHolder childHolder = null;

TimeShaftChildBean childBean = (TimeShaftChildBean) getChild(groupPosition, childPosition);

if (convertView == null) {

convertView = inflater.inflate(R.layout.item_child, null);

childHolder = new ChildViewHolder();

childHolder.tvTitle = (TextView) convertView.findViewById(R.id.tv_title);

childHolder.tvContent = (TextView) convertView.findViewById(R.id.tv_content);

convertView.setTag(childHolder);

} else {

childHolder = (ChildViewHolder) convertView.getTag();

} childHolder.tvTitle.setText(childBean.getTitle());

childHolder.tvContent.setText(childBean.getContent());

return convertView;

}

@Override

public boolean isChildSelectable(int groupPosition, int childPosition) {

return false;

}

private class GroupViewHolder {

TextView tvDay;

}

private class ChildViewHolder {

TextView tvTitle;

TextView tvContent;

}

public String timestamp2StrTime(String timestamp) {

String result = "";

SimpleDateFormat sdf = new SimpleDateFormat("MM.dd");

long time = Long.valueOf(timestamp);

result = sdf.format(new Date(time * 1000L));

return result;

}

}

TimeShaftChildBean.java

public class TimeShaftChildBean {

private String _id; // id

private String title; // 标题

private String content; // 内容

public String get_id() {

return _id;

}

public void set_id(String _id) {

this._id = _id;

}

public String getTitle() {

return title;

}

public void setTitle(String title) {

this.title = title;

}

public String getContent() {

return content;

}

public void setContent(String content) {

this.content = content;

}

}

TimeShaftParentBean.java

public class TimeShaftParentBean {

private String time;

private String data;

public String getTime() {

return time;

}

public void setTime(String time) {

this.time = time;

}

public String getData() {

return data;

}

public void setData(String data) {

this.data = data;

}

}

activity_main.xml

activity_main.xml

item_parent.xml

item_parent.xml

item_child.xml

item_child.xml

bg_point_gray.xml

bg_point_gray.xml好啦，到此为止，Demo实现的全部代码都有啦，因为数据一般都是从接口请求的，所以我这里demo给的也是Json格式的数据，然后用fastjson进行的解析工作，当然，我觉得这个时间轴的实现，主要还要了解ExpandableListView的使用，之前父布局和子布局都是用的RelativeLayout包裹，发现那根竖线总是不能自适应的连接起来，很奇怪，然后换成FrameLayout布局包裹，突然就好起来了，也不知道为什么，总之，效果实现了，根据这个做做修改，就能搞定实际项目需求啦。