Android自定义简单时间轴的实现

时间轴,顾名思义就是将发生的事件按照时间顺序罗列起来,给用户带来一种更加直观的体验。物流顺序就是一个时间轴

其实,整个时间轴还是可以当做一个ListView处理,只是在Adapter中的布局要花点心思。好了,废话不说,看代码。
1、整个效果就是一个ListView,ListView的每个条目的布局如下

<?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" >

<ListView 
      android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/listview"
    android:cacheColorHint="@null"
    android:divider="@null"
    ></ListView>
</LinearLayout>

2、TimelineAdapter 的代码如下:


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); 
            viewHolder.show_time = (TextView) convertView.findViewById(R.id.show_time); 
            viewHolder.image=(ImageView) convertView.findViewById(R.id.image); 
            viewHolder.view_1= convertView.findViewById(R.id.view_1); 

            convertView.setTag(viewHolder);  
        } else {  
            viewHolder = (ViewHolder) convertView.getTag();  
        }  

        String titleStr = list.get(position).get("title").toString();  
        String timeStr = list.get(position).get("show_time").toString();  

        viewHolder.title.setText(titleStr);  
        viewHolder.show_time.setText(timeStr);
if (position==0) {
    viewHolder.view_1.setVisibility(View.GONE);
}

        return convertView;  
    }  

    static class ViewHolder {  
        public TextView year;  
        public TextView month;  
        public ImageView image;
        public TextView title; 
        View view_2;
        View view_1;

        public  TextView show_time;
    }  
}

3、listview_item的布局如下:

<?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="#000000"  
    android:orientation="vertical"  
    android:paddingRight="20dp" >  

    <View  
        android:id="@+id/view_1"  
        android:layout_width="1dp"  
        android:layout_height="20dp"  
        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="06:00"  
        android:textColor="#ffffff"
        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/callmsgsafe" />  

    <View  
        android:id="@+id/view_2"  
        android:layout_width="1dp"  
        android:layout_height="90dp"  
        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="80dp"  
        android:layout_below="@+id/image"  
        android:layout_marginTop="-10dp"  
        android:layout_toRightOf="@+id/image"  
        android:background="@drawable/reg_shape"
        android:layout_marginLeft="10dp" >  


        <TextView  
            android:id="@+id/title"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
         android:layout_centerVertical="true"
            android:paddingLeft="5dp"  
            android:textStyle="bold"
            android:text="19:00"  
            android:textSize="12sp" />  

    </RelativeLayout>  

</RelativeLayout>  

4、MainActivity实现代码:


public class MainActivity extends Activity {  

    private ListView listView;  
    List<String> data ;  
    private TimelineAdapter timelineAdapter;  

    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_listview);  
        listView = (ListView) this.findViewById(R.id.listview);  
        listView.setDividerHeight(0);  
        timelineAdapter = new TimelineAdapter(this, getData());  
        listView.setAdapter(timelineAdapter);  

    }  

    private List<Map<String, Object>> getData() {  
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();  

        Map<String, Object> map = new HashMap<String, Object>();  
        map.put("title", "时间轴");  
        map.put("show_time", "08:30");  
        list.add(map);  

        map = new HashMap<String, Object>();  
        map.put("title", "时间轴");  
        map.put("show_time", "09:30");  
        list.add(map);  

        map = new HashMap<String, Object>();  
        map.put("title", "时间轴");  
        map.put("show_time", "14:30");  
        list.add(map); 

        map = new HashMap<String, Object>();  
        map.put("title", "时间轴");  
        map.put("show_time", "20:45");  
        list.add(map); 

        map = new HashMap<String, Object>();  
        map.put("title", "时间轴");  
        map.put("show_time", "23:00");  
        list.add(map); 

        map = new HashMap<String, Object>();  
        map.put("title", "时间轴");  
        map.put("show_time", "00:30");  
        list.add(map); 
        return list;  
    }  

} 

实现效果如下图
这里写图片描述

发布了81 篇原创文章 · 获赞 21 · 访问量 7万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览