Android时间轴效果,直接使用在你的项目中

花门楼前见秋草,岂能贫贱相看老。这篇文章主要讲述Android时间轴效果,直接使用在你的项目中相关的知识,希望能为你提供帮助。
【Android时间轴效果,直接使用在你的项目中】近期开发app搞到历史查询,受腾讯qq的启示,搞一个具有时间轴效果的ui,看上去还能够,然后立即想到分享给小伙伴,,大家一起来看看,先上效果图吧
Android时间轴效果,直接使用在你的项目中
接下来就是代码了,axtivity的布局代码。非常easy。就是一个listview

< ?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/listview" android:layout_width=" fill_parent" android:layout_height=" wrap_content" /> < /LinearLayout>


以下就是activity.java这个了
package com.agbc.activity; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import com.agbc.adapter.TimelineAdapter; import com.agbc.listview.XListView; import com.example.agbc.R; import com.lidroid.xutils.ViewUtils; import com.lidroid.xutils.view.annotation.ViewInject; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.widget.ListView; /** * 历史时间轴 * @author twj * */ public class HistoryTaskActivity extends FragmentActivity{ private XListView listView; List< String> data ; private TimelineAdapter timelineAdapter; @Override protected void onCreate(Bundle arg0) { super.onCreate(arg0); setContentView(R.layout.activity_timeline); findViewById(); listView.setDividerHeight(0); timelineAdapter=new TimelineAdapter(getDate(), this); listView.setAdapter(timelineAdapter); } private List< Map< String, Object> > getDate() { List< Map< String, Object> > list = new ArrayList< Map< String, Object> > (); Map< String, Object> map = new HashMap< String, Object> (); map.put(" year" , " 2014" ); map.put(" month" , " 03/15" ); map.put(" title" , " 这是第1行測试数据" ); list.add(map); map = new HashMap< String, Object> (); map.put(" year" , " 2014" ); map.put(" month" , " 12/1" ); map.put(" title" , " 这是第2行測试数据" ); list.add(map); map = new HashMap< String, Object> (); map.put(" year" , " 2013" ); map.put(" month" , " 11/15" ); map.put(" title" , " 这是第3行測试数据" ); list.add(map); map = new HashMap< String, Object> (); map.put(" year" , " 1998" ); map.put(" month" , " 01/1" ); map.put(" title" , " 这是第4行測试数据" ); list.add(map); return list; } private void findViewById() { listView=(XListView) findViewById(R.id.listview); }}


接下来就是适配器了。适配器事实上也简单
package com.example.timelinetext.test; import java.util.List; import java.util.Map; import android.content.Context; import android.util.Log; 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; inflater = LayoutInflater.from(parent.getContext()); convertView = inflater.inflate(R.layout.adapter_timeline, null); viewHolder = new ViewHolder(); viewHolder.year = (TextView) convertView.findViewById(R.id.year); viewHolder.month = (TextView) convertView.findViewById(R.id.month); viewHolder.title = (TextView) convertView.findViewById(R.id.title); String yearStr = list.get(position).get(" year" ).toString(); String monthStr = list.get(position).get(" month" ).toString(); String titleStr = list.get(position).get(" title" ).toString(); viewHolder.year.setText( yearStr); viewHolder.month.setText(monthStr); viewHolder.title.setText(titleStr); return convertView; } static class ViewHolder { public TextView year; public TextView month; public TextView title; } }


最后就是适配器布局代码了,事实上效果就是在这里提现出来的
< ?
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" > < RelativeLayout android:id=" @+id/layout_1" android:layout_width=" 60dp" android:layout_height=" 25dp" android:layout_marginLeft=" 43dp" android:background=" @android:color/black" android:gravity=" center" > < TextView android:id=" @+id/month" android:layout_width=" wrap_content" android:layout_height=" wrap_content" android:text=" 測试数据" android:textColor=" #FFFFFF" android:textSize=" 12sp" /> < /RelativeLayout> < 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" /> < RelativeLayout android:id=" @+id/layout_2" android:layout_width=" 60dp" android:layout_height=" 25dp" android:layout_below=" @+id/view_0" android:layout_marginLeft=" 43dp" android:background=" @android:color/black" android:gravity=" center" > < TextView android:id=" @+id/year" android:layout_width=" wrap_content" android:layout_height=" wrap_content" android:text=" 測试数据" android:textColor=" #FFFFFF" android:textSize=" 12sp" /> < /RelativeLayout> < 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=https://www.songbingjia.com/android/" @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_toRightOf=" @+id/image_1" android:ellipsize=" end" android:singleLine=" true" android:maxEms=" 7" android:paddingLeft=" 5dp" android:text=" 測试数据" android:textSize=" 12sp" /> < ImageView android:id=" @+id/personal_circle" android:layout_width=" 15dp" android:layout_height=" 15dp" android:layout_toRightOf=" @+id/title" android:src=" @drawable/ic_launcher" /> < TextView android:id=" @+id/text_2" android:layout_width=" wrap_content" android:layout_height=" wrap_content" android:layout_toRightOf=" @+id/image_1" android:paddingLeft=" 5dp" android:paddingTop=" 20dp" android:text=" 測试数据" android:textSize=" 12sp" /> < TextView android:id=" @+id/text_3" android:layout_width=" wrap_content" android:layout_height=" wrap_content" android:layout_toRightOf=" @+id/text_2" android:ellipsize=" end" android:singleLine=" true" android:paddingTop=" 20dp" android:text=" 測试数据" android:textSize=" 12sp" /> < TextView android:id=" @+id/text_4" android:layout_width=" wrap_content" android:layout_height=" wrap_content" android:layout_toRightOf=" @+id/image_1" android:paddingLeft=" 5dp" android:paddingTop=" 40dp" android:text=" 測试数据" android:textSize=" 12sp" /> < TextView android:id=" @+id/text_5" android:layout_width=" wrap_content" android:layout_height=" wrap_content" android:layout_toRightOf=" @+id/text_4" android:ellipsize=" end" android:singleLine=" true" android:paddingTop=" 40dp" android:text=" 測试数据" android:textSize=" 12sp" /> < TextView android:id=" @+id/text_6" android:layout_width=" wrap_content" android:layout_height=" wrap_content" android:layout_toRightOf=" @+id/image_1" android:paddingLeft=" 5dp" android:paddingTop=" 60dp" android:text=" 測试数据" android:textSize=" 12sp" /> < TextView android:id=" @+id/text_7" android:layout_width=" wrap_content" android:layout_height=" wrap_content" android:layout_alignRight=" @+id/text_3" android:layout_alignTop=" @+id/title" android:layout_toRightOf=" @+id/text_6" android:ellipsize=" end" android:singleLine=" true" android:paddingTop=" 60dp" android:text=" 測试数据" android:textSize=" 12sp" /> < /RelativeLayout> < /RelativeLayout>

好吧!时间轴事实上原理非常easy的。就是几个控件。调调位置而已,只是在实际开发中可能要对时间轴上面的控件进行操作,这就是关于事件分发的机制了,哎,事实上都是写烂的代码了。好了。这个天我要去研究tcp/ip通信了。


    推荐阅读