竖直时间轴之左右交叉布局

来源：互联网发布：黑暗风格数据地图编辑：程序博客网时间：2024/06/02 04:57

最近学习了时间轴的用法，用到了一个左右交叉布局，其间有些东西我觉得可以跟大家分享一下，还是那句话：我是小菜鸟，大家多多指教。

先给大家看下效果图，至于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>

同样的，右边布局的代码right_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_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;}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn infoList.size();}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}/** * 注意这个方法最重要 *  */@Overridepublic 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());}// 返回填充好了的convertViewreturn 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;}}

下面是MainActivity源码

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);            }    @Overridepublic void onItemClick(AdapterView<?> parent, View view, int position,long id) {// TODO Auto-generated method stubToast.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{}

如果注释掉将会出现以下异常

好了，分享到此为止，鉴于我也是菜鸟一枚，大家可以相互学习和探讨，后面将给出去源码链接。

这种布局情况在手机上可能不多见，但是在比较大的屏幕上有可能用到，最近我自己在做的项目就用到了这个。

源码下载

0 0