最近学习了时间轴的用法，用到了一个左右交叉布局，其间有些东西我觉得可以跟大家分享一下，还是那句话：我是小菜鸟，大家多多指教。
先给大家看下效果图，至于GIF动画，目前还在学习中，后期希望能上传GIF动画，这是正在做的项目中抽取出来的一部分
该时间轴参考了网上很流行的ListView控件制作的，每一行都加载相同的Item布局文件，将divider的高度设置为0，就可以达到效果了。
下面看代码，我喜欢从布局文件开始。
首先是main.xml布局，这个布局没什么好讲的，主要是一个Listview控件，大家可以根据需要添加其他辅助控件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.cjt.timelinedemo.MainActivity" >
<ListView
android:id="@+id/timeLine"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</ListView>
</RelativeLayout>因为是左右交叉的时间轴布局，左右肯定不能复用，所以要创建两个布局文件，分别对应左右的布局视图
如上图，以左侧的时间为区分，分为左右布局，上代码left_list_item.xml
<?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:baselineAligned="false"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="3dp"
android:gravity="center|right"
android:orientation="vertical" >
<TextView
android:id="@+id/left_tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textStyle="bold"
android:text="2016-06-28 17:50" />
</LinearLayout>
<LinearLayout
android:layout_width="20dp"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<!-- 上下各画一根橙色的线条，线宽设置为2dp -->
<View
android:layout_width="2dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FB7F02"/>
<!-- 设置中间的节点大小为20x20 -->
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:src="@drawable/item_center_circle" />
<View
android:layout_width="2dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FB7F02" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="3dp"
android:background="@drawable/right_item_bg"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/left_item_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/left_item_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#fff"
android:text="这里可以放自定义的布局或内容" />
</LinearLayout>
</LinearLayout>
<?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:baselineAligned="false"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="3dp"
android:layout_weight="1"
android:background="@drawable/left_item_bg"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/right_item_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/right_item_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我是右边布局的内容"
android:textColor="#fff" />
</LinearLayout>
<LinearLayout
android:layout_width="20dp"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<!-- 上下各画一根橙色的线条，线宽设置为2dp -->
<View
android:layout_width="2dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FB7F02" />
<!-- 设置中间的节点大小为20x20 -->
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:src="@drawable/item_center_circle" />
<View
android:layout_width="2dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FB7F02" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="3dp"
android:layout_weight="1"
android:gravity="center|left"
android:orientation="vertical" >
<TextView
android:id="@+id/right_tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2016-06-27 14:45"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>左右布局稍稍有些不一样，但是大同小异。好了下面开始讲代码了。核心主要在TimeLineAdapter，也就是这个ListView控件的适配器。注释我已经详细的写在代码中了，所以不做过多的解释。看代码
public class TimeLineAdapter extends BaseAdapter {
/** 上下文环境 **/
private Context mContext;
/**
* 实体类列表 建议最好用实体类，当然也可以用Map之类的来动态添加或生成， 我自己在这里建了一个实体类，配套后面的holder来用
* **/
private List<InfoBean> infoList;
/** 对应要用到的实体类 **/
private InfoBean infoBean;
/** 布局渲染器 **/
private LayoutInflater inflater;
public TimeLineAdapter() {
super();
// TODO Auto-generated constructor stub
}
/**
* 构造函数
*
* @param mContext
* 上下文环境
* @param infoList
* 实体类列表
*/
public TimeLineAdapter(Context mContext, List<InfoBean> infoList) {
super();
this.mContext = mContext;
this.infoList = infoList;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return infoList.size();
}
@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return position;
}
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
/**
* 注意这个方法最重要
*
*/
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
// 如果convertView为空，则加载界面布局文件
inflater = LayoutInflater.from(parent.getContext());
// 如果为空，就重新加载布局文件
if (null == convertView) {
/*
* 由于我这里有两种不同的布局，而且是交叉呈现，所以做如下处理，将position对2求余，
* 如果为0就加载左边布局，为1就加载右边布局
*/
if (position % 2 == 0) {
// 加载左边布局
convertView = inflater.inflate(R.layout.left_list_item, null);
// 创建一个VIewHolder用以缓存
holder = new ViewHolder();
holder.mInfoDate = (TextView) convertView
.findViewById(R.id.left_tv_time);
holder.mInfoContent = (TextView) convertView
.findViewById(R.id.left_item_content);
holder.mInfoIcon = (ImageView) convertView
.findViewById(R.id.left_item_img);
// 这里多了一个变量
holder.isLeftOrRight = true;
// 设置holder标签
convertView.setTag(holder);
} else {
// 加载右边布局
convertView = inflater.inflate(R.layout.right_list_item, null);
// 创建一个VIewHolder用以缓存
holder = new ViewHolder();
holder.mInfoDate = (TextView) convertView
.findViewById(R.id.right_tv_time);
holder.mInfoContent = (TextView) convertView
.findViewById(R.id.right_item_content);
holder.mInfoIcon = (ImageView) convertView
.findViewById(R.id.right_item_img);
// 这里多了一个变量
holder.isLeftOrRight = false;
// 设置holder标签
convertView.setTag(holder);
}
} else {// 如果不为空，就直接从缓存中去取
holder = (ViewHolder)convertView.getTag();//本来直接这样取是没有问题的，但是会发现有重叠的bug
// 所以接下来的处理是为了解决会出现的bug，如果有同学不明白的话，可以进下面的注释掉，然后运行一遍，就会发现问题了
// 如何来解释这个呢？如果一屏幕有三个item，那么holder就将缓存三个item，到第四个的时候，
// 就会将holder中原来缓存的第一个去覆盖第四个，这样就会出现，本来应该是右边出现的布局跑到了左边，还跟下面出现的布局重合的现象
// 建议注释掉之后看效果，这样有点讲不明白
if (0 == position%2 && !holder.isLeftOrRight) {
// 加载左边布局
convertView = inflater.inflate(R.layout.left_list_item, null);
// 创建一个VIewHolder用以缓存
holder = new ViewHolder();
holder.mInfoDate = (TextView) convertView
.findViewById(R.id.left_tv_time);
holder.mInfoContent = (TextView) convertView
.findViewById(R.id.left_item_content);
holder.mInfoIcon = (ImageView) convertView
.findViewById(R.id.left_item_img);
// 这里多了一个变量
holder.isLeftOrRight = true;
// 设置holder标签
convertView.setTag(holder);
}else if(1 == position%2 && holder.isLeftOrRight){
// 加载右边布局
convertView = inflater.inflate(R.layout.right_list_item, null);
// 创建一个VIewHolder用以缓存
holder = new ViewHolder();
holder.mInfoDate = (TextView) convertView
.findViewById(R.id.right_tv_time);
holder.mInfoContent = (TextView) convertView
.findViewById(R.id.right_item_content);
holder.mInfoIcon = (ImageView) convertView
.findViewById(R.id.right_item_img);
// 这里多了一个变量
holder.isLeftOrRight = false;
// 设置holder标签
convertView.setTag(holder);
}else{
}
}
// 在这里给holder中对应的控件填充内容
for (int i = 0; i < infoList.size(); i++) {
// 先遍历列表中的对象，一个个来填充
infoBean = infoList.get(i);
// 下面填充数据
holder.mInfoDate.setText(infoBean.getInfoDate().toString());
holder.mInfoContent.setText(infoBean.getInfoContent().toString());
holder.mInfoIcon.setImageResource(infoBean.getInfoPicResourse());
}
// 返回填充好了的convertView
return convertView;
}
/** 按照流行的写法，用holder来做缓存 **/
public class ViewHolder {
/** 时间 **/
TextView mInfoDate;
/** 内容 **/
TextView mInfoContent;
/** 新闻图标 **/
ImageView mInfoIcon;
/** 左布局还是由布局，为true表示加载左布局,为false表示加载右边布局 **/
boolean isLeftOrRight;
public ViewHolder() {
super();
}
}
}
对应的实体类infoBean
public class InfoBean {
/** 时间 **/
private String infoDate;
/** 内容 **/
private String infoContent;
/** 图片 **/
private int infoPicResourse;
public InfoBean() {
super();
// TODO Auto-generated constructor stub
}
public String getInfoDate() {
return infoDate;
}
public void setInfoDate(String infoDate) {
this.infoDate = infoDate;
}
public String getInfoContent() {
return infoContent;
}
public void setInfoContent(String infoContent) {
this.infoContent = infoContent;
}
public int getInfoPicResourse() {
return infoPicResourse;
}
public void setInfoPicResourse(int infoPicResourse) {
this.infoPicResourse = infoPicResourse;
}
}
public class MainActivity extends Activity implements OnItemClickListener{
/**界面的ListView控件**/
private ListView mTimeList ;
/**时间轴适配器**/
private TimeLineAdapter mAdapter ;
/**对应的实体类的数据列表**/
List<InfoBean> infoList = new ArrayList<InfoBean>();
/**信息实体类**/
InfoBean infoBean ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 获取控件，并为该控件绑定事件监听器
mTimeList = (ListView) this.findViewById(R.id.timeLine);
mTimeList.setOnItemClickListener(this);
// 设置DIvider高度为0
mTimeList.setDividerHeight(0);
// 填充数据，这里也可以用Map来自己造数据，不需要另外在新建实体类
for (int i = 0; i < 30 ; i++) {
infoBean = new InfoBean();
infoBean.setInfoDate("2016-06-28 18:30");
infoBean.setInfoContent("我是内容详情");
infoBean.setInfoPicResourse(R.drawable.ic_launcher);
// 将实体添加到列表中
infoList.add(infoBean);
}
// 设置适配器
mAdapter = new TimeLineAdapter(getApplicationContext(), infoList);
mTimeList.setAdapter(mAdapter);
}
@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "你点击了" + position, 1000).show();
}
}这里有异常的情况可以给大家展示一下，主要是这一句代码在处理异常，
holder = (ViewHolder)convertView.getTag();//本来直接这样取是没有问题的，但是会发现有重叠的bug
// 所以接下来的处理是为了解决会出现的bug，如果有同学不明白的话，可以进下面的注释掉，然后运行一遍，就会发现问题了
// 如何来解释这个呢？如果一屏幕有三个item，那么holder就将缓存三个item，到第四个的时候，
// 就会将holder中原来缓存的第一个去覆盖第四个，这样就会出现，本来应该是右边出现的布局跑到了左边，还跟下面出现的布局重合的现象
// 建议注释掉之后看效果，这样有点讲不明白
if (0 == position%2 && !holder.isLeftOrRight) {
// 加载左边布局
convertView = inflater.inflate(R.layout.left_list_item, null);
// 创建一个VIewHolder用以缓存
holder = new ViewHolder();
holder.mInfoDate = (TextView) convertView
.findViewById(R.id.left_tv_time);
holder.mInfoContent = (TextView) convertView
.findViewById(R.id.left_item_content);
holder.mInfoIcon = (ImageView) convertView
.findViewById(R.id.left_item_img);
// 这里多了一个变量
holder.isLeftOrRight = true;
// 设置holder标签
convertView.setTag(holder);
}else if(1 == position%2 && holder.isLeftOrRight){
// 加载右边布局
convertView = inflater.inflate(R.layout.right_list_item, null);
// 创建一个VIewHolder用以缓存
holder = new ViewHolder();
holder.mInfoDate = (TextView) convertView
.findViewById(R.id.right_tv_time);
holder.mInfoContent = (TextView) convertView
.findViewById(R.id.right_item_content);
holder.mInfoIcon = (ImageView) convertView
.findViewById(R.id.right_item_img);
// 这里多了一个变量
holder.isLeftOrRight = false;
// 设置holder标签
convertView.setTag(holder);
}else{
} 如果注释掉将会出现以下异常
好了，分享到此为止，鉴于我也是菜鸟一枚，大家可以相互学习和探讨，后面将给出去源码链接。
这种布局情况在手机上可能不多见，但是在比较大的屏幕上有可能用到，最近我自己在做的项目就用到了这个。
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
