自定义android时间轴控件

其实没什么技术难点,采用原生的ListView实现,重点反而在layout布局上(RelativeLayout真是强大)。

先来展示一下最终效果


  • 时间轴见图
    时间轴见图

最简实现

第一步,准备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"/>


<!--圆形背景图,xml实现-->
<RelativeLayout
android:id="@+id/line_circle"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@drawable/circle"
android:layout_centerInParent="true">

<!--可代码控制显示不同的icon-->
<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){
// 参数加入par,让item view保持原有的高度
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);

// 一个android icon库,强烈推荐 github地址: https://github.com/mikepenz/Android-Iconics
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跳转到详情页等等

文章目录
  1. 1. 最简实现
    1. 1.1. 第一步,准备layout文件
    2. 1.2. 第二步:准备listview的Adapter,新建一个TimeLineAdapter,继承BaseAdapter,给出部分关键代码
    3. 1.3. 最后一步:创建TimeActiviy文件,将TimeLineAdapter Set到ListView上
  2. 2. 扩展
,