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; } }
最后使用:
MainActivity.java
package com.example.timelinetext.test; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.os.Bundle; import android.widget.ListView; 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", "这是第1行測试数据"); list.add(map); map = new HashMap<String, Object>(); map.put("title", "这是第2行測试数据"); list.add(map); map = new HashMap<String, Object>(); map.put("title", "这是第3行測试数据"); list.add(map); map = new HashMap<String, Object>(); map.put("title", "这是第4行測试数据"); list.add(map); return list; } }
执行效果如图:
所以模拟着去写一个时间轴。并非什么复杂的事情,不要被UI设计的图片吓到,事实上他就是一个普通的listview而已。