首页 > 代码库 > android项目之时间轴(转载)

android项目之时间轴(转载)

2024-08-04 11:00:59   226人阅读

转载自：http://blog.csdn.net/caiwenfeng_for_23/article/details/38279317

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

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

首先写  listview的item的布局: 

listview_item.xml

 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="#ffffff"  
  6.     android:orientation="vertical"  
  7.     android:paddingRight="20dp" >  
  8.   
  9.   
  10.     <View  
  11.         android:id="@+id/view_0"  
  12.         android:layout_width="1dp"  
  13.         android:layout_height="25dp"  
  14.         android:layout_below="@+id/layout_1"  
  15.         android:layout_marginLeft="71dp"  
  16.         android:background="#A6A6A6" />  
  17.   
  18.     <View  
  19.         android:id="@+id/view_1"  
  20.         android:layout_width="1dp"  
  21.         android:layout_height="25dp"  
  22.         android:layout_below="@+id/layout_2"  
  23.         android:layout_marginLeft="71dp"  
  24.         android:background="#A6A6A6" />  
  25.   
  26.     <TextView  
  27.         android:id="@+id/show_time"  
  28.         android:layout_width="wrap_content"  
  29.         android:layout_height="wrap_content"  
  30.         android:layout_below="@+id/view_1"  
  31.         android:layout_marginLeft="30dp"  
  32.         android:text="测试数据"  
  33.         android:textSize="12dp" />  
  34.   
  35.     <ImageView  
  36.         android:id="@+id/image"  
  37.         android:layout_width="15dp"  
  38.         android:layout_height="15dp"  
  39.         android:layout_below="@+id/view_1"  
  40.         android:layout_marginLeft="65dp"  
  41.         android:src=http://www.mamicode.com/"@drawable/timeline_green" />  
  42.   
  43.     <View  
  44.         android:id="@+id/view_2"  
  45.         android:layout_width="1dp"  
  46.         android:layout_height="100dp"  
  47.         android:layout_below="@+id/image"  
  48.         android:layout_marginLeft="71dp"  
  49.         android:background="#A6A6A6" />  
  50.   
  51.     <RelativeLayout  
  52.         android:id="@+id/relative"  
  53.         android:layout_width="fill_parent"  
  54.         android:layout_height="wrap_content"  
  55.         android:layout_below="@+id/image"  
  56.         android:layout_marginTop="-20dp"  
  57.         android:layout_toRightOf="@+id/image"  
  58.         android:background="@drawable/timeline_content"  
  59.         android:padding="10dp" >  
  60.   
  61.         <ImageView  
  62.             android:id="@+id/image_1"  
  63.             android:layout_width="60dp"  
  64.             android:layout_height="60dp"  
  65.             android:layout_alignParentLeft="true"  
  66.             android:layout_centerVertical="true"  
  67.             android:layout_marginLeft="5dp"  
  68.             android:src=http://www.mamicode.com/"@drawable/bg_green_circle_smic" />  
  69.   
  70.         <TextView  
  71.             android:id="@+id/title"  
  72.             android:layout_width="wrap_content"  
  73.             android:layout_height="wrap_content"  
  74.             android:layout_centerHorizontal="true"  
  75.             android:layout_centerVertical="true"  
  76.             android:ellipsize="end"  
  77.             android:maxEms="7"  
  78.             android:paddingLeft="5dp"  
  79.             android:singleLine="true"  
  80.             android:text="测试数据"  
  81.             android:textSize="12sp" />  
  82.   
  83.     </RelativeLayout>  
  84.   
  85. </RelativeLayout>  


接下来就是写listview的adapter了：

 

TimelineAdapter.java

 
  1. package com.example.timelinetext.test;  
  2.   
  3. import java.util.List;  
  4. import java.util.Map;  
  5.   
  6. import android.content.Context;  
  7. import android.view.LayoutInflater;  
  8. import android.view.View;  
  9. import android.view.ViewGroup;  
  10. import android.widget.BaseAdapter;  
  11. import android.widget.TextView;  
  12.   
  13. public class TimelineAdapter extends BaseAdapter {  
  14.   
  15.     private Context context;  
  16.     private List<Map<String, Object>> list;  
  17.     private LayoutInflater inflater;  
  18.   
  19.     public TimelineAdapter(Context context, List<Map<String, Object>> list) {  
  20.         super();  
  21.         this.context = context;  
  22.         this.list = list;  
  23.     }  
  24.   
  25.     @Override  
  26.     public int getCount() {  
  27.   
  28.         return list.size();  
  29.     }  
  30.   
  31.     @Override  
  32.     public Object getItem(int position) {  
  33.         return position;  
  34.     }  
  35.   
  36.     @Override  
  37.     public long getItemId(int position) {  
  38.         return position;  
  39.     }  
  40.   
  41.     @Override  
  42.     public View getView(int position, View convertView, ViewGroup parent) {  
  43.         ViewHolder viewHolder = null;  
  44.         if (convertView == null) {  
  45.             inflater = LayoutInflater.from(parent.getContext());  
  46.             convertView = inflater.inflate(R.layout.listview_item, null);  
  47.             viewHolder = new ViewHolder();  
  48.   
  49.             viewHolder.title = (TextView) convertView.findViewById(R.id.title);  
  50.             convertView.setTag(viewHolder);  
  51.         } else {  
  52.             viewHolder = (ViewHolder) convertView.getTag();  
  53.         }  
  54.           
  55.         String titleStr = list.get(position).get("title").toString();  
  56.           
  57.       
  58.         viewHolder.title.setText(titleStr);  
  59.   
  60.         return convertView;  
  61.     }  
  62.   
  63.     static class ViewHolder {  
  64.         public TextView year;  
  65.         public TextView month;  
  66.         public TextView title;  
  67.     }  
  68. }  



 

最后使用：

MainActivity.java

 

  1. package com.example.timelinetext.test;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.HashMap;  
  5. import java.util.List;  
  6. import java.util.Map;  
  7.   
  8. import android.app.Activity;  
  9. import android.os.Bundle;  
  10. import android.widget.ListView;  
  11.   
  12. public class MainActivity extends Activity {  
  13.   
  14.     private ListView listView;  
  15.     List<String> data ;  
  16.     private TimelineAdapter timelineAdapter;  
  17.   
  18.     @Override  
  19.     protected void onCreate(Bundle savedInstanceState) {  
  20.         super.onCreate(savedInstanceState);  
  21.         setContentView(R.layout.activity_listview);  
  22.   
  23.         listView = (ListView) this.findViewById(R.id.listview);  
  24.         listView.setDividerHeight(0);  
  25.         timelineAdapter = new TimelineAdapter(this, getData());  
  26.         listView.setAdapter(timelineAdapter);  
  27.   
  28.     }  
  29.   
  30.     private List<Map<String, Object>> getData() {  
  31.         List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();  
  32.   
  33.         Map<String, Object> map = new HashMap<String, Object>();  
  34.         map.put("title", "这是第1行测试数据");  
  35.         list.add(map);  
  36.   
  37.         map = new HashMap<String, Object>();  
  38.         map.put("title", "这是第2行测试数据");  
  39.         list.add(map);  
  40.   
  41.         map = new HashMap<String, Object>();  
  42.         map.put("title", "这是第3行测试数据");  
  43.         list.add(map);  
  44.   
  45.         map = new HashMap<String, Object>();  
  46.         map.put("title", "这是第4行测试数据");  
  47.         list.add(map);  
  48.         return list;  
  49.     }  
  50.   
  51. }  


运行效果如图：

 

 

 

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

android项目之时间轴(转载)


联系
我们