android之时间轴效果实现
2016-01-14 14:19
351 查看
最近开发的app中要用到时间轴这东西,需要实现的效果如下:
想想这个东西应该可以用listview实现吧。然后最近就模拟着去写了:
首先写 listview的item的布局:
listview_item.xml
[java] view plain copy print ?
"1.0" encoding="utf-8"?>
"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" />
接下来就是写listview的adapter了:
TimelineAdapter.java
[java] view plain copy print ?
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;
publicclass TimelineAdapter extends BaseAdapter {
private Context context;
private List > list; </string, object>
private LayoutInflater inflater;
public TimelineAdapter(Context context, List > list) { </string, object>
super();
this.context = context;
this.list = list;
}
@Override
publicint getCount() {
return list.size();
}
@Override
public Object getItem(int position) {
return position;
}
@Override
publiclong 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;
}
staticclass ViewHolder {
public TextView year;
public TextView month;
public TextView title;
}
}
最后使用:
MainActivity.java
[java] view plain copy print ?
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;
publicclass MainActivity extends Activity {
private ListView listView;
List data ;
private TimelineAdapter timelineAdapter;
@Override
protectedvoid 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 > getData() { </string, object>
List > list = new ArrayList >(); </string, object></string, object>
Map map = new HashMap (); </string, object></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而已。
想想这个东西应该可以用listview实现吧。然后最近就模拟着去写了:
首先写 listview的item的布局:
listview_item.xml
[java] view plain copy print ?
"1.0" encoding="utf-8"?>
"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" />
接下来就是写listview的adapter了:
TimelineAdapter.java
[java] view plain copy print ?
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;
publicclass TimelineAdapter extends BaseAdapter {
private Context context;
private List > list; </string, object>
private LayoutInflater inflater;
public TimelineAdapter(Context context, List > list) { </string, object>
super();
this.context = context;
this.list = list;
}
@Override
publicint getCount() {
return list.size();
}
@Override
public Object getItem(int position) {
return position;
}
@Override
publiclong 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;
}
staticclass ViewHolder {
public TextView year;
public TextView month;
public TextView title;
}
}
最后使用:
MainActivity.java
[java] view plain copy print ?
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;
publicclass MainActivity extends Activity {
private ListView listView;
List data ;
private TimelineAdapter timelineAdapter;
@Override
protectedvoid 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 > getData() { </string, object>
List > list = new ArrayList >(); </string, object></string, object>
Map map = new HashMap (); </string, object></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而已。
相关文章推荐
- Android中的IPC机制(1)-Binder机制(上)
- Android内存泄漏简介
- android file.createnewfile ioexception
- Android 实现一个计时器
- 我们为什么要在Android中使用RxJava
- androidstudio使用中的问题(实时更新)
- android keystore
- 我的课表—android 表格布局应用
- Mac OS X 下部分Android手机无法连接adb问题之解决方案
- android优化(4)及Handler和AsyncTask的区别
- Android HandlerThread 的使用及其Demo
- Android博客
- Android中使用Handler造成内存泄露的分析和解决
- Android中monkey测试
- Android Xutils3 框架
- Android studio 导入百度地图demo的错误情况(1)
- 手动安装 Android ADB USB Driver
- Android 沉浸式状态栏 支持4.4及以上。
- AndroidStudio 鼠标进入代码区显示提示信息
- Android:在ADT中快速多行注释的方法