使用ExpandableListView实现一个时光轴

来源：互联网发布：石家庄鸿搜网络怎么样编辑：程序博客网时间：2024/04/20 16:39

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

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

先来看看主布局文件：

[java] view plaincopyprint?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent" >  
  
    <TextView  
        android:id="@+id/title_p"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_centerHorizontal="true"  
        android:layout_margin="12dp"  
        android:gravity="center"  
        android:text="2015年11月"  
        android:textSize="18sp" />  
  
    <View  
        android:id="@+id/hor_div"  
        android:layout_width="match_parent"  
        android:layout_height="1dp"  
        android:layout_below="@id/title_p"  
        android:background="#9F79EE" />  
  
    <View  
        android:id="@+id/ver_div"  
        android:layout_width="1dp"  
        android:layout_height="match_parent"  
        android:layout_below="@id/hor_div"  
        android:layout_marginLeft="70dp"  
        android:background="#9F79EE" />  
  
    <TextView  
        android:id="@+id/title_c"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:layout_below="@id/hor_div"  
        android:layout_marginLeft="60dp"  
        android:paddingBottom="12dp"  
        android:paddingLeft="18dp"  
        android:paddingTop="12dp"  
        android:text="时光轴"  
        android:textSize="24sp" />  
  
    <ExpandableListView  
        android:id="@+id/lv"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:layout_below="@id/title_c"  
        android:layout_marginLeft="60dp"  
        android:background="@null"  
        android:clickable="false"  
        android:divider="@null" >  
    </ExpandableListView>  
  
</RelativeLayout>  

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

[java] view plaincopyprint?
public class MainActivity extends Activity {  
  
    private List<TimeLineBean> list;  
    private ExpandableListView lv;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        requestWindowFeature(Window.FEATURE_NO_TITLE);  
        setContentView(R.layout.activity_main);  
        initData();  
        initView();  
    }  
  
    private void initView() {  
        lv = (ExpandableListView) this.findViewById(R.id.lv);  
        lv.setAdapter(new MyAdapter(MainActivity.this, list));  
        for (int i = 0; i < list.size(); i++) {  
            lv.expandGroup(i);  
        }  
        lv.setGroupIndicator(null);  
        lv.setOnGroupClickListener(new OnGroupClickListener() {  
  
            @Override  
            public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {  
                return true;  
            }  
        });  
    }  
  
    private void initData() {  
        list = new ArrayList<TimeLineBean>();  
        List<String> things = new ArrayList<String>();  
        things.add("六王毕，四海一；");  
        things.add("蜀山兀，阿房出。");  
        things.add("覆压三百余里，隔离天日。");  
        list.add(new TimeLineBean("11月24日", things));  
        things = new ArrayList<String>();  
        things.add("骊山北构而西折，");  
        things.add("直走咸阳。");  
        things.add("二川溶溶，流入宫墙。");  
        list.add(new TimeLineBean("11月23日", things));  
        things = new ArrayList<String>();  
        things.add("五步一楼，十步一阁；");  
        things.add("廊腰缦回，");  
        list.add(new TimeLineBean("11月22日", things));  
        things = new ArrayList<String>();  
        things.add("檐牙高啄；");  
        things.add("各抱地势，钩心斗角。");  
        things.add("盘盘焉，囷囷焉，蜂房水涡，");  
        things.add("矗不知乎几千万落！");  
        list.add(new TimeLineBean("11月21日", things));  
        things = new ArrayList<String>();  
        things.add("长桥卧波，未云何龙？");  
        things.add("複道行空，不霁何虹？");  
        things.add("高低冥迷，不知西东。");  
        list.add(new TimeLineBean("11月20日", things));  
        things = new ArrayList<String>();  
        things.add("歌台暖响，");  
        things.add("春光融融；");  
        list.add(new TimeLineBean("11月19日", things));  
        things = new ArrayList<String>();  
        things.add("舞殿冷袖，");  
        things.add("风雨凄凄。");  
        things.add("一日之内，一宫之间，");  
        things.add("而气候不齐。");  
        list.add(new TimeLineBean("11月18日", things));  
    }  
}  

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

[java] view plaincopyprint?
public class MyAdapter extends BaseExpandableListAdapter {  
  
    private Context context;  
    private List<TimeLineBean> list;  
  
    public MyAdapter(Context context, List<TimeLineBean> list) {  
        this.context = context;  
        this.list = list;  
    }  
  
    @Override  
    public Object getChild(int groupPosition, int childPosition) {  
        return list.get(groupPosition).getThings();  
    }  
  
    @Override  
    public long getChildId(int groupPosition, int childPosition) {  
        return childPosition;  
    }  
  
    @Override  
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView,  
            ViewGroup parent) {  
        ChildHolder holder = null;  
        if (convertView == null) {  
            convertView = LayoutInflater.from(context).inflate(R.layout.child_item, null);  
            holder = new ChildHolder();  
            holder.tv = (TextView) convertView.findViewById(R.id.ci_thing);  
            convertView.setTag(holder);  
        } else {  
            holder = (ChildHolder) convertView.getTag();  
        }  
        holder.tv.setText(list.get(groupPosition).getThings().get(childPosition));  
        return convertView;  
    }  
  
    @Override  
    public int getChildrenCount(int groupPosition) {  
        return list.get(groupPosition).getThings().size();  
    }  
  
    @Override  
    public Object getGroup(int groupPosition) {  
        return list.get(groupPosition).getDate();  
    }  
  
    @Override  
    public int getGroupCount() {  
        return list.size();  
    }  
  
    @Override  
    public long getGroupId(int groupPosition) {  
        return groupPosition;  
    }  
  
    @Override  
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {  
        GroupHolder holder = null;  
        if (convertView == null) {  
            convertView = LayoutInflater.from(context).inflate(R.layout.group_item, null);  
            holder = new GroupHolder();  
            holder.tv = (TextView) convertView.findViewById(R.id.gi_date);  
            convertView.setTag(holder);  
        } else {  
            holder = (GroupHolder) convertView.getTag();  
        }  
        holder.tv.setText(list.get(groupPosition).getDate());  
        return convertView;  
    }  
  
    @Override  
    public boolean hasStableIds() {  
        return false;  
    }  
  
    @Override  
    public boolean isChildSelectable(int groupPosition, int childPosition) {  
        return false;  
    }  
  
    class GroupHolder {  
        TextView tv;  
    }  
  
    class ChildHolder {  
        TextView tv;  
    }  
  
}  

这个Adapter也没啥讲的，大家如果有疑问可以参见android开发之ExpandableListView的使用，实现类似QQ好友列表，这里有ExpandableListView的详细介绍。最后就是两个item文件：

group_item.xml

[java] view plaincopyprint?
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="horizontal" >  
  
    <View  
        android:layout_width="20dp"  
        android:layout_height="20dp"  
        android:layout_marginTop="22dp"  
        android:background="@drawable/circle" />  
  
    <TextView  
        android:id="@+id/gi_date"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:paddingBottom="16dp"  
        android:paddingLeft="12dp"  
        android:paddingTop="18dp"  
        android:text="11月24号"  
        android:textSize="22sp" />  
  
</LinearLayout>  

child_item.xml:

[java] view plaincopyprint?
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical" >  
  
    <TextView  
        android:id="@+id/ci_thing"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:paddingLeft="22dp"  
        android:paddingTop="8dp"  
        android:text="11月24号"  
        android:textColor="#999999"  
        android:textSize="16sp" />  
  
</LinearLayout>  

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

circle.xml

[java] view plaincopyprint?
<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="oval" >  
  
    <corners android:radius="10dp" />  
  
    <size  
        android:height="10dp"  
        android:width="10dp" />  
  
    <solid android:color="#FF6A6A" />  
  
</shape>  

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

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

0 0