文档章节

android项目解刨之时间轴

蜀山下的鱼
 蜀山下的鱼
发布于 2015/04/29 00:39
字数 660
阅读 140
收藏 2

    最近开发的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而已。



源码下载


本文转载自:http://blog.csdn.net/caiwenfeng_for_23/article/details/38279317

蜀山下的鱼
粉丝 9
博文 405
码字总数 0
作品 0
广州
高级程序员
私信 提问
加载中

评论(1)

v
viviisweiyi
大神能给讲解下View这个控件吗?
android项目解刨之时间轴

http://blog.csdn.net/caiwenfengfor23/article/details/38279317 http://www.apkbus.com/android-163766-1-1.html...

当空皓月
2014/10/08
95
0
Cocos2dx游戏开发系列笔记1:一个崭新的开始,cocos2dx2.2+ndkr9+Cygwin

Android开发者做cocos2dx最大的绊脚石,不是c++,而是环境的搭建... 骨头也是费了半天劲才终于在真机上看到了那个类似猕猴桃的头,这里简单记录一下。 环境:(算比较新了2013.11.17) coco...

懒骨头
2013/12/09
390
0
Cocos2dx游戏开发系列笔记9:android手机上运行《战神传说》,并解决横竖屏即分辨率自适应

上节说到cygwin下成功编译出so文件,下面我们要把游戏运行在android上。 开始干活! 其实步骤可以参考 Cocos2dx游戏开发系列笔记6:怎样让《萝莉快跑》的例子运行在vs和手机上 1 用eclipse打...

懒骨头
2013/12/09
285
0
Pendo 笔记:写任何想法和计划的「时间轴」清奇笔记本

前言 待办清单和便签记事本类应用很多,除了功能和 UI 上的区别,模式大多类似,无外乎卡片或列表式。 Pendo 则别出心裁地采用了一种 「时间流」 的记录方法。 通过时间轴的模式将待办清单、...

己立
2018/07/18
0
0
Chrome 和 Windows 10 时间轴即将互相同步

微软刚刚宣布了一项 Chrome 扩展,使 Windows 用户可以在 Google 浏览器中访问 Windows 10 时间轴历史记录。 在此之前,该功能仅支持 Microsoft Edge 。如果用户想在两种浏览器之间进行同步,...

程六金
02/20
2.7K
0

没有更多内容

加载失败,请刷新页面

加载更多

shangcheng-my

1.数据库主键、外键类型为bigint,那么在后台应该用什么类型的变量定义? 后台用string接收,因为前段传过来的一般都是json字符串,后台直接接收,mysql是可以吧数字类型的字符串转换为对应的...

榴莲黑芝麻糊
昨天
4
0
微服务架构依赖图

基于spring-cloud-alibaba + dubbo

龙影
昨天
5
0
Centos7 安装zabbix-agent

rpm -i https://repo.zabbix.com/zabbix/4.2/rhel/6/x86_64/zabbix-release-4.2-2.el6.noarch.rpm 可以到https://repo.zabbix.com/zabbix找到对应的版本 yum install zabbix-agent -y 出现E......

abowu
昨天
8
0
文本编辑器GNU nano 4.4 发布

GNU nano 4.4 "Hagelslag" 更新日志: 启动时,光标可以放在第一个或最后一个出现位置 字符串前面带有+/string 或 +?string的字符串。 发生自动硬包装时((--breaklonglines),任何前导引号...

linuxCool
昨天
7
0
你知道字节序吗

字节序 最近在调一个自定义报文的接口时,本来以为挺简单的,发现踩了好几个坑,其中一个比较“刻骨铭心”的问题就是数据的字节序问题。 背景 自定义报文,调用接口,服务端报文解析失败 iO...

杭城小刘
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部