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 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章