一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

搜索
分享

Android時間軸效果的實(shí)現(xiàn)

 魔趣大師 2014-11-18
最近項(xiàng)目需要用到時間軸的效果，網(wǎng)上看了幾個例子，和想要實(shí)現(xiàn)的效果也不盡相同，下面將我的實(shí)現(xiàn)方法和思路說一下。首先看下效果圖：


數(shù)據(jù)是隨便填的，顯得有點(diǎn)亂，但是不影響效果。實(shí)現(xiàn)方面主要是用ListView來實(shí)現(xiàn)，主要是根據(jù)ListView的item位置與上一條數(shù)據(jù)進(jìn)行比較，來控制時間的顯示隱藏效果。思路很簡單，下面看代碼實(shí)現(xiàn)：
首先是頁面的整體布局，很簡單，就一個ListView：
res/layout/activity_main.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas./apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical" >

  7.     <ListView
  8.         android:id="@+id/lv_list"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"
  11.         android:cacheColorHint="@null"
  12.         android:divider="@null" >
  13.     </ListView>

  15. </LinearLayout>
復(fù)制代碼


ListView的item的布局分了三部分，一個需要顯示隱藏的標(biāo)題欄，包括一個小圓點(diǎn)和一個顯示時間的TextView，第二部分是展示的內(nèi)容，最后是時間軸的豎線。
res/layout/item_time_line.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas./apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content" >

  6.     <RelativeLayout
  7.         android:id="@+id/rl_title"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="wrap_content"
  10.         android:paddingTop="10dp" >

  12.         <ImageView
  13.             android:layout_width="wrap_content"
  14.             android:layout_height="wrap_content"
  15.             android:layout_centerVertical="true"
  16.             android:layout_marginLeft="8dp"
  17.             android:background="@drawable/img_line_point" />

  19.         <TextView
  20.             android:id="@+id/txt_date_time"
  21.             android:layout_width="wrap_content"
  22.             android:layout_height="wrap_content"
  23.             android:layout_centerVertical="true"
  24.             android:layout_marginLeft="15dp"
  25.             android:textColor="#FC6802" />
  26.     </RelativeLayout>

  28.     <TextView
  29.         android:id="@+id/txt_date_content"
  30.         android:layout_width="wrap_content"
  31.         android:layout_height="wrap_content"
  32.         android:layout_below="@id/rl_title"
  33.         android:layout_marginLeft="15dp"
  34.         android:paddingBottom="10dp"
  35.         android:textColor="#5296C5" />

  37.     <View
  38.         android:id="@+id/v_line"
  39.         android:layout_width="2dp"
  40.         android:layout_height="wrap_content"
  41.         android:layout_marginLeft="10dp"
  42.         android:background="#FC6802" />

  44. </RelativeLayout>
復(fù)制代碼

下面看主要的實(shí)現(xiàn)部分，是在listview的適配器中：
DateAdapter.java
  1. package com.xiaowu.timeline;

  3. import java.util.List;

  5. import android.content.Context;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  9. import android.widget.BaseAdapter;
  10. import android.widget.RelativeLayout;
  11. import android.widget.RelativeLayout.LayoutParams;
  12. import android.widget.TextView;

  14. public class DateAdapter extends BaseAdapter {
  15.         private Context context;
  16.         private List<DateText> list;

  18.         public DateAdapter(Context context, List<DateText> list) {
  19.                 this.context = context;
  20.                 this.list = list;
  21.         }

  23.         @Override
  24.         public int getCount() {
  25.                 if (list == null) {
  26.                         return 0;
  27.                 }
  28.                 return list.size();
  29.         }

  31.         @Override
  32.         public Object getItem(int position) {
  33.                 if (list == null) {
  34.                         return null;
  35.                 }
  36.                 return list.get(position);
  37.         }

  39.         @Override
  40.         public long getItemId(int position) {
  41.                 return position;
  42.         }

  44.         @Override
  45.         public View getView(int position, View convertView, ViewGroup parent) {
  46.                 ViewHolder holder = null;
  47.                 if (convertView == null) {
  48.                         holder = new ViewHolder();
  49.                         convertView = LayoutInflater.from(context).inflate(
  50.                                         R.layout.item_time_line, parent, false);
  51.                         holder.date = (TextView) convertView
  52.                                         .findViewById(R.id.txt_date_time);
  53.                         holder.content = (TextView) convertView
  54.                                         .findViewById(R.id.txt_date_content);
  55.                         holder.line = (View) convertView.findViewById(R.id.v_line);
  56.                         holder.title = (RelativeLayout) convertView
  57.                                         .findViewById(R.id.rl_title);
  58.                         convertView.setTag(holder);
  59.                 } else {
  60.                         holder = (ViewHolder) convertView.getTag();
  61.                 }
  62.                 //時間軸豎線的layout
  63.                 LayoutParams params = (LayoutParams) holder.line.getLayoutParams();
  64.                 //第一條數(shù)據(jù)，肯定顯示時間標(biāo)題
  65.                 if (position == 0) {
  66.                         holder.title.setVisibility(View.VISIBLE);
  67.                         holder.date.setText(TimeFormat.format("yyyy.MM.dd",
  68.                                         list.get(position).getDate()));
  69.                         params.addRule(RelativeLayout.ALIGN_TOP, R.id.rl_title);
  70.                         params.addRule(RelativeLayout.ALIGN_BOTTOM, R.id.txt_date_content);
  71.                 } else { // 不是第一條數(shù)據(jù)
  72.                         // 本條數(shù)據(jù)和上一條數(shù)據(jù)的時間戳相同，時間標(biāo)題不顯示
  73.                         if (list.get(position).getDate()
  74.                                         .equals(list.get(position - 1).getDate())) {
  75.                                 holder.title.setVisibility(View.GONE);
  76.                                 params.addRule(RelativeLayout.ALIGN_TOP, R.id.txt_date_content);
  77.                                 params.addRule(RelativeLayout.ALIGN_BOTTOM,
  78.                                                 R.id.txt_date_content);
  79.                         } else {
  80.                                 //本條數(shù)據(jù)和上一條的數(shù)據(jù)的時間戳不同的時候，顯示數(shù)據(jù)
  81.                                 holder.title.setVisibility(View.VISIBLE);
  82.                                 holder.date.setText(TimeFormat.format("yyyy.MM.dd",
  83.                                                 list.get(position).getDate()));
  84.                                 params.addRule(RelativeLayout.ALIGN_TOP, R.id.rl_title);
  85.                                 params.addRule(RelativeLayout.ALIGN_BOTTOM,
  86.                                                 R.id.txt_date_content);
  87.                         }
  88.                 }
  89.                 holder.line.setLayoutParams(params);
  90.                 holder.content.setText(list.get(position).getText());
  91.                 return convertView;
  92.         }

  94.         public static class ViewHolder {
  95.                 RelativeLayout title;
  96.                 View line;
  97.                 TextView date;
  98.                 TextView content;
  99.         }
  100. }
復(fù)制代碼
其中DateText是實(shí)體類，包括標(biāo)題和內(nèi)容：

DateText.java
  1. package com.xiaowu.timeline;

  3. public class DateText {
  4.         private String date;
  5.         private String text;

  7.         public DateText() {

  9.         }

  11.         public DateText(String date, String text) {
  12.                 super();
  13.                 this.date = date;
  14.                 this.text = text;
  15.         }

  17.         public String getDate() {
  18.                 return date;
  19.         }

  21.         public void setDate(String date) {
  22.                 this.date = date;
  23.         }

  25.         public String getText() {
  26.                 return text;
  27.         }

  29.         public void setText(String text) {
  30.                 this.text = text;
  31.         }

  33. }
復(fù)制代碼
adapter里面用到了一個時間戳轉(zhuǎn)為指定格式的工具類：
TimeFormat.java
  1. package com.xiaowu.timeline;

  3. import java.text.ParseException;
  4. import java.text.SimpleDateFormat;
  5. import java.util.Date;

  7. public class TimeFormat {
  8.         public static String format(String format, String time) {
  9.                 String result = "";
  10.                 SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd");
  11.                 try {
  12.                         Date date = df.parse(time);
  13.                         SimpleDateFormat df1 = new SimpleDateFormat(format);
  14.                         result = df1.format(date);
  15.                 } catch (ParseException e) {
  16.                         e.printStackTrace();
  17.                 }
  18.                 return result;
  19.         }
  20. }
復(fù)制代碼
場景類中還用到一個比較時間戳的工具類：

DateComparator.java
  1. package com.xiaowu.timeline;

  3. import java.util.Comparator;

  5. public class DateComparator implements Comparator<DateText> {

  7.         @Override
  8.         public int compare(DateText lhs, DateText rhs) {
  9.                 return rhs.getDate().compareTo(lhs.getDate());
  10.         }

  12. }
復(fù)制代碼
下面看下場景類：

MainActivity.java
  1. package com.xiaowu.timeline;

  3. import java.util.ArrayList;
  4. import java.util.Collections;
  5. import java.util.List;

  7. import android.app.Activity;
  8. import android.os.Bundle;
  9. import android.widget.ListView;

  11. public class MainActivity extends Activity {
  12.         // 時間軸列表
  13.         private ListView lvList;
  14.         // 數(shù)據(jù)list
  15.         private List<DateText> list;
  16.         // 列表適配器
  17.         private DateAdapter adapter;

  19.         @Override
  20.         protected void onCreate(Bundle savedInstanceState) {
  21.                 super.onCreate(savedInstanceState);
  22.                 setContentView(R.layout.activity_main);
  23.                 // findviewbyid
  24.                 lvList = (ListView) findViewById(R.id.lv_list);
  25.                 list = new ArrayList<DateText>();
  26.                 // 添加測試數(shù)據(jù)
  27.                 addData();
  28.                 // 將數(shù)據(jù)按照時間排序
  29.                 DateComparator comparator = new DateComparator();
  30.                 Collections.sort(list, comparator);
  31.                 // listview綁定適配器
  32.                 adapter = new DateAdapter(this, list);
  33.                 lvList.setAdapter(adapter);
  34.         }

  36.         private void addData() {
  37.                 DateText date1 = new DateText("20140710", "撒大聲地");
  38.                 DateText date2 = new DateText("20140709", "撒薩達(dá)");
  39.                 DateText date3 = new DateText("20140726", "撒大ADS");
  40.                 DateText date4 = new DateText("20140710", "撒達(dá)到對薩達(dá)撒地");
  41.                 DateText date5 = new DateText("20140711", "撒大阿瑟的薩達(dá)地");
  42.                 DateText date6 = new DateText("20140713", "撒撒大大地");
  43.                 DateText date7 = new DateText("20140712", "撒大鼎折覆餗地");
  44.                 DateText date8 = new DateText("20140714", "撒大請問阿爾阿斯頓");
  45.                 DateText date9 = new DateText("20140709", "撒大親愛額問問喬恩地");
  46.                 DateText date10 = new DateText("20140705", "撒 請問請問地");
  47.                 DateText date11 = new DateText("20140729", "撒請問額外確認(rèn)聲地");
  48.                 DateText date12 = new DateText("20140725", "撒大按時打算");
  49.                 DateText date13 = new DateText("20140716", "撒大愛上大聲地");
  50.                 DateText date14 = new DateText("20140711", "撒其味無窮地");
  51.                 DateText date15 = new DateText("20140710", "撒大請問我期待地");
  52.                 DateText date16 = new DateText("20140711", "撒大聲薩達(dá)");
  53.                 DateText date17 = new DateText("20140712", "阿斯達(dá)");
  54.                 DateText date18 = new DateText("20140711", "撒大聲大聲道");
  55.                 DateText date19 = new DateText("20140715", "阿斯頓撒打算23 ");
  56.                 DateText date20 = new DateText("20140723", "范德薩發(fā)生");
  57.                 DateText date21 = new DateText("20140718", "阿薩德飛灑");
  58.                 DateText date22 = new DateText("20140706", "撒打算打算");
  59.                 DateText date23 = new DateText("20140714", "撒打算");
  60.                 DateText date24 = new DateText("20140726", "輕微的城市的方式");
  61.                 DateText date25 = new DateText("20140725", "阿斯達(dá)阿斯達(dá)現(xiàn)在");
  62.                 DateText date26 = new DateText("20140723", "代購費(fèi)多少自行車");
  63.                 DateText date27 = new DateText("20140721", "多撒阿薩德時打算");
  64.                 DateText date28 = new DateText("20140716", "愛上大聲地啊地");
  65.                 DateText date29 = new DateText("20140712", "阿斯蒂芬當(dāng)我?guī)煾?);
  66.                 DateText date30 = new DateText("20140710", "撒大聲大聲道");
  67.                 list.add(date1);
  68.                 list.add(date2);
  69.                 list.add(date3);
  70.                 list.add(date4);
  71.                 list.add(date5);
  72.                 list.add(date6);
  73.                 list.add(date7);
  74.                 list.add(date8);
  75.                 list.add(date9);
  76.                 list.add(date10);
  77.                 list.add(date11);
  78.                 list.add(date12);
  79.                 list.add(date13);
  80.                 list.add(date14);
  81.                 list.add(date15);
  82.                 list.add(date16);
  83.                 list.add(date17);
  84.                 list.add(date18);
  85.                 list.add(date19);
  86.                 list.add(date20);
  87.                 list.add(date21);
  88.                 list.add(date22);
  89.                 list.add(date23);
  90.                 list.add(date24);
  91.                 list.add(date25);
  92.                 list.add(date26);
  93.                 list.add(date27);
  94.                 list.add(date28);
  95.                 list.add(date29);
  96.                 list.add(date30);
  97.         }
  98. }
復(fù)制代碼
附上代碼： 

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    国产成人午夜在线视频| 日韩精品毛片视频免费看| 亚洲国产香蕉视频在线观看| 亚洲中文字幕在线乱码av| 三级高清有码在线观看| 午夜福利网午夜福利网| 欧美日韩精品人妻二区三区| 大香蕉伊人精品在线观看| 观看日韩精品在线视频| 中文字幕日韩欧美理伦片| 色婷婷激情五月天丁香| 国产一区二区不卡在线播放| 国产高清三级视频在线观看| 日本精品理论在线观看| 日韩免费成人福利在线| 日本精品理论在线观看| 久久精品中文字幕人妻中文 | 日韩精品视频香蕉视频| 日本人妻中出在线观看| 一区二区日韩欧美精品| 黄片三级免费在线观看| 日韩蜜桃一区二区三区| 国产韩国日本精品视频| 国产日本欧美韩国在线| 日韩欧美综合中文字幕| 91后入中出内射在线| 国产中文字幕久久黄色片| 麻豆精品在线一区二区三区| 乱女午夜精品一区二区三区| 扒开腿狂躁女人爽出白浆av| 久久99爱爱视频视频| 一区二区福利在线视频| 久久国产亚洲精品赲碰热| 一本久道久久综合中文字幕| 国产又粗又爽又猛又黄的| 69老司机精品视频在线观看| 欧美一级特黄大片做受大屁股| 搡老妇女老熟女一区二区| 九九热这里只有精品哦| 国产一区二区在线免费| 亚洲内射人妻一区二区|