最近开发的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而已。
源码下载
分享到:
相关推荐
项目解剖大庆战略数据库项目.doc
35_Intent深入解剖.avi 所在项目:Intent 36_Activity生命周期.avi 所在项目:ActivityLife 37_采用广播接收者实现短信窃听器.avi 所在项目:SMSListener & Web端应用:web 38_采用广播接收者拦截外拔电话与其特性....
android系统基础知识点总结,适合于面试和笔试的朋友们
企业管理项目解剖框架.doc
项目解剖框架DOC致力于为大家提供学习、参考最实用的资源,对项目解剖框架DOC有需要的朋友,赶快来下载吧...该文档为项目解剖框架DOC,是一份很不错的参考资料,具有较高参考价值,感兴趣的可以下载看看
04_开发与运行(卸载)第一个ANDROID应用.avi 所在项目:Hello 06_电话拔号器.avi 所在项目:phone 08_短信发送器.avi 所在项目:sms 09_深入了解各种布局技术.avi 所在项目:sms & FrameLayout 10_对应用进行单元...
111
解剖ini文件.zip易语言项目例子源码下载解剖ini文件.zip易语言项目例子源码下载 1.合个人学习技术做项目参考 2.适合学生做毕业设计参考 3.适合小团队开发项目参考
全面解剖RocketMQ和项目实战 通过这些视频可以掌握到rocketmq在实际开发中如何运用举一反三 视频中包含项目实战可以更实际的掌握mq 由于视频内容过大 分享百度云
我们收集的数据是按照时间轴排序的,它们的出现顺序包含很多隐藏的模式和信息。如果改变顺序,则将彻底改变数据的含义。序列数据的广义概念是指任意序列形式的数据,包括时间序列数据。我们的目标是构建一个模型,该...
易语言源码解剖ini文件.rar 易语言源码解剖ini文件.rar 易语言源码解剖ini文件.rar 易语言源码解剖ini文件.rar 易语言源码解剖ini文件.rar 易语言源码解剖ini文件.rar
C语言深度解剖C语言深度解剖C语言深度解剖C语言深度解剖
《C语言深度解剖》由作者结合自身多年嵌入式c语言开发经验和平时讲解C语言的心得体会整理而成,其中有很多作者独特的见解或看法。由于并不是从头到尾讲解C语言的基础知识,所以《C语言深度解剖:解开程序员面试笔试...
JakeWharton的酷炫实用的解剖刀Scalpe,可以查看界面布局层次三维效果. JakeWharton的项目scalpe因为不知道是什么原因总是编译失败,我就新建立了一个工程,将源码拷贝进来,修改了Gradle版本和依赖的版本 . 链接 ...
系统解剖学习题及答案.pdf系统解剖学习题及答案.pdf系统解剖学习题及答案.pdf系统解剖学习题及答案.pdf系统解剖学习题及答案.pdf系统解剖学习题及答案.pdf
PetShop是一个小型的项目,系统架构与代码都比较简单,却也凸现了许多颇有价值的设计与开发理念。本系列试图对PetShop作一个全方位的解剖,依据的代码是PetShop4.0,可以从链接...
腧穴解剖学填空题.doc
解剖.class文件 能将java文件编译出来的class文件还原成原来的java文件 很好用