Android控件之使用ListView實(shí)現(xiàn)時(shí)間軸效果
實(shí)現(xiàn)思路:
該View是通過(guò)ListView實(shí)現(xiàn)的,通過(guò)實(shí)體兩個(gè)字段內(nèi)容content和時(shí)間time來(lái)展示每個(gè)ListItem
時(shí)間軸是使用上面一條線(20dp)和中間一個(gè)圓(15dp)和下面一條線(40dp)組裝成的
在ListView中,設(shè)置其分割線為空,并且沒(méi)有點(diǎn)擊效果
效果圖:

步驟一:使用xml畫出一個(gè)灰色的圓點(diǎn)(time_cycle.xml)
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#CBCBCB" /> <size android:width="15dp" android:height="15dp" /> </shape>
步驟二:javabean的編寫
public class KuaiDi {
private String content;
private String time;
public KuaiDi(String time, String content) {
this.content = content;
this.time = time;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
}
步驟三:編寫子布局(time_item.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="75dp" android:orientation="horizontal"> <!--線條部分--> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center_horizontal" android:orientation="vertical" android:paddingLeft="30dp"> <View android:layout_width="3dp" android:layout_height="20dp" android:background="#CBCBCB" /> <ImageView android:layout_width="15dp" android:layout_height="15dp" android:background="@drawable/time_cycle" /> <View android:layout_width="3dp" android:layout_height="40dp" android:background="#CBCBCB" /> </LinearLayout> <!--文字部分--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingLeft="30dp" android:paddingRight="30dp" android:paddingTop="20dp"> <TextView android:id="@+id/tv_content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="【廣東省中國(guó)郵政集團(tuán)公司深圳市龍華函件中心】已收寄" android:textColor="#ABABAB" /> <TextView android:id="@+id/tv_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tv_content" android:text="2016-05-03 00:22:36" android:textColor="#ABABAB" /> </LinearLayout> </LinearLayout>
其效果如圖:

步驟四:編寫父布局(activity_main.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="match_parent"> <ListView android:id="@+id/lv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:divider="@null" android:listSelector="@android:color/transparent" /> </RelativeLayout>
步驟五:編寫子布局的適配器(KuaiDiAdapter.java)
public class KuaiDiAdapter extends BaseAdapter {
//印章數(shù)據(jù)
private List<KuaiDi> list;
private LayoutInflater mInflater;
public KuaiDiAdapter(Context context, List<KuaiDi> list) {
this.list = list;
mInflater = LayoutInflater.from(context);
}
@Override
public int getCount() {
return list.size();
}
@Override
public Object getItem(int position) {
return list.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = mInflater.inflate(R.layout.time_item, null);
}
ViewHolder holder = getViewHolder(convertView);
KuaiDi kd = list.get(position);
holder.tv_content.setText(kd.getContent());
holder.tv_time.setText(kd.getTime());
return convertView;
}
/**
* 獲得控件管理對(duì)象
*
* @param view
* @return
*/
private ViewHolder getViewHolder(View view) {
ViewHolder holder = (ViewHolder) view.getTag();
if (holder == null) {
holder = new ViewHolder(view);
view.setTag(holder);
}
return holder;
}
/**
* 控件管理類
*/
private class ViewHolder {
private TextView tv_content, tv_time;
ViewHolder(View view) {
tv_content = (TextView) view.findViewById(R.id.tv_content);
tv_time = (TextView) view.findViewById(R.id.tv_time);
}
}
}
步驟六:在父布局中設(shè)置適配器
public class MainActivity extends AppCompatActivity {
private ListView lv;
private KuaiDiAdapter adapter;
private List<KuaiDi> list;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lv = (ListView) findViewById(R.id.lv);
list =new ArrayList<>();
list.add(new KuaiDi("2016-09-18 08:33:50","您的訂單開始處理"));
list.add(new KuaiDi("2016-09-18 08:40:23","您的訂單待配貨"));
list.add(new KuaiDi("2016-09-18 08:51:33","您的包裹已出庫(kù)"));
list.add(new KuaiDi("2016-09-18 21:12:53","【深圳市龍華函件中心】已收寄"));
list.add(new KuaiDi("2016-09-18 17:44:20","到達(dá)【深圳】"));
list.add(new KuaiDi("2016-09-18 21:26:51","離開【深圳市龍華函件中心】,下一站【深圳市】"));
list.add(new KuaiDi("2016-09-18 23:18:21","到達(dá)【深圳市處理中心】"));
list.add(new KuaiDi("2016-09-19 01:14:30","離開【深圳市處理中心】,下一站【廣州市】"));
list.add(new KuaiDi("2016-09-19 04:42:11","到達(dá)【廣東省廣州郵件處理中心】"));
adapter = new KuaiDiAdapter(this,list);
lv.setAdapter(adapter);
}
}
以上所述是小編給大家介紹的Android控件之使用ListView實(shí)現(xiàn)時(shí)間軸效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Android自定義控件實(shí)現(xiàn)時(shí)間軸
- Android使用自定義View實(shí)現(xiàn)橫行時(shí)間軸效果
- Android自定義view仿淘寶快遞物流信息時(shí)間軸
- Android實(shí)現(xiàn)快遞物流時(shí)間軸效果
- Android實(shí)現(xiàn)列表時(shí)間軸
- Android自定義指示器時(shí)間軸效果實(shí)例代碼詳解
- 教你3分鐘了解Android 簡(jiǎn)易時(shí)間軸的實(shí)現(xiàn)方法
- Android自定義View實(shí)現(xiàn)垂直時(shí)間軸布局
- Android自定義時(shí)間軸的實(shí)現(xiàn)過(guò)程
- android自定義控件實(shí)現(xiàn)簡(jiǎn)易時(shí)間軸(2)
相關(guān)文章
mac開發(fā)android環(huán)境搭建步驟圖解
這里比較詳細(xì)的來(lái)總結(jié)下mac開發(fā)android的環(huán)境搭建步驟安裝過(guò)程,希望對(duì)一些正準(zhǔn)備配置Android開發(fā)環(huán)境的小伙伴們有一定幫助2014-01-01
Android動(dòng)畫之補(bǔ)間動(dòng)畫(Tween Animation)實(shí)例詳解
這篇文章主要介紹了Android動(dòng)畫之補(bǔ)間動(dòng)畫(Tween Animation)用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android補(bǔ)間動(dòng)畫的定義,原理,注意事項(xiàng)與相關(guān)使用技巧,需要的朋友可以參考下2016-01-01
android利用websocket協(xié)議與服務(wù)器通信
這篇文章主要為大家詳細(xì)介紹了android利用websocket協(xié)議與服務(wù)器通信,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03
Android詳解之NoHttp最基本使用(無(wú)封裝)
這篇文章主要介紹了Android詳解之NoHttp最基本使用,無(wú)封裝,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09
android文件操作——讀取assets和raw文件下的內(nèi)容
本篇文章主要介紹了android文件操作——讀取assets和raw文件下的內(nèi)容,并附簡(jiǎn)單實(shí)例代碼,需要的朋友可以參考下。2016-10-10
APK包名修改 請(qǐng)問(wèn)如何修改APK包名
今天,想在android手機(jī)上安裝兩個(gè)相同的應(yīng)用,本以為可以安裝不同版本的,試了幾次,均相互覆蓋了,于是,只能設(shè)法修改apk所對(duì)應(yīng)的包名(package name),需要了解的朋友可以參考下2012-12-12
Flutter 用自定義轉(zhuǎn)場(chǎng)動(dòng)畫實(shí)現(xiàn)頁(yè)面切換
本篇介紹了 fluro 導(dǎo)航到其他頁(yè)面的自定義轉(zhuǎn)場(chǎng)動(dòng)畫實(shí)現(xiàn),F(xiàn)lutter本身提供了不少預(yù)定義的轉(zhuǎn)場(chǎng)動(dòng)畫,可以通過(guò) transitionBuilder 參數(shù)設(shè)計(jì)多種多樣的轉(zhuǎn)場(chǎng)動(dòng)畫,也可以通過(guò)自定義的 AnimatedWidget實(shí)現(xiàn)個(gè)性化的轉(zhuǎn)場(chǎng)動(dòng)畫效果。2021-06-06
5種Android數(shù)據(jù)存儲(chǔ)方式匯總
這篇文章主要為大家整理了5種Android數(shù)據(jù)存儲(chǔ)方式,列出了各存儲(chǔ)方式的優(yōu)缺點(diǎn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12

