关于时间轴效果的全文解析

原创 2015年07月10日 11:17:19

先上一个效果图,今天才知道这个东西叫时间轴效果,还是从群里知道的。很多人在问这个怎么实现的,我能说其实这个很简单么?就是一个普通的listview,没什么特别,虽然这样简单还是决定写个博文记录下,让那些望而却步的人明白这东西原来这么简单。

通过这个可以自己改成相似的效果,以下对代码进行逻辑上的说明再写代码。

这个效果一看相信就知道要用listview来实现,再进一步很明显每一个事件就是一个item。所以自然而然就按普通listview方式来处理,先写一个listview放在主页面,然后写item布局,获取到要展示的数据后再设置adapter就完工。别告诉我你平时写listview不是这样的流程。分析完毕,简单吧,下面开始写点代码

先来一个主页面的布局:list_history.xml(所有values配置文件里的内容请忽略)

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">


    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="@color/title_bg"
            android:orientation="horizontal">

        <ImageButton
                android:id="@+id/queue_back_btn"
                android:layout_gravity="center"
                android:layout_marginLeft="10dp"
                android:layout_width="30dp"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/back"/>

        <TextView
                style="@style/title"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/title3"/>

        <TextView android:layout_width="23dp"
                  android:layout_height="match_parent"/>
    </LinearLayout>

    <FrameLayout
            android:id="@+id/fl_history"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <com.handmark.pulltorefresh.library.PullToRefreshListView
                android:id="@+id/pull_refresh_list"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:cacheColorHint="#00000000"
                android:divider="@android:color/white"
                android:dividerHeight="0dp"
                android:fadingEdge="none"
                android:fastScrollEnabled="false"
                android:footerDividersEnabled="false"
                android:headerDividersEnabled="false"
                android:smoothScrollbar="true"/>
    </FrameLayout>
</LinearLayout></span>
这个布局用了一个FrameLayout 是因为当没有数据的时候,我要显示一个“没有数据”的View.主要看PullToRefreshListView.用的这个好下拉刷新和上拉分页加载。要说明的是设置
<pre name="code" class="html"><span style="font-size:18px;">                android:cacheColorHint="#00000000"
                android:divider="@android:color/white"</span>
<span style="font-size:18px;">                android:dividerHeight="0dp"</span>

不需要默认的分隔符。

然后看看item里的布局。item_detail.xml
<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <LinearLayout
            android:orientation="vertical"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        <TextView
                android:id="@+id/timetxt"
                android:gravity="center_horizontal"
                android:text="@string/history_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

    </LinearLayout>
    <ImageView
            android:id="@+id/history_spr_img"
            android:layout_gravity="center"
            android:src="@drawable/history_list_start"
            android:scaleType="fitCenter"
            android:layout_width="wrap_content"
            android:layout_height="105dp"/>
    <RelativeLayout
            android:id="@+id/rl_info"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <com.ever.ezwait.widget.MarqueeTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/shop_name"
                style="@style/queue_title"
                android:id="@+id/history_shop_name"/>

        <TextView
                android:id="@+id/queue_code"
                android:layout_below="@id/history_shop_name"
                android:ellipsize="end"
                style="@style/queue_num"
                android:textSize="@dimen/content"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        <com.ever.ezwait.widget.MarqueeTextView
                android:id="@+id/history_queue_name"
                android:layout_marginTop="5dp"
                android:textSize="@dimen/content"
                android:layout_below="@id/queue_code"
                android:text="@string/queue_content"
                android:layout_width="120dp"
                android:layout_height="wrap_content"/>

        <TextView
                android:id="@+id/history_wait_txt"
                android:layout_marginLeft="0dp"
                android:layout_alignBaseline="@id/history_queue_name"
                android:layout_toRightOf="@id/history_queue_name"
                android:text="@string/history_wait_txt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        <ImageView
                android:id="@+id/history_queue_flag"
                android:src="@drawable/wait_flag"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_alignTop="@+id/history_queue_name"
                android:layout_toRightOf="@id/history_wait_txt"/>

        <TextView
                android:id="@+id/history_queue_tip"
                android:layout_marginTop="5dp"
                android:layout_below="@id/history_queue_name"
                android:text="@string/queue_tip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        <ImageView
                android:id="@+id/history_btn"

                android:background="#00000000"
                android:layout_marginRight="20dp"
                android:src="@drawable/ahead"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_alignParentRight="true"/>

        <TextView
                android:layout_alignParentBottom="true"
                android:background="@drawable/shape_line"
                android:layout_width="match_parent"
                android:layout_height="2dp"/>
    </RelativeLayout>
</LinearLayout></span>
看代码太累,效果图如下:

明显就是整体数据中的一个的事件,布局也不难,思路和一个普通的listview写法没什么两样。这里没什么说的。
布局写好了,就是加载数据了。
初始化布局文件中的组件:
<span style="font-size:18px;"> pullToRefreshListView.setOnRefreshListener(new PullToRefreshBase.OnRefreshListener<ListView>() {
            @Override
            public void onRefresh(PullToRefreshBase<ListView> refreshView) {
                String label = DateUtils.formatDateTime(getApplicationContext(), System.currentTimeMillis(), DateUtils.FORMAT_SHOW_TIME | DateUtils.FORMAT_SHOW_DATE | DateUtils.FORMAT_ABBREV_ALL);
                refreshView.getLoadingLayoutProxy().setLastUpdatedLabel(label);
                if (pullToRefreshListView.isHeaderShow()) {
                    getData(0, false);
                } else if (pullToRefreshListView.isFooterShow()) {
                    Log.i(Constants.TAG, "是否完成所有数据:" + isFinished);
                    getData(myQueueList.size(), true);
                }
            }
        });

        //设置上/下拉刷新模式
        pullToRefreshListView.setMode(PullToRefreshBase.Mode.BOTH);
        getData(0, false);</span>

其中getData(int start, boolean isAppend)主要用来控制分布的数据加载,数据问题不写,这不是主要的问题。设置一个适配器,QueryListAdapter(Context context, List<MyQueue> datas);构造器相信大部分是这样写的,传入要显示的数据集合。然后在getView控制各种想要的显示效果,比如效果图中显示“已取消”其实还有很多其他的状态,比如下图


还有“已通知”、“已完成”后面显示的图标也是不一样的。这就需要在getView方法里处理。另外有些效果,比如时间轴上的长度是不一致或者颜色不同等,可以通过postion或某一个标志来判断,然后决定显示哪一种效果,到此结束,没有什么代码上的难度,当然有些复杂的布局可能不是这么简单,但这是一个很基本的思路,大神勿喷。




版权声明:本文为博主原创文章,未经博主欢迎转载,记得加上本文出处哟~~

Clutter学习(九):Timeline的时间和帧触发

  学习资料来源:Using Timelines,Markers,Examples  使用方法如下:一、创建一个CLutterTimeline的类型,clutter_timeline_new()二、设...

Android时间轴效果的实现

最近项目需要用到时间轴的效果,网上看了几个例子,和想要实现的效果也不尽相同,下面将我的实现方法和思路说一下。首先看下效果图: 数据是随便填的,显得有点乱,但是不影响效果。实现方面主要是用Lis...

类似时间轴的效果

  • 2014年11月15日 21:26
  • 596KB
  • 下载

Android时间轴效果

  • 2017年03月29日 09:56
  • 24.14MB
  • 下载

Android时间轴效果领回家

前端时间因为家里有人生病,于是做了一个提醒吃药提醒复诊的小工具,看看后面有没有时间再整理优化下,分享给有需要的人 实现效果 浏览效果 长按删除 点击图片看全屏大图 添加记录 总体思...
  • hangout
  • hangout
  • 2017年04月30日 19:14
  • 161

仿呱呱购物流时间轴效果(swift)

仿呱呱购物流时间轴效果(swift):在呱呱购App二期的优化过程中,发现物流信息详情界面显示的不太友好,由此,修改了部分代码使cell实现自适应,完美显示具体的物流轨迹。我使用了快递鸟的api,将这...

时间轴效果

  • 2017年07月11日 20:19
  • 6KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于时间轴效果的全文解析
举报原因:
原因补充:

(最多只允许输入30个字)