Android时间轴的实现

做项目的过程中呢,有个需求,要做出一个跟时间轴差不多的效果的页面,于是找了部分资料,基本上都是用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<TimeShaftParentBean> 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<TimeShaftParentBean> timeShaftParentBeans;   
    public TimerShaftAdapter(Context context, List<TimeShaftParentBean> 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<TimeShaftChildBean> 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<TimeShaftChildBean> 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布局包裹,突然就好起来了,也不知道为什么,总之,效果实现了,根据这个做做修改,就能搞定实际项目需求啦。

好吧,最后还是把Demo传到csdn了,下载地址:http://download.csdn.net/detail/u010761637/9591922

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,064评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,606评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,011评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,550评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,465评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,919评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,428评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,075评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,208评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,185评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,191评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,914评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,482评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,585评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,825评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,194评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,703评论 2 339

推荐阅读更多精彩内容