首页 > 代码库 > Android 时间轴

Android 时间轴

  最近开发的app中要用到时间轴这东西,需要实现的效果如下:

技术分享

想想这个东西应该可以用listview实现吧。然后最近就模拟着去写了:

首先写  listview的item的布局: 

listview_item.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#ffffff"    android:orientation="vertical"    android:paddingRight="20dp" >    <View        android:id="@+id/view_0"        android:layout_width="1dp"        android:layout_height="25dp"        android:layout_below="@+id/layout_1"        android:layout_marginLeft="71dp"        android:background="#A6A6A6" />    <View        android:id="@+id/view_1"        android:layout_width="1dp"        android:layout_height="25dp"        android:layout_below="@+id/layout_2"        android:layout_marginLeft="71dp"        android:background="#A6A6A6" />    <TextView        android:id="@+id/show_time"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/view_1"        android:layout_marginLeft="30dp"        android:text="测试数据"        android:textSize="12dp" />    <ImageView        android:id="@+id/image"        android:layout_width="15dp"        android:layout_height="15dp"        android:layout_below="@+id/view_1"        android:layout_marginLeft="65dp"        android:src="@drawable/timeline_green" />    <View        android:id="@+id/view_2"        android:layout_width="1dp"        android:layout_height="100dp"        android:layout_below="@+id/image"        android:layout_marginLeft="71dp"        android:background="#A6A6A6" />    <RelativeLayout        android:id="@+id/relative"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_below="@+id/image"        android:layout_marginTop="-20dp"        android:layout_toRightOf="@+id/image"        android:background="@drawable/timeline_content"        android:padding="10dp" >        <ImageView            android:id="@+id/image_1"            android:layout_width="60dp"            android:layout_height="60dp"            android:layout_alignParentLeft="true"            android:layout_centerVertical="true"            android:layout_marginLeft="5dp"            android:src="@drawable/bg_green_circle_smic" />        <TextView            android:id="@+id/title"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            android:ellipsize="end"            android:maxEms="7"            android:paddingLeft="5dp"            android:singleLine="true"            android:text="测试数据"            android:textSize="12sp" />    </RelativeLayout></RelativeLayout>

接下来就是写listview的adapter了:

TimelineAdapter.java

package com.example.timelinetext.test;import java.util.List;import java.util.Map;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.TextView;public class TimelineAdapter extends BaseAdapter {    private Context context;    private List<Map<String, Object>> list;    private LayoutInflater inflater;    public TimelineAdapter(Context context, List<Map<String, Object>> list) {        super();        this.context = context;        this.list = list;    }    @Override    public int getCount() {        return list.size();    }    @Override    public Object getItem(int position) {        return position;    }    @Override    public long getItemId(int position) {        return position;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        ViewHolder viewHolder = null;        if (convertView == null) {            inflater = LayoutInflater.from(parent.getContext());            convertView = inflater.inflate(R.layout.listview_item, null);            viewHolder = new ViewHolder();            viewHolder.title = (TextView) convertView.findViewById(R.id.title);            convertView.setTag(viewHolder);        } else {            viewHolder = (ViewHolder) convertView.getTag();        }                String titleStr = list.get(position).get("title").toString();                    viewHolder.title.setText(titleStr);        return convertView;    }    static class ViewHolder {        public TextView year;        public TextView month;        public TextView title;    }}

 

运行效果如图:


技术分享


所以模拟着去写一个时间轴,并不是什么复杂的事情,不要被UI设计的图片吓到,其实他就是一个普通的listview而已。

代码:这里

 

Android 时间轴