Android 时间轴的实现

最新推荐文章于 2024-05-02 04:01:53 发布
最新推荐文章于 2024-05-02 04:01:53 发布
阅读量1.2w 收藏 11
点赞数
分类专栏： android UI android 巧妙 学习笔记 文章标签： android ui 时间轴
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TOYOTA11/article/details/50889969
版权

时间轴

时间轴，顾名思义就是将发生的事件按照时间顺序罗列起来，给用户带来一种更加直观的体验。京东和淘宝的物流顺序就是一个时间轴（如图），想必大家都不陌生。

京东物流过程

时间轴的初探

初次见到这种UI，感觉整个布局似曾相识，但面对那条时间轴却又不知如何下手。其实，整个时间轴还是可以当做一个ListView处理，只是在Adapter中的布局要花点心思。好了，废话不说，看代码。

效果预览

时间轴

整个MainActivity的布局就是应ListView，这里不再赘述。主要说一下ListView的Adapter实现方法：

  • item_view.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"
    android:background="#ffffff"
    android:orientation="vertical">


    <ImageView
        android:id="@+id/image"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:layout_marginLeft="85dp"
        android:src="@drawable/point2" />

    <View
        android:id="@+id/line_normal"
        android:layout_width="3dp"
        android:layout_height="100dp"
        android:layout_below="@+id/image"
        android:layout_marginLeft="91dp"
        android:background="@color/colorAccent" />


    <TextView
        android:id="@+id/show_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:layout_toLeftOf="@id/image"
        android:padding="3dp"     
        android:textSize="12dp" />

    <TextView
        android:id="@+id/show_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_toRightOf="@id/image"
        android:padding="3dp"    
        android:textSize="12dp" />

</RelativeLayout>
  • Adapter的getView方法（其他方法就不贴了，都是老样子）
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        Item item;
        if (convertView == null) {
            item = new Item();
            convertView = LayoutInflater.from(mContext).inflate(R.layout.item_view, null);
            item.time = (TextView) convertView.findViewById(R.id.show_time);
            item.title= (TextView) convertView.findViewById(R.id.show_title);
            item.line = convertView.findViewById(R.id.line_normal);
        } else {
            item = (Item) convertView.getTag();
        }



        item.time.setText(datas.get(position).getTime());
        item.title.setText(datas.get(position).getTitle());

        //最后一项时，竖线不再显示
        if (position == datas.size() - 1) {
            item.line.setVisibility(View.GONE);
        }

        return convertView;
    }

    private class Item {
        TextView time, title;
        View line;
    }

时间轴之——–横向时间轴

上述的时间轴实现起来是比较容易的，就不再多说。这里想说一下的是横向的时间轴，京东和淘宝订单未结束时的物流状态就是一个横向的时间轴（类似于下图）

状态1

状态2

理解了上边所说的时间轴，这个也不难，只要将ListView做成横向的就可以了。

关于横向ListView的实现，网上有很多大神已经解决，所以很庆幸我们可以站在巨人的肩膀上前行。

  • MainActivity
private Context mContext;
    //一个横向的ListView
    private HorizontalListView listview;
    private TimeLineAdapter2 adapter;
    List<ItemBean> datas = new ArrayList<ItemBean>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        mContext = this;
        setContentView(R.layout.activity_time_line2);
        InitDatas();
        listview = (HorizontalListView) findViewById(R.id.list);
        adapter = new TimeLineAdapter2(mContext, datas);
        listview.setAdapter(adapter);
    }

    /**
     * 这里用虚拟数据实现，仅供参考
     */
    private void InitDatas() {
        // TODO Auto-generated method stub
        ItemBean item1 = new ItemBean();
        item1.setTitle("提交订单");
        item1.setTime("03-14 08:13");
        item1.setStatu(1);
        ItemBean item2 = new ItemBean();
        item2.setTitle("已支付");
        item2.setTime("03-14 22:32");
        item2.setStatu(1);
        ItemBean item3 = new ItemBean();
        item3.setTitle("商品出库");
        item3.setTime("03-15 00:33");
        item3.setStatu(0);
        ItemBean item4 = new ItemBean();
        item4.setTitle("已签收");
        item4.setTime("03-15 15:55");
        item4.setStatu(0);

        datas.add(item1);
        datas.add(item2);
        datas.add(item3);
        datas.add(item4);
    }
  • item_view2.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" >

    <TextView
        android:layout_alignRight="@id/image"
        android:id="@+id/show_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textSize="12dp" />



    <TextView
        android:layout_alignRight="@id/image"
        android:visibility="invisible"
        android:id="@+id/show_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:padding="5dp"
        android:textSize="12dp" />

    <View
        android:id="@+id/line_normal"
        android:layout_width="100dp"
        android:layout_height="3dp"
        android:layout_centerVertical="true"
        android:background="#A6A6A6" />
    <View
        android:visibility="gone"
        android:id="@+id/line_highlight"
        android:layout_width="100dp"
        android:layout_height="3dp"
        android:layout_centerVertical="true"
        android:background="@color/colorAccent" />

    <ImageView
        android:layout_toRightOf="@id/line_normal"
        android:id="@+id/image"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:layout_below="@id/show_title"
        android:src="@drawable/point2" />

</RelativeLayout>

为了方便便于理解，这里可以看一下上面这个xml文件实现的实际效果图

布局效果

  • Adapter的实现
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        Item item;
        if (convertView == null) {
            item = new Item();
            convertView = LayoutInflater.from(mContext).inflate(R.layout.item_view2, null);
            item.time = (TextView) convertView.findViewById(R.id.show_time);
            item.title = (TextView) convertView.findViewById(R.id.show_title);
            item.lineNorma = convertView.findViewById(R.id.line_normal);
            item.lineHiLight = convertView.findViewById(R.id.line_highlight);
            item.image = (ImageView) convertView.findViewById(R.id.image);
        } else {
            item = (Item) convertView.getTag();
        }


        //根据数据状态对视图做不同的操作
        if (datas.get(position).getStatu() == 1) {
            item.lineHiLight.setVisibility(View.VISIBLE);
            item.image.setImageResource(R.drawable.point1);
            item.time.setVisibility(View.VISIBLE);
        }

        item.time.setText(datas.get(position).getTime());
        item.title.setText(datas.get(position).getTitle());


        //这里在起始位置，就不显示“轴”了
        if (position == 0) {
            item.lineNorma.setVisibility(View.INVISIBLE);
            item.lineHiLight.setVisibility(View.INVISIBLE);
        }

        return convertView;
    }

    private class Item {
        TextView time, title;
        View lineNorma, lineHiLight;
        ImageView image;
    }

当然，实际开发中对时间轴的处理要比这里复杂的多。需按照规定的数据结构做相应的处理，同时也会因内容的差异导致整个视图发生不可预料的变化，这里只是一种思路。如果，哪位有更好想法，也可提出。

完整代码已上传至CSDN，感兴趣的同学可以下载
完整代码下载

阎楠
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
AndroidTimeLine(时间轴)绘制
Nothing
03-07 4191
实现方法 Recyclerview+ItemDecoration 重写ItemDecoration class TimeLineItemDecoration(var context: Context) : RecyclerView.ItemDecoration() { //上下左右的偏移量 var topOffset : Int = dp2px(context , 30) ...
Android自定义简单时间轴的实现
Damily的博客
08-07 2409
时间轴，顾名思义就是将发生的事件按照时间顺序罗列起来，给用户带来一种更加直观的体验。物流顺序就是一个时间轴其实，整个时间轴还是可以当做一个ListView处理，只是在Adapter中的布局要花点心思。好了，废话不说，看代码。 1、整个效果就是一个ListView,ListView的每个条目的布局如下<?xml version="1.0" encoding="utf-8"?> <LinearLayo
Android时间轴(Timeline)效果的实现(使用RecyclerView)
12-07
Android时间轴(Timeline)效果的实现(使用RecyclerView)代码示例，详细内容请参考：http://blog.csdn.net/u012939909/article/details/53510203
Android时间轴实现方式
03-14
Android时间轴的实现，仿京东淘宝效果
大佬教你Android如何实现时间线效果
最新发布
2401_84519960的博客
05-02 11
只要是程序员，不管是Java还是Android，如果不去阅读源码，只看API文档，那就只是停留于皮毛，这对我们知识体系的建立和完备以及实战技术的提升都是不利的。真正最能锻炼能力的便是直接去阅读源码，不仅限于阅读各大系统源码，还包括各种优秀的开源库。腾讯、字节跳动、阿里、百度等BAT大厂 2019-2021面试真题解析资料太多，全部展示会影响篇幅，暂时就先列举这些部分截图网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
Android 时间轴实现（RecycleView更高效）
魔法小黑屋
03-15 4482
之前实现时间轴的方式，总体来说就是通过ListView的方式。看到网友评论说到RecycleView，就尝试了一下，结果发现用RecycleView实现时间更加高效，尤其是在实现横向时间轴的时候。RecycleView 是什么？RecyclerView 是Android L版本中新添加的一个用来取代ListView的SDK，它的灵活性与可替代性比listview更好。在百度上一搜RecycleVie
【Android】时间轴
m0_50115641的博客
07-20 1241
Android实现时间轴 RecyclerView的应用
Android在页面绘制垂直的时间轴（简单版）
Rssqzqyp的博客
06-09 297
只需要用到recycleView，把它的item设置成下面的样子。然后把想加入的数据直接加进去接好了。
Android时间轴实现
01-23
关于时间轴的简单实现，帮助新人朋友们快速定位！
Android自定义时间轴的实现过程
08-31
总之，实现一个Android自定义时间轴的关键在于理解基础布局的构建以及自定义视图的绘制逻辑。通过这种方式，我们可以创建出符合应用风格的时间轴组件，提高用户界面的吸引力和功能性。同时，这个过程也能加深对...
android时间轴特效
12-24
android时间轴效果的demo，蛮好看的
Android实现列表时间轴
08-27
Android实现列表时间轴 Android实现列表时间轴是Android开发中的一种常见效果，通过在RecyclerView中添加ItemDecoration来实现列表时间轴的效果。在这个示例中，我们使用了DividerItemDecoration这个抽象类来实现...
Android自定义View实现垂直时间轴布局
08-31
"Android自定义View实现垂直时间轴布局" Android自定义View实现垂直时间轴布局是Android开发中的一种常见需求，时间轴布局可以将事件按照时间顺序罗列出来，给用户带来一种更加直观的体验。实现垂直时间轴布局需要...
Android节日时间轴,时间轴手机版-时间轴appv1.0.0 安卓版_永辉资源网
weixin_28809949的博客
05-29 374
时间轴app一款全新功能十分强大的手机生活记录应用服务平台， 这款软件能够更好的去帮助用户去记录每一天生活，还有图文搭配哦，可以随时随地记录每一天，有需求得朋友赶快前来下载体验吧！时间轴app怎么样？留光日记app是一款可以保留基本信息的软件，让你能痛快的找到自己需要备份的功能服务型，清晰的画面，还有一些图文混搭的记录工具，还能保护自己的隐私，让他们更好的管理每一天，这样使用起来更方便，一起来看看...
android ListView实现横向时光轴
MrZhao_PerfectCode的博客
05-28 1524
android ListView实现横向时光轴        时光轴最大的作用就是把过去的事物系统化、完整化、精确化。时间轴能够让用户更直观的看到，我的这一刻在做什么，那一刻做过什么，依据时间顺序，把一方面或多方面的时间足迹事件串联起来，形成相对完整的记录体系，再运用图文的形式呈现给用户;页面简单，表现形式特别，一直以来受到广大用户的欢迎。首先来看效果图：这是模拟一个横向的快递信息时光轴，接下来看...
android 时间轴！！!
ssssxy的博客
07-17 349
基本上隔断时间做的app就会用到时间轴，也没抽出空来整理，今天记录下，效果如下： 大布局只用一个RecyclerView就可以搞定，就不写了，主要是他的item，效果如下： 分左右两部分：左侧时间轴，但是要实现圆点和title居中对齐，我上面放了个竖线占位，下面是item全部布局： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/ap
android 时间轴
Anddroid_LanYan的专栏
11-24 1727
效果图： scrollview+listView 叠加嵌套实现 禁止滑动ListView :          import android.content.Context; import android.util.AttributeSet; import android.widget.ListView; public class MyListView extends Li
android自定义view，时间刻度尺，时间轴，视频轴
大力哥的博客
09-27 8862
TimeRuler 最新版见github地址(欢迎star)：https://github.com/huangdali/TimeRuler 时间轴、时间刻度尺 继承至TextureView，效率更高 已适配横竖屏 缩放功能（分钟、小时级别） 自动移动（自由决定开启与关闭移动） 时间轴中选择时间 实时设置当天时间 显示有效视频时间 超时（超过00:00:00,、23:59:59）自动处理 带拖动开
android 时间轴 listview,android 时间轴listview的UI界面实现
08-06
### 回答1： 实现 Android 时间轴 ListView 的 UI 界面可以分为以下几个步骤： 1. 定义布局文件：定义一个 ListView，并在 ListView 的 item 中添加需要展示的内容，如时间轴的线、时间轴上的圆圈、时间、内容等。 2. 定义数据源：定义一个数据源，存储需要展示的数据，如时间、内容等。 3. 创建 Adapter：创建一个 Adapter，将数据源中的数据绑定到 ListView 的 item 上。 4. 设置 ListView：将 Adapter 设置给 ListView，完成 ListView 的初始化。 以下是一个简单的实现代码： 1. 布局文件 timeline_item.xml ``` <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="20dp"> <!-- 时间轴的线 --> <View android:layout_width="1dp" android:layout_height="match_parent" android:layout_marginLeft="8dp" android:layout_marginRight="8dp" android:background="@color/colorAccent" /> <!-- 时间轴上的圆圈 --> <View android:id="@+id/circle" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/circle" android:gravity="center" /> <!-- 时间和内容 --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:orientation="vertical"> <TextView android:id="@+id/time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="2019-01-01" /> <TextView android:id="@+id/content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="这是内容" /> </LinearLayout> </LinearLayout> ``` 2. 数据源 TimelineItem.java ``` public class TimelineItem { private String time; private String content; public TimelineItem(String time, String content) { this.time = time; this.content = content; } public String getTime() { return time; } public void setTime(String time) { this.time = time; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } } ``` 3. Adapter TimelineAdapter.java ``` public class TimelineAdapter extends BaseAdapter { private Context context; private List<TimelineItem> itemList; public TimelineAdapter(Context context, List<TimelineItem> itemList) { this.context = context; this.itemList = itemList; } @Override public int getCount() { return itemList.size(); } @Override public Object getItem(int position) { return itemList.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder viewHolder; if (convertView == null) { convertView = LayoutInflater.from(context).inflate(R.layout.timeline_item, null); viewHolder = new ViewHolder(); viewHolder.time = convertView.findViewById(R.id.time); viewHolder.content = convertView.findViewById(R.id.content); convertView.setTag(viewHolder); } else { viewHolder = (ViewHolder) convertView.getTag(); } TimelineItem item = itemList.get(position); viewHolder.time.setText(item.getTime()); viewHolder.content.setText(item.getContent()); return convertView; } static class ViewHolder { TextView time; TextView content; } } ``` 4. Activity 实现 ``` public class MainActivity extends AppCompatActivity { private ListView listView; private TimelineAdapter adapter; private List<TimelineItem> itemList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initData(); } private void initView() { listView = findViewById(R.id.list_view); } private void initData() { itemList = new ArrayList<>(); itemList.add(new TimelineItem("2020-01-01", "这是内容1")); itemList.add(new TimelineItem("2020-02-01", "这是内容2")); itemList.add(new TimelineItem("2020-03-01", "这是内容3")); itemList.add(new TimelineItem("2020-04-01", "这是内容4")); itemList.add(new TimelineItem("2020-05-01", "这是内容5")); itemList.add(new TimelineItem("2020-06-01", "这是内容6")); itemList.add(new TimelineItem("2020-07-01", "这是内容7")); itemList.add(new TimelineItem("2020-08-01", "这是内容8")); itemList.add(new TimelineItem("2020-09-01", "这是内容9")); itemList.add(new TimelineItem("2020-10-01", "这是内容10")); adapter = new TimelineAdapter(this, itemList); listView.setAdapter(adapter); } } ``` 以上就是一个简单的 Android 时间轴 ListView 实现的过程。 ### 回答2： Android 时间轴 ListView 是一种使用 ListView 组件实现的时间轴效果的 UI 界面。它通常用于显示某个时间段内的事件或活动，并按照时间顺序排列。 要实现 Android 时间轴 ListView 的 UI 界面，可以按照以下步骤进行： 1. 创建一个布局文件，可以使用 LinearLayout 或 RelativeLayout 作为根布局。根据需要设置好背景颜色和布局方向。 2. 在布局文件中添加一个 ListView 组件，用于显示时间轴的事件列表。设置好宽度、高度和布局位置。 3. 创建一个自定义的适配器类，继承自 ArrayAdapter 或 BaseAdapter，并重写其中的方法。适配器负责将数据绑定到 ListView 上，每个列表项都会有一个时间和事件的相关信息。可以使用自定义的布局文件作为列表项的外观。 4. 在自定义适配器的 getView() 方法中，将数据绑定到列表项的布局文件上。可以使用 TextView 或自定义的 View 组件显示时间和事件信息。 5. 在主活动中，实例化自定义适配器，并将其设置为 ListView 的适配器。通过获取事件数据，将其传递给适配器的构造函数。 6. 最后，在主活动中设置 ListView 的点击事件监听器，以便在用户点击某个列表项时可以执行相应的操作。 通过以上步骤，我们就可以实现一个基本的 Android 时间轴 ListView 的 UI 界面。根据实际需求，还可以对列表项进行更多的样式和交互效果的定制。 ### 回答3： Android时间轴ListView是一种特殊的ListView控件，可以按照时间顺序展示数据，并且能够实现类似时间轴的效果。实现时间轴ListView的UI界面，可以按照以下步骤操作： 1. 导入相关依赖库：在项目的build.gradle文件中添加依赖库，例如： ``` implementation 'com.github.vipulasri:timelineview:1.1.0' ``` 2. 在布局文件中定义ListView控件，例如： ```xml <ListView android:id="@+id/timelineListView" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 3. 创建数据源：根据需求，创建一个数据源，每个数据项包含时间和内容等信息。 4. 自定义ListView的item布局：根据需求，设计并创建ListView的item布局文件，可以使用LinearLayout或RelativeLayout等容器布局，添加显示时间和内容的TextView控件。 5. 创建适配器：创建一个继承自ArrayAdapter或BaseAdapter的适配器类，重写getView()方法，将数据源中的数据绑定到ListView的item布局中。 6. 设置ListView的适配器：在Activity或Fragment中获取ListView对象，并将适配器与ListView关联，例如： ```java ListView listView = findViewById(R.id.timelineListView); listView.setAdapter(adapter); ``` 7. 实现时间轴效果：如果要实现时间轴效果，可以结合使用自定义控件TimelineView，通过设置其属性来控制item的样式，例如： ```java TimelineView timelineView = findViewById(R.id.timelineView); timelineView.setTimelineViewType(TimelineView.TYPE_START); ``` 通过以上步骤，我们可以实现一个简单的Android时间轴ListView的UI界面。根据具体需求，还可以进行样式定制以及添加其他功能，以满足项目的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阎楠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值