當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

时光轴一之listView实现时光轴效果

發布時間：2023/12/18 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了时光轴一之listView实现时光轴效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ?尼瑪，非要搞什么時光軸，一想簡單的不就是個listView嗎，然后一步一步來就好了，哈哈別看那么好看其實不要想多了。

　時光軸timeline最大的作用就是把過去的事物系統化、完整化、精確化。時間軸能夠讓用戶更直觀的看到，我的這一刻在做什么，那一刻做過什么，依據時間順序，把一方面或多方面的時間足跡事件串聯起來，形成相對完整的記錄體系，再運用圖文的形式呈現給用戶;頁面簡單，表現形式特別，一直以來受到廣大用戶的歡迎。

qq空間的時光軸還是用起來蠻不錯的，看圖：

要實現我們就慢慢來吧。雖然效果趕不上qq空間但是個人覺得還是不錯的，下面我們看listView方法的實現：

先main_activity.xml:

<?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/lv_list"
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:cacheColorHint="@null"
? ? ? ? android:divider="@null" >
? ? </ListView>
</LinearLayout>

主布局很簡單，就是一個listView，設置分割線為空就好了，然后cacheColorHint也為空。

接下來我們寫時光軸的item布局：

item_time_line.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="wrap_content" >
? ? <RelativeLayout
? ? ? ? android:id="@+id/rl_title"
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:paddingTop="10dp" >
? ? ? ? <ImageView
? ? ? ? ? ? android:layout_width="wrap_content"
? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? android:layout_centerVertical="true"
? ? ? ? ? ? android:layout_marginLeft="8dp"
? ? ? ? ? ? android:background="@drawable/img_line_point" />
? ? ? ? <TextView
? ? ? ? ? ? android:id="@+id/txt_date_time"
? ? ? ? ? ? android:layout_width="wrap_content"
? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? android:layout_centerVertical="true"
? ? ? ? ? ? android:layout_marginLeft="15dp"
? ? ? ? ? ? android:textColor="#FC6802" />
? ? </RelativeLayout>
? ? <View
? ? ? ? android:id="@+id/v_line"
? ? ? ? android:layout_width="2dp"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_marginLeft="10dp"
? ? ? ? android:background="#FC6802" />
? ? <ImageView
? ? ? ? android:padding="8dp"
? ? ? ? android:id="@+id/img"
? ? ? ? android:layout_width="80dp"
? ? ? ? android:layout_height="80dp"
? ? ? ? android:layout_below="@id/rl_title"
? ? ? ? android:layout_marginLeft="3dp"
? ? ? ? android:layout_toRightOf="@id/v_line"
? ? ? ? android:scaleType="fitXY" />
? ? <TextView
? ? ? ? android:paddingTop="15dp"
? ? ? ? android:id="@+id/txt_date_content"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_below="@id/rl_title"
? ? ? ? android:layout_marginLeft="15dp"
? ? ? ? android:layout_toRightOf="@id/img"
? ? ? ? android:paddingBottom="10dp"
? ? ? ? android:maxLines="3"
? ? ? ? android:textColor="#5296C5" />
</RelativeLayout>

我們的時光軸呢，由標題、時光軸的線、圖片、時間點圖片和文字內容組成，然后時光軸的線我們是動態顯示的，為了方便顯示，我把圖片大小固定為80x80,然后文字強制設為最大行數為3行，效果還是比較明顯的。

接下來上代碼：

先來一下數據實體：

DateText.java

package com.zy.timeline;
public class DateText {
private String date;
private String text;
? ? ? ? private int imgsrc;
public DateText(String date, String text,int imgsrc) {
super();
this.date = date;
this.text = text;
this.imgsrc=imgsrc;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getText() {
return text;
}
? ? ? ?public void setText(String text) {
this.text = text;
}
public int getImgsrc() {
return imgsrc;
}
public void setImgsrc(int imgsrc) {
this.imgsrc = imgsrc;
}
}

很簡單的3個成員，分別是時間，文本內容，和圖片。

接著數據適配器：

DateAdapter.java

package com.zy.timeline;
import java.util.List;
import com.zy.timeline.R;
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.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;
import android.widget.TextView;
public class DateAdapter extends BaseAdapter {
private Context context;
private List<DateText> list;
public DateAdapter(Context context, List<DateText> list) {
this.context = context;
this.list = list;
}
@Override
public int getCount() {
if (list == null) {
return 0;
}
return list.size();
}
@Override
public Object getItem(int position) {
if (list == null) {
return null;
}
return list.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if (convertView == null) {
holder = new ViewHolder();
convertView = LayoutInflater.from(context).inflate(
R.layout.item_time_line, parent, false);
holder.date = (TextView) convertView
.findViewById(R.id.txt_date_time);
holder.content = (TextView) convertView
.findViewById(R.id.txt_date_content);
holder.line = (View) convertView.findViewById(R.id.v_line);
holder.title = (RelativeLayout) convertView
.findViewById(R.id.rl_title);
holder.img = (ImageView) convertView
.findViewById(R.id.img);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
//時間軸豎線的layout
LayoutParams params = (LayoutParams) holder.line.getLayoutParams();
//第一條數據，肯定顯示時間標題
if (position == 0) {
holder.title.setVisibility(View.VISIBLE);
holder.date.setText(TimeFormat.format("yyyy.MM.dd",
list.get(position).getDate()));
params.addRule(RelativeLayout.ALIGN_TOP, R.id.rl_title);

params.addRule(RelativeLayout.ALIGN_BOTTOM, R.id.img);
} else { // 不是第一條數據
// 本條數據和上一條數據的時間戳相同，時間標題不顯示
if (list.get(position).getDate()
.equals(list.get(position - 1).getDate())) {
holder.title.setVisibility(View.GONE);
params.addRule(RelativeLayout.ALIGN_TOP, R.id.txt_date_content);
params.addRule(RelativeLayout.ALIGN_BOTTOM,
R.id.img);
} else {
//本條數據和上一條的數據的時間戳不同的時候，顯示數據
holder.title.setVisibility(View.VISIBLE);
holder.date.setText(TimeFormat.format("yyyy.MM.dd",
list.get(position).getDate()));
params.addRule(RelativeLayout.ALIGN_TOP, R.id.rl_title);
params.addRule(RelativeLayout.ALIGN_BOTTOM,
R.id.img);
}
}
holder.line.setLayoutParams(params);
holder.content.setText(list.get(position).getText());
holder.img.setImageResource(list.get(position).getImgsrc());
return convertView;
}
public static class ViewHolder {
RelativeLayout title;
View line;
TextView date;
TextView content;
ImageView img;
}
}

? ? ?數據適配器和普通的數據適配器沒有什么兩樣，只不過是左邊的時光軸的線的長度是自動匹配的，我這里是圖片的高度要高于文字的高度，所以是以圖片的底部為標準來設置高度的。

接下來就是寫mainActivity的代碼了;

package com.zy.timeline;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import com.zy.timeline.R;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
public class MainActivity extends Activity {
// 時間軸列表
private ListView lvList;
// 數據list
private List<DateText> list;
// 列表適配器
private DateAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// findviewbyid
lvList = (ListView) findViewById(R.id.lv_list);
list = new ArrayList<DateText>();
// 添加測試數據
addData();
// 將數據按照時間排序
DateComparator comparator = new DateComparator();
Collections.sort(list, comparator);
// listview綁定適配器
adapter = new DateAdapter(this, list);
lvList.setAdapter(adapter);
}
private void addData() {
DateText date1 = new DateText("20140710", "人生的平衡，內涵也很多。豐富的內涵，是生存的保障，是身心的健康，是自由和快樂生活的均衡全面的發展。真理往往在俗人認為的相反之處，常人好爭，“圣人不敢為也”，隨和謙讓。常人追求美好的東西、好吃的東西吃過多了，以后就再也不能吃了。真理講的是心，不能離心找身外的原因。",R.drawable.one);
DateText date2 = new DateText("20120209", "奪走你初吻的人現在和你是什么關系",R.drawable.two);
DateText date3 = new DateText("20140526", "不管有多么的舍不得，我們都只有笑過之后，長歌當哭。",R.drawable.three);
DateText date4 = new DateText("20150310", "那些讓我們哭過的事,總有一天我們會笑著說出來。",R.drawable.one);
DateText date5 = new DateText("20140911", "你年輕時也曾揚言，要飲遍全世界的酒。老了卻發現，白水才是最長情的。",R.drawable.one);
DateText date6 = new DateText("20140713", "我這一個不太寬厚的肩膀只希望你累了能停靠不太溫暖卻能為你擋住風浪",R.drawable.one);
DateText date7 = new DateText("20141012", "有人問過井上，“為什么不設計湘北最后奪冠？”-井上回答說“因為青春的夢想往往是不完美的…",R.drawable.one);
DateText date8 = new DateText("20140714", "將來的你,一定會感激現在拼命的自己。",R.drawable.one);
DateText date9 = new DateText("20140709", "地球之所以是圓的，是因為上帝想讓那些走失或迷路的人重新相遇",R.drawable.one);
DateText date10 = new DateText("20110705", "如果有一天我出事了，我一個電話能到場的有誰？",R.drawable.two);
DateText date11 = new DateText("20120729", "你厭惡自己的生活，然而有人在夢想著過你的生活。",R.drawable.two);
DateText date12 = new DateText("20130725", "很愛很愛你，可你卻MD不知道",R.drawable.two);
DateText date13 = new DateText("20140716", "就算現在的他對你再好，都比不過曾經那個傷你最深的人也是如今最熟悉的陌生人，",R.drawable.two);
DateText date14 = new DateText("20140711", "回憶中，總有些瞬間，能溫暖整個曾經。",R.drawable.two);
DateText date15 = new DateText("20140710", "我最想旅游的地方，是暗戀者的心。",R.drawable.two);
DateText date16 = new DateText("20140711", "我不是故意讓自己變得不像自己",R.drawable.two);
DateText date17 = new DateText("20100712", "不要求，不一定是沒有心聲。不流淚，不一定是沒有淚痕。不表達，不一定是不愛你",R.drawable.two);
DateText date18 = new DateText("20140711", "誰蒼白了誰的等待，誰無悔著誰的執著。",R.drawable.two);
DateText date19 = new DateText("20140715", "網上作者嘔心嚦血碼出的字，他們不費一兵一卒就能輕易地據為己有",R.drawable.three);
DateText date20 = new DateText("20120723", "自從我遇見你那天開始，我的心就像跌進了深深的湖水",R.drawable.three);
DateText date21 = new DateText("20150718", "有些東西，當你擁有時，你認為理所應當。當你失去時，才知道自己沒資格。",R.drawable.three);
DateText date22 = new DateText("20130706", "有時候上天沒有給你想要的，不是因為你不配，而是你值得擁有更好的。",R.drawable.three);
DateText date23 = new DateText("20110714", "退出沒結局的劇",R.drawable.three);
DateText date24 = new DateText("20120726", "曾經的現實，現在已是回憶。",R.drawable.three);
DateText date25 = new DateText("20140325", "誰人曾照顧過我的感受，待我溫柔吻過傷口，誰人曾介意我也不好受，為我出頭碰過我的手",R.drawable.three);
DateText date26 = new DateText("20140623", "人生歸于塵埃如花瓣零落，然而人生生不息，花瓣飄零塵泥，依然花開花落。",R.drawable.three);
DateText date27 = new DateText("20140121", "現在，我們都應忘了對方，重新去過彼此的生活。",R.drawable.three);
DateText date28 = new DateText("20140916", "愛上大聲地啊地",R.drawable.three);
DateText date29 = new DateText("20140712", "被人需要是種無法言表卻又充滿能量的安全感",R.drawable.one);
DateText date30 = new DateText("20140710", "沒有信的日子，如同一堆溫柴，被回憶點著，一腦子的濃煙。",R.drawable.two);
list.add(date1);
list.add(date2);
list.add(date3);
list.add(date4);
list.add(date5);
list.add(date6);
list.add(date7);
list.add(date8);
list.add(date9);
list.add(date10);
list.add(date11);
list.add(date12);
list.add(date13);
list.add(date14);
list.add(date15);
list.add(date16);
list.add(date17);
list.add(date18);
list.add(date19);
list.add(date20);
list.add(date21);
list.add(date22);
list.add(date23);
list.add(date24);
list.add(date25);
list.add(date26);
list.add(date27);
list.add(date28);
list.add(date29);
list.add(date30);
}
}

哈哈代碼基本上寫完了，期間我們對時間進行了一下處理，用到了一個工具類：

看方法：

package com.zy.timeline;
import java.util.Comparator;
public class DateComparator implements Comparator<DateText> {
@Override
public int compare(DateText lhs, DateText rhs) {
return rhs.getDate().compareTo(lhs.getDate());//時間比較排序
}
}

package com.zy.timeline;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
public class TimeFormat {
public static String format(String format, String time) {
String result = "";
SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd");//時間格式化
try {
Date date = df.parse(time);
SimpleDateFormat df1 = new SimpleDateFormat(format);
result = df1.format(date);
} catch (ParseException e) {
e.printStackTrace();
}
return result;
}
}

好了代碼也寫完了，看下效果圖啊：

馬蛋手機比較垃圾沒有屏幕快照的功能，只能拿另外一個手機來拍了，拍的效果不是很好，見諒啊。

最后附上源碼（想看下效果的可以看下linetime.zip）：最他媽討厭那種下源碼還要積分的程序狗了

下一篇計劃把listView換成RecyclerView來實現，也順便溫習下RecyclerView的使用，不喜勿噴啊，小伙伴們，覺得不錯就給個贊。應該很快吧，感覺加班前能夠搞定的樣子，加油小伙伴們,請繼續關注時光軸系列篇?時光軸二之RecyclerView版時光軸效果。

come on ,enjoy it.

總結

以上是生活随笔為你收集整理的时光轴一之listView实现时光轴效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：管道与系统调用pipe
下一篇： pacman 查询_pacman常用命令