最简实现
第一步，准备layout文件
首先是timeline_item.layout, 具体样式无妨，只是要保证item在listview中展示时有时间轴效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| <?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="100dp">
<RelativeLayout
android:id="@+id/left_wrap"
android:layout_alignParentLeft="true"
android:layout_marginLeft="30dp"
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<View
android:layout_width="2dp"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:background="#000"/>
<RelativeLayout
android:id="@+id/line_circle"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@drawable/circle"
android:layout_centerInParent="true">
<ImageView
android:id="@+id/line_icon"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
</RelativeLayout>
<TextView
android:id="@+id/line_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我是一条时间信息"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:textSize="20dp"
android:layout_toRightOf="@+id/left_wrap"/>
<TextView
android:id="@+id/line_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2015-12-13"
android:layout_alignLeft="@+id/line_info"
android:layout_below="@+id/line_info"
android:layout_marginTop="10dp"/>
</RelativeLayout>
|
给出drawable/circle.xml文件，实现了一个圆形背景，当然你也可以用图片，或者去掉
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners android:radius="35dp" />
<size
android:height="70dp"
android:width="70dp" />
<gradient
android:startColor="#9933cc"
android:endColor="#aa66cc"
android:angle="90"
/>
<stroke
android:width="1dp"
android:color="#ffff"></stroke>
<padding android:left="5dp"
android:right="5dp"
android:top="5dp"
android:bottom="5dp"/>
</shape>
|
还需要一个activity_time.layout文件存放我们的listview，注意listview的默认divider要去掉，否则会有分割线
1
2
3
4
5
6
7
8
| <ListView
android:id="@+id/time_list"
android:background="@android:color/transparent"
android:layout_width="fill_parent"
android:headerDividersEnabled="false"
android:footerDividersEnabled="false"
android:layout_height="wrap_content"></ListView>
</LinearLayout>
|
如果分割线还在，别担心，我们可以在代码里设置setDivier(null)
第二步：准备listview的Adapter,新建一个TimeLineAdapter,继承BaseAdapter，给出部分关键代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| public class TimeLineAdpater extends BaseAdapter{
private Context mc;
private String[] data = {"开心","快乐","美丽","富有","爱情","啦啦"};
public TimeLineAdpater(Context text){
this.mc = text;
}
......
public View getView(int pos, View view, ViewGroup par){
if(view == null){
View item = LayoutInflater.from(mc).inflate(R.layout.timeline_item,par,false);
TextView text = (TextView)item.findViewById(R.id.line_info);
text.setText(text.getText()+data[pos]);
ImageView image = (ImageView)item.findViewById(R.id.line_icon);
IconicsDrawable icon = new IconicsDrawable(mc)
.icon(GoogleMaterial.Icon.gmd_today)
.color(Color.WHITE);
image.setImageDrawable(icon);
view = item;
}
return view;
}
}
|
最后一步：创建TimeActiviy文件，将TimeLineAdapter Set到ListView上
1
2
3
4
5
6
7
8
9
10
11
| public class TimeActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_time);
ListView list = (ListView) findViewById(R.id.time_list);
list.setDivider(null);
list.setAdapter(new TimeLineAdpater(this));
}
}
|
这样，就可以达到如上图1一样的效果啦。
扩展
1.如上图2，时间轴可以放在中间（类似记账软件），根据奇偶或一定规则，通过LayoutParams调整item的布局或者干脆inflate不同的layout
2.item布局自带一定的点击效果，可以自己调整，比如点击小图标或某一个item跳转到详情页等等
