Android实训案例(三)——实现时间轴效果的ListView,加入本地存储，实现恋爱日记的效果！

Android实训案例(三)——实现时间轴效果的ListView,加入本地存储，实现恋爱日记的效果！

还是老话，无图无真相

实现

1.新建项目TimeLineDemo

2.下载GSON

我们做本地存储需要，当然，你也可以从其他渠道下载

3.Adapter

ListView需要一个adapter，我们就定义一个TimeLineAdapter

package com.lgl.timelinedemo;

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

import android.content.Context;
import android.graphics.Color;
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;
if (convertView == null) {
inflater = LayoutInflater.from(context);
convertView = inflater.inflate(R.layout.item, null);
viewHolder = new ViewHolder();
viewHolder.day = (TextView) convertView.findViewById(R.id.day);
viewHolder.time = (TextView) convertView.findViewById(R.id.time);
viewHolder.content = (TextView) convertView
.findViewById(R.id.content);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}

String day = list.get(position).get("day").toString();
String time = list.get(position).get("time").toString();
String content = list.get(position).get("content").toString();

if (day != "") {
viewHolder.day.setBackgroundColor(Color.WHITE);
}
if (time == null) {
time = "#";
}
if (content == null) {
content = "#";
}
viewHolder.day.setText(day);
viewHolder.day.setBackgroundResource(R.drawable.timeline_year);
viewHolder.time.setText(time);

viewHolder.day.setText(day);
viewHolder.time.setText(time);
viewHolder.content.setText(content);

return convertView;
}

static class ViewHolder {
public TextView day;
public TextView time;
public TextView content;
}
}

4.item.xml

adapter需要一个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:background="#ffffff"
android:orientation="vertical"
android:paddingRight="20dp" >

<View
android:id="@+id/view_1"
android:layout_width="2dp"
android:layout_height="15dp"
android:layout_marginLeft="30dp"
android:background="#E9F01D" />

<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="24dp"
android:src="@drawable/timeline_red" />

<View
android:id="@+id/view_2"
android:layout_width="2dp"
android:layout_height="45dp"
android:layout_below="@+id/image"
android:layout_marginLeft="30dp"
android:background="#E9F01D" />

<RelativeLayout
android:id="@+id/relative"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/image"
android:layout_marginLeft="5dp"
android:layout_marginTop="-20dp"
android:layout_toRightOf="@+id/image"
android:background="@drawable/timeline_content_blue"
android:padding="5dp" >

<TextView
android:id="@+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:text="03:22"
android:textSize="14sp" />

<TextView
android:id="@+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_toRightOf="@id/time"
android:text="内容，写点啥好尼？
android:textSize="14sp" />
</RelativeLayout>

<TextView
android:textColor="#fff"
android:layout_marginLeft="15dp"
android:id="@+id/day"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/view_2"
android:layout_marginTop="-2dp"
android:gravity="center"
android:text="01月13日"
android:textSize="8sp" />

<View
android:id="@+id/view_5"
android:layout_width="2dp"
android:layout_height="10dp"
android:layout_alignLeft="@+id/view_2"
android:layout_below="@+id/day"
android:background="#E9F01D" />

</RelativeLayout>

5.activity_main.xml

然后我们就可以来写主布局，为了方便，我就直接添加一个EditText和一个Button做添加处理了

<?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" >

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/et"
/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="add"
android:id="@+id/add"
/>

<ListView
android:id="@+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>

</LinearLayout>

6.MainActivity

好了，最后一步，我们就来编写这个ListView了

package com.lgl.timelinedemo;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.content.Context;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;

import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;

public class MainActivity extends Activity {

// 声明一个listview
private ListView listView;
// listview的adapter
private TimelineAdapter timelineAdapter;
// 数据集
private List<Map<String, Object>> list;
private EditText et;
private Button add;
// 键值对
private Map<String, Object> map;

private String cacheName = "cache";
private Gson gson = new Gson();

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 获取SharedPreferences
SharedPreferences sp = getSharedPreferences("config",
Context.MODE_PRIVATE);
final SharedPreferences.Editor edit = sp.edit();

// 标记
String cache = sp.getString(cacheName, "");
list = gson.fromJson(cache,
new TypeToken<ArrayList<Map<String, Object>>>() {
}.getType());
if (list == null) {
list = new ArrayList<Map<String, Object>>();
}
et = (EditText) findViewById(R.id.et);
listView = (ListView) this.findViewById(R.id.listview);
listView.setDividerHeight(0);
timelineAdapter = new TimelineAdapter(this, list);
listView.setAdapter(timelineAdapter);

add = (Button) findViewById(R.id.add);
add.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
map = new HashMap<String, Object>();
// 月-日
SimpleDateFormat sdf = new SimpleDateFormat("MM月dd日");
// 时-分
SimpleDateFormat sdf1 = new SimpleDateFormat("HH:mm:ss");
map.put("day", sdf.format(new Date()));
map.put("time", sdf1.format(new Date()));
map.put("content", et.getText().toString());

list.add(map);
// 倒序
Collections.reverse(list);
// 通知刷新
timelineAdapter.notifyDataSetChanged();
// 提交
edit.putString(cacheName, gson.toJson(list));
edit.commit();
}
});
}
}

因为用了GSON,所以我们做了本地存储，软件关闭后并不会清除数据，本地化保存，当然，如果有朋友想说怎么删除，只要removeitem就可以了，不过，这属于listview的操作，都是后话了，如果发现有错误，请指点，万分感谢，如果觉得好，来个关注点个赞，嘻嘻！

Demo下载地址：http://download.csdn.net/detail/qq_26787115/9406896