Android控件之使用ListView實現(xiàn)時間軸效果
實現(xiàn)思路:
該View是通過ListView實現(xiàn)的,通過實體兩個字段內(nèi)容content和時間time來展示每個ListItem
時間軸是使用上面一條線(20dp)和中間一個圓(15dp)和下面一條線(40dp)組裝成的
在ListView中,設(shè)置其分割線為空,并且沒有點擊效果
效果圖:
步驟一:使用xml畫出一個灰色的圓點(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="【廣東省中國郵政集團公司深圳市龍華函件中心】已收寄" 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; } /** * 獲得控件管理對象 * * @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","您的包裹已出庫")); list.add(new KuaiDi("2016-09-18 21:12:53","【深圳市龍華函件中心】已收寄")); list.add(new KuaiDi("2016-09-18 17:44:20","到達【深圳】")); list.add(new KuaiDi("2016-09-18 21:26:51","離開【深圳市龍華函件中心】,下一站【深圳市】")); list.add(new KuaiDi("2016-09-18 23:18:21","到達【深圳市處理中心】")); list.add(new KuaiDi("2016-09-19 01:14:30","離開【深圳市處理中心】,下一站【廣州市】")); list.add(new KuaiDi("2016-09-19 04:42:11","到達【廣東省廣州郵件處理中心】")); adapter = new KuaiDiAdapter(this,list); lv.setAdapter(adapter); } }
以上所述是小編給大家介紹的Android控件之使用ListView實現(xiàn)時間軸效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
mac開發(fā)android環(huán)境搭建步驟圖解
這里比較詳細的來總結(jié)下mac開發(fā)android的環(huán)境搭建步驟安裝過程,希望對一些正準備配置Android開發(fā)環(huán)境的小伙伴們有一定幫助2014-01-01Android動畫之補間動畫(Tween Animation)實例詳解
這篇文章主要介紹了Android動畫之補間動畫(Tween Animation)用法,結(jié)合實例形式較為詳細的分析了Android補間動畫的定義,原理,注意事項與相關(guān)使用技巧,需要的朋友可以參考下2016-01-01android利用websocket協(xié)議與服務(wù)器通信
這篇文章主要為大家詳細介紹了android利用websocket協(xié)議與服務(wù)器通信,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-03-03android文件操作——讀取assets和raw文件下的內(nèi)容
本篇文章主要介紹了android文件操作——讀取assets和raw文件下的內(nèi)容,并附簡單實例代碼,需要的朋友可以參考下。2016-10-10Flutter 用自定義轉(zhuǎn)場動畫實現(xiàn)頁面切換
本篇介紹了 fluro 導(dǎo)航到其他頁面的自定義轉(zhuǎn)場動畫實現(xiàn),F(xiàn)lutter本身提供了不少預(yù)定義的轉(zhuǎn)場動畫,可以通過 transitionBuilder 參數(shù)設(shè)計多種多樣的轉(zhuǎn)場動畫,也可以通過自定義的 AnimatedWidget實現(xiàn)個性化的轉(zhuǎn)場動畫效果。2021-06-06