Android实现时间轴

昨天群里有讨论时间轴的项目,没有接触过,以为很吊,研究之后才知道表面都是忽悠人的,使用listview就能实现了,也没有什么新鲜的东西

废话少说,直接上图

图片和文字都可以私人订制

没什么好说的,直接上代码吧!相信你能看懂

1.时间轴item的布局文件

<?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:orientation="vertical" >

    <LinearLayout
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <View
            android:layout_width="1dp"
            android:layout_height="25dp"
            android:layout_marginLeft="60dp"
            android:background="#A6A6A6" />

        <ImageView
            android:id="@+id/left_imageview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:src="@drawable/medicalcheck2" />

        <View
            android:layout_width="1dp"
            android:layout_height="25dp"
            android:layout_marginLeft="60dp"
            android:background="#A6A6A6" />
    </LinearLayout>

    <LinearLayout
        android:layout_alignLeft="@id/left"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_marginLeft="100dp">

        <TextView
            android:id="@+id/right_textview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="aaa"/>
    </LinearLayout>

</RelativeLayout>

2.图片和文字的model

package com.sdufe.thea.guo.model;

public class TimeLineModel {

	private int imageview;
	private String text;

	public int getImageview() {
		return imageview;
	}

	public void setImageview(int imageview) {
		this.imageview = imageview;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public TimeLineModel(int imageview, String text) {
		super();
		this.imageview = imageview;
		this.text = text;
	}

}

3时间轴的适配器

package com.sdufe.thea.guo.adapter;

import java.util.List;

import com.sdufe.thea.guo.R;
import com.sdufe.thea.guo.model.TimeLineModel;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class TimeLineAdapter extends BaseAdapter {

	Context context;
	List<TimeLineModel> list;

	public TimeLineAdapter(Context context, List<TimeLineModel> list) {
		super();
		this.context = context;
		this.list = list;
	}

	@Override
	public int getCount() {
		if (list!=null) {
			return list.size();
		}
		return 0;
	}

	@Override
	public Object getItem(int position) {
		if (list!=null) {
			return list.get(position);
		}
		return null;
	}

	@Override
	public long getItemId(int position) {
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ViewHold hold;
		if (convertView==null) {
			hold=new ViewHold();
			convertView=LayoutInflater.from(context).inflate(R.layout.timeline_item, null);
			convertView.setTag(hold);
		}else {
			hold=(ViewHold) convertView.getTag();
		}
		hold.imageView=(ImageView) convertView.findViewById(R.id.left_imageview);
		hold.show=(TextView) convertView.findViewById(R.id.right_textview);

		hold.imageView.setImageResource(list.get(position).getImageview());
		hold.show.setText(list.get(position).getText());
		return convertView;
	}

	static class ViewHold{
		public TextView show;
		public ImageView imageView;
	}

}

布局中的文件都跟listview的使用一样,也贴一下代码吧,方便你我他

package com.sdufe.thea.guo;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.Window;
import android.widget.ListView;

import com.sdufe.thea.guo.adapter.TimeLineAdapter;
import com.sdufe.thea.guo.model.TimeLineModel;

public class MainActivity extends Activity {

	private ListView listView;
	private List<TimeLineModel> list;
	private TimeLineAdapter adapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);

		initData();
		initView();

	}

	private void initView() {
		listView=(ListView) findViewById(R.id.listview);
		adapter=new TimeLineAdapter(this, list);

		listView.setAdapter(adapter);
	}

	private void initData() {
		list=new ArrayList<TimeLineModel>();

		list.add(new TimeLineModel(R.drawable.medicalcheck2, "哈哈"));
		list.add(new TimeLineModel(R.drawable.nurse_visit2, "呵呵"));
		list.add(new TimeLineModel(R.drawable.nursingcareplan2, "嘿嘿"));
		list.add(new TimeLineModel(R.drawable.medicalcheck2, "哈哈"));
		list.add(new TimeLineModel(R.drawable.nurse_visit2, "啦啦"));
		list.add(new TimeLineModel(R.drawable.nursingcareplan2, "咳咳"));
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

ok,代码上完了,不要被很多app的外表唬住

代码下载地址:http://download.csdn.net/detail/elinavampire/8179393

github下载地址:https://github.com/zimoguo/TimeLineDemo

时间: 2024-10-10 17:08:58

Android实现时间轴的相关文章

android 简易时间轴(实质是ListView)

ListView的应用 1.在很多时候是要用到时间轴的,有些处理的时间轴比较复杂,这里就给出一个比较简单的时间轴,其实就是ListView里面的Item的设计. 直接上代码: ListView,item的xml文件-->time_item.xml 1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.andro

Android 类似时间轴的实现

想要实现图片中的的时间轴的效果,设定了三种颜色,但是出来的只有一个黑色,还不是设定好的,而且长度很长的话不能滚动,下面上代码: 布局文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android

Android 时间轴

效果图: 数据是随便填的,显得有点乱,但是不影响效果.实现方面主要是用ListView来实现,主要是根据ListView的item位置与上一条数据进行比较,来控制时间的显示隐藏效果.思路很简单,下面看代码实现: 首先是页面的整体布局,很简单,就一个ListView: res/layout/activity_main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and

android项目之时间轴(转载)

转载自:http://blog.csdn.net/caiwenfeng_for_23/article/details/38279317 最近开发的app中要用到时间轴这东西,需要实现的效果如下: 想想这个东西应该可以用listview实现吧.然后最近就模拟着去写了: 首先写  listview的item的布局: listview_item.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLay

Android自定义View实现垂直时间轴布局

时间轴 时间轴,顾名思义就是将发生的事件按照时间顺序罗列起来,给用户带来一种更加直观的体验.京东和淘宝的物流顺序就是一个时间轴,想必大家都不陌生,如下图: 分析 实现这个最常用的一个方法就是用ListView,我这里用继承LinearLayout的方式来实现.首先定义了一些自定义属性: attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-stylea

Android时间轴效果,直接使用在你的项目中

近期开发app搞到历史查询,受腾讯qq的启示,搞一个具有时间轴效果的ui,看上去还能够,然后立即想到分享给小伙伴,,大家一起来看看,先上效果图吧 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" > 接下来就是代码了,axtivity的布局代码.非常easy.就是一个listview <?xml v

使用ExpandableListView时间轴效果达到

不废话,首先在地图上,查看结果 这是用ExpandableListView来实现时间轴效果,原理比較简单,以月份为第一级,以天为第二级来实现的. package com.hj.main; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.uti

listView实现时间轴

遇到一需求做一个时间轴左边是时间,右边是内容,中间就是那个轴的图片, ?1.中间轴线的图片需要根据内容的多少被拉长: ?2.顶部的圆点图片的位置不能左右边内容的顶部: ?3.底部不要轴线以圆点ImageView结束: 分析: 问题?1:设置图片parent的parent为wrap_content,设置android:minHeight="100dp",设置parent为match_parent;设置轴线ImageView为match_parent 问题?2:在轴线ImageView上面

使用ExpandableListView实现时间轴效果

不废话,先上图,看看效果 这是用ExpandableListView来实现时间轴效果,原理比较简单,以月份为第一级,以天为第二级来实现的. package com.hj.main; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.util.L