注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

和申的个人主页

专注于java开发,1985wanggang

 
 
 

日志

 
 

使用ExpandableListView实现一个时光轴  

2015-12-10 14:51:04|  分类: 安卓 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

版权声明:本文为博主原创文章,转载请注明出处。若有错误地方,还望批评指正,不胜感激。

在许多App上都能看到时光轴的效果,比如携程等等,那么我们今天就利用ExpandableListView来实现一个时光轴效果,先来看看效果图:


效果还是挺简单的,这里我们主要是采用ExpandableListView来实现,关于ExpandableListView的详细使用参见(android开发之ExpandableListView的使用,实现类似QQ好友列表),我们这里主要介绍这个效果的实现:

先来看看主布局文件:

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     <TextView  
  7.         android:id="@+id/title_p"  
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:layout_centerHorizontal="true"  
  11.         android:layout_margin="12dp"  
  12.         android:gravity="center"  
  13.         android:text="2015年11月"  
  14.         android:textSize="18sp" />  
  15.   
  16.     <View  
  17.         android:id="@+id/hor_div"  
  18.         android:layout_width="match_parent"  
  19.         android:layout_height="1dp"  
  20.         android:layout_below="@id/title_p"  
  21.         android:background="#9F79EE" />  
  22.   
  23.     <View  
  24.         android:id="@+id/ver_div"  
  25.         android:layout_width="1dp"  
  26.         android:layout_height="match_parent"  
  27.         android:layout_below="@id/hor_div"  
  28.         android:layout_marginLeft="70dp"  
  29.         android:background="#9F79EE" />  
  30.   
  31.     <TextView  
  32.         android:id="@+id/title_c"  
  33.         android:layout_width="match_parent"  
  34.         android:layout_height="wrap_content"  
  35.         android:layout_below="@id/hor_div"  
  36.         android:layout_marginLeft="60dp"  
  37.         android:paddingBottom="12dp"  
  38.         android:paddingLeft="18dp"  
  39.         android:paddingTop="12dp"  
  40.         android:text="时光轴"  
  41.         android:textSize="24sp" />  
  42.   
  43.     <ExpandableListView  
  44.         android:id="@+id/lv"  
  45.         android:layout_width="match_parent"  
  46.         android:layout_height="match_parent"  
  47.         android:layout_below="@id/title_c"  
  48.         android:layout_marginLeft="60dp"  
  49.         android:background="@null"  
  50.         android:clickable="false"  
  51.         android:divider="@null" >  
  52.     </ExpandableListView>  
  53.   
  54. </RelativeLayout>  

两条分割线用View来做,整体不难,不多说,看看MainActivity

  1. public class MainActivity extends Activity {  
  2.   
  3.     private List<TimeLineBean> list;  
  4.     private ExpandableListView lv;  
  5.   
  6.     @Override  
  7.     protected void onCreate(Bundle savedInstanceState) {  
  8.         super.onCreate(savedInstanceState);  
  9.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  10.         setContentView(R.layout.activity_main);  
  11.         initData();  
  12.         initView();  
  13.     }  
  14.   
  15.     private void initView() {  
  16.         lv = (ExpandableListView) this.findViewById(R.id.lv);  
  17.         lv.setAdapter(new MyAdapter(MainActivity.this, list));  
  18.         for (int i = 0; i < list.size(); i++) {  
  19.             lv.expandGroup(i);  
  20.         }  
  21.         lv.setGroupIndicator(null);  
  22.         lv.setOnGroupClickListener(new OnGroupClickListener() {  
  23.   
  24.             @Override  
  25.             public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {  
  26.                 return true;  
  27.             }  
  28.         });  
  29.     }  
  30.   
  31.     private void initData() {  
  32.         list = new ArrayList<TimeLineBean>();  
  33.         List<String> things = new ArrayList<String>();  
  34.         things.add("六王毕,四海一;");  
  35.         things.add("蜀山兀,阿房出。");  
  36.         things.add("覆压三百余里,隔离天日。");  
  37.         list.add(new TimeLineBean("11月24日", things));  
  38.         things = new ArrayList<String>();  
  39.         things.add("骊山北构而西折,");  
  40.         things.add("直走咸阳。");  
  41.         things.add("二川溶溶,流入宫墙。");  
  42.         list.add(new TimeLineBean("11月23日", things));  
  43.         things = new ArrayList<String>();  
  44.         things.add("五步一楼,十步一阁;");  
  45.         things.add("廊腰缦回,");  
  46.         list.add(new TimeLineBean("11月22日", things));  
  47.         things = new ArrayList<String>();  
  48.         things.add("檐牙高啄;");  
  49.         things.add("各抱地势,钩心斗角。");  
  50.         things.add("盘盘焉,囷囷焉,蜂房水涡,");  
  51.         things.add("矗不知乎几千万落!");  
  52.         list.add(new TimeLineBean("11月21日", things));  
  53.         things = new ArrayList<String>();  
  54.         things.add("长桥卧波,未云何龙?");  
  55.         things.add("複道行空,不霁何虹?");  
  56.         things.add("高低冥迷,不知西东。");  
  57.         list.add(new TimeLineBean("11月20日", things));  
  58.         things = new ArrayList<String>();  
  59.         things.add("歌台暖响,");  
  60.         things.add("春光融融;");  
  61.         list.add(new TimeLineBean("11月19日", things));  
  62.         things = new ArrayList<String>();  
  63.         things.add("舞殿冷袖,");  
  64.         things.add("风雨凄凄。");  
  65.         things.add("一日之内,一宫之间,");  
  66.         things.add("而气候不齐。");  
  67.         list.add(new TimeLineBean("11月18日", things));  
  68.     }  
  69. }  

在MainActivity中我们先初始化模拟数据,然后初始化View,初始化View的过程中,通过一个for循环让所有的group展开,然后再屏蔽掉group的点击事件,好了,再来看看Adapter:

  1. public class MyAdapter extends BaseExpandableListAdapter {  
  2.   
  3.     private Context context;  
  4.     private List<TimeLineBean> list;  
  5.   
  6.     public MyAdapter(Context context, List<TimeLineBean> list) {  
  7.         this.context = context;  
  8.         this.list = list;  
  9.     }  
  10.   
  11.     @Override  
  12.     public Object getChild(int groupPosition, int childPosition) {  
  13.         return list.get(groupPosition).getThings();  
  14.     }  
  15.   
  16.     @Override  
  17.     public long getChildId(int groupPosition, int childPosition) {  
  18.         return childPosition;  
  19.     }  
  20.   
  21.     @Override  
  22.     public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView,  
  23.             ViewGroup parent) {  
  24.         ChildHolder holder = null;  
  25.         if (convertView == null) {  
  26.             convertView = LayoutInflater.from(context).inflate(R.layout.child_item, null);  
  27.             holder = new ChildHolder();  
  28.             holder.tv = (TextView) convertView.findViewById(R.id.ci_thing);  
  29.             convertView.setTag(holder);  
  30.         } else {  
  31.             holder = (ChildHolder) convertView.getTag();  
  32.         }  
  33.         holder.tv.setText(list.get(groupPosition).getThings().get(childPosition));  
  34.         return convertView;  
  35.     }  
  36.   
  37.     @Override  
  38.     public int getChildrenCount(int groupPosition) {  
  39.         return list.get(groupPosition).getThings().size();  
  40.     }  
  41.   
  42.     @Override  
  43.     public Object getGroup(int groupPosition) {  
  44.         return list.get(groupPosition).getDate();  
  45.     }  
  46.   
  47.     @Override  
  48.     public int getGroupCount() {  
  49.         return list.size();  
  50.     }  
  51.   
  52.     @Override  
  53.     public long getGroupId(int groupPosition) {  
  54.         return groupPosition;  
  55.     }  
  56.   
  57.     @Override  
  58.     public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {  
  59.         GroupHolder holder = null;  
  60.         if (convertView == null) {  
  61.             convertView = LayoutInflater.from(context).inflate(R.layout.group_item, null);  
  62.             holder = new GroupHolder();  
  63.             holder.tv = (TextView) convertView.findViewById(R.id.gi_date);  
  64.             convertView.setTag(holder);  
  65.         } else {  
  66.             holder = (GroupHolder) convertView.getTag();  
  67.         }  
  68.         holder.tv.setText(list.get(groupPosition).getDate());  
  69.         return convertView;  
  70.     }  
  71.   
  72.     @Override  
  73.     public boolean hasStableIds() {  
  74.         return false;  
  75.     }  
  76.   
  77.     @Override  
  78.     public boolean isChildSelectable(int groupPosition, int childPosition) {  
  79.         return false;  
  80.     }  
  81.   
  82.     class GroupHolder {  
  83.         TextView tv;  
  84.     }  
  85.   
  86.     class ChildHolder {  
  87.         TextView tv;  
  88.     }  
  89.   
  90. }  
这个Adapter也没啥讲的,大家如果有疑问可以参见android开发之ExpandableListView的使用,实现类似QQ好友列表,这里有ExpandableListView的详细介绍。最后就是两个item文件:

group_item.xml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="horizontal" >  
  6.   
  7.     <View  
  8.         android:layout_width="20dp"  
  9.         android:layout_height="20dp"  
  10.         android:layout_marginTop="22dp"  
  11.         android:background="@drawable/circle" />  
  12.   
  13.     <TextView  
  14.         android:id="@+id/gi_date"  
  15.         android:layout_width="match_parent"  
  16.         android:layout_height="wrap_content"  
  17.         android:paddingBottom="16dp"  
  18.         android:paddingLeft="12dp"  
  19.         android:paddingTop="18dp"  
  20.         android:text="11月24号"  
  21.         android:textSize="22sp" />  
  22.   
  23. </LinearLayout>  

child_item.xml:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <TextView  
  8.         android:id="@+id/ci_thing"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:paddingLeft="22dp"  
  12.         android:paddingTop="8dp"  
  13.         android:text="11月24号"  
  14.         android:textColor="#999999"  
  15.         android:textSize="16sp" />  
  16.   
  17. </LinearLayout>  

每个group_item的前面有一个红色的实心球,这个球我们用shape来绘制,关于shape的使用参见android开发之shape详解

circle.xml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:shape="oval" >  
  4.   
  5.     <corners android:radius="10dp" />  
  6.   
  7.     <size  
  8.         android:height="10dp"  
  9.         android:width="10dp" />  
  10.   
  11.     <solid android:color="#FF6A6A" />  
  12.   
  13. </shape>  

好了,这个东西貌似没难度,其实就是ExpandableListView的使用。

Demo下载http://download.csdn.net/detail/u012702547/9297507



http://blog.csdn.net/u012702547/article/details/50017911

  评论这张
 
阅读(194)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016