首页 > 移动平台 > 详细

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

时间:2018-02-25 21:05:11      阅读:300      评论:0      收藏:0      [点我收藏+]

近期开发app搞到历史查询,受腾讯qq的启示,搞一个具有时间轴效果的ui,看上去还能够,然后立即想到分享给小伙伴,,大家一起来看看,先上效果图吧

技术分享图片

接下来就是代码了,axtivity的布局代码。非常easy。就是一个listview

<?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:orientation="vertical" > <ListView android:id="@+id/listview" android:layout_width="fill_parent" android:layout_height="wrap_content"/> </LinearLayout>


以下就是activity.java这个了
package com.agbc.activity;

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







import java.util.Map;

import com.agbc.adapter.TimelineAdapter;
import com.agbc.listview.XListView;
import com.example.agbc.R;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.ViewInject;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.widget.ListView;
/**
 * 历史时间轴
 * @author twj
 *
 */
public class HistoryTaskActivity extends FragmentActivity{
	private XListView listView;
	List<String> data ;
	private TimelineAdapter timelineAdapter;
	@Override
	protected void onCreate(Bundle arg0) {
		super.onCreate(arg0);
		setContentView(R.layout.activity_timeline);
		findViewById();
		listView.setDividerHeight(0);
		timelineAdapter=new TimelineAdapter(getDate(), this);
		listView.setAdapter(timelineAdapter);
	}
	
	private List<Map<String, Object>> getDate() {
		List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();

		Map<String, Object> map = new HashMap<String, Object>();
		map.put("year", "2014");
		map.put("month", "03/15");
		map.put("title", "这是第1行測试数据");
		list.add(map);

		map = new HashMap<String, Object>();
		map.put("year", "2014");
		map.put("month", "12/1");
		map.put("title", "这是第2行測试数据");
		list.add(map);

		map = new HashMap<String, Object>();
		map.put("year", "2013");
		map.put("month", "11/15");
		map.put("title", "这是第3行測试数据");
		list.add(map);

		map = new HashMap<String, Object>();
		map.put("year", "1998");
		map.put("month", "01/1");
		map.put("title", "这是第4行測试数据");
		list.add(map);
		return list;
	}

	private void findViewById() {
		listView=(XListView) findViewById(R.id.listview);	
		
	}

}

接下来就是适配器了。适配器事实上也简单
package com.example.timelinetext.test;

import java.util.List;
import java.util.Map;

import android.content.Context;
import android.util.Log;
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;
			inflater = LayoutInflater.from(parent.getContext());
			convertView = inflater.inflate(R.layout.adapter_timeline, null);
			viewHolder = new ViewHolder();
			viewHolder.year = (TextView) convertView.findViewById(R.id.year);
			viewHolder.month = (TextView) convertView.findViewById(R.id.month);
			viewHolder.title = (TextView) convertView.findViewById(R.id.title);
		
		
		String yearStr = list.get(position).get("year").toString();
		String monthStr = list.get(position).get("month").toString();
		String titleStr = list.get(position).get("title").toString();
	
		
		viewHolder.year.setText( yearStr);
		viewHolder.month.setText(monthStr);
		viewHolder.title.setText(titleStr);

		return convertView;
	}

	static class ViewHolder {
		public TextView year;
		public TextView month;
		public TextView title;
	}
}

最后就是适配器布局代码了,事实上效果就是在这里提现出来的
<?

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" > <RelativeLayout android:id="@+id/layout_1" android:layout_width="60dp" android:layout_height="25dp" android:layout_marginLeft="43dp" android:background="@android:color/black" android:gravity="center" > <TextView android:id="@+id/month" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="測试数据" android:textColor="#FFFFFF" android:textSize="12sp" /> </RelativeLayout> <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" /> <RelativeLayout android:id="@+id/layout_2" android:layout_width="60dp" android:layout_height="25dp" android:layout_below="@+id/view_0" android:layout_marginLeft="43dp" android:background="@android:color/black" android:gravity="center" > <TextView android:id="@+id/year" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="測试数据" android:textColor="#FFFFFF" android:textSize="12sp" /> </RelativeLayout> <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_toRightOf="@+id/image_1" android:ellipsize="end" android:singleLine="true" android:maxEms="7" android:paddingLeft="5dp" android:text="測试数据" android:textSize="12sp" /> <ImageView android:id="@+id/personal_circle" android:layout_width="15dp" android:layout_height="15dp" android:layout_toRightOf="@+id/title" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/text_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/image_1" android:paddingLeft="5dp" android:paddingTop="20dp" android:text="測试数据" android:textSize="12sp" /> <TextView android:id="@+id/text_3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/text_2" android:ellipsize="end" android:singleLine="true" android:paddingTop="20dp" android:text="測试数据" android:textSize="12sp" /> <TextView android:id="@+id/text_4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/image_1" android:paddingLeft="5dp" android:paddingTop="40dp" android:text="測试数据" android:textSize="12sp" /> <TextView android:id="@+id/text_5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/text_4" android:ellipsize="end" android:singleLine="true" android:paddingTop="40dp" android:text="測试数据" android:textSize="12sp" /> <TextView android:id="@+id/text_6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/image_1" android:paddingLeft="5dp" android:paddingTop="60dp" android:text="測试数据" android:textSize="12sp" /> <TextView android:id="@+id/text_7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignRight="@+id/text_3" android:layout_alignTop="@+id/title" android:layout_toRightOf="@+id/text_6" android:ellipsize="end" android:singleLine="true" android:paddingTop="60dp" android:text="測试数据" android:textSize="12sp" /> </RelativeLayout> </RelativeLayout>

好吧!时间轴事实上原理非常easy的。就是几个控件。调调位置而已,只是在实际开发中可能要对时间轴上面的控件进行操作,这就是关于事件分发的机制了,哎,事实上都是写烂的代码了。好了。这个天我要去研究tcp/ip通信了。

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

原文:https://www.cnblogs.com/llguanli/p/8470522.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!