三分鐘實(shí)現(xiàn)物流配送頁(yè)面(時(shí)間軸效果)

物流配送頁(yè)面。主要使用RecycleView實(shí)現(xiàn)挖息。通過(guò)判斷將條目的第一條進(jìn)行特殊處理掉丽。日后復(fù)制粘貼備用签孔。效果圖如下:

查看物流

可以通過(guò)各個(gè)view的相對(duì)位置來(lái)實(shí)現(xiàn)啊,比如那一條豎線(xiàn)可以用imageview來(lái)實(shí)現(xiàn),那個(gè)圓點(diǎn)也可以用imageview實(shí)現(xiàn)啊,唯一不同的就是豎線(xiàn)的view是穿過(guò)灰色的圓view的,而position為0的豎線(xiàn)是不穿過(guò)藍(lán)色的圓view的,這個(gè)也有辦法搞定,在adapter里面單獨(dú)處理,設(shè)置他們的相對(duì)位置!

1. 先做兩個(gè)shape圓。

一個(gè)灰色的一個(gè)紅色的华临。(也可以使用圖片資源)
紅色圓 logistics_shape_circle_red:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#ff4143" />
    <stroke
        android:width="2dp"
        android:color="#ff7471" />
</shape>

灰色圓 shape_circle_logistics_gray:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#dddddd" />
</shape>

2. 設(shè)置每個(gè)條目的布局芯杀。

logistics_recycle_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="wrap_content"
    android:orientation="horizontal">

    <!--左邊 時(shí)間-->
    <TextView
        android:id="@+id/tv_time"
        android:layout_width="85dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="14dp"
        android:gravity="center"
        android:lines="2"
        android:text="2016-10-12 08:02:18"
        android:textColor="@color/gray9"
        android:textSize="16sp" />
    <!--中間 時(shí)間軸-->
    <RelativeLayout
        android:id="@+id/rl_left"
        android:layout_width="35dp"
        android:layout_height="86dp">

        <ImageView
            android:id="@+id/iv_status"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_centerInParent="true" />

        <ImageView
            android:id="@+id/iv_line"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_below="@id/iv_status"
            android:layout_centerInParent="true"
            android:src="#dddddd" />
    </RelativeLayout>

    <!--右邊 信息-->
    <TextView
        android:id="@+id/tv_status"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center_vertical"
        android:layout_marginRight="15dp"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@id/rl_left"
        android:autoLink="email|phone|web"
        android:text="正在派送途中,請(qǐng)您準(zhǔn)備簽收(派件人:張小建,電話(huà):18513394441)"
        android:textColor="@color/gray9" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_below="@id/tv_time"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp"
        android:layout_toRightOf="@id/rl_left"
        android:background="#9b9b9b"
        android:visibility="gone" />

</LinearLayout>

3. Adapter代碼

LogisticsAdapter.xml

public class LogisticsAdapter0 extends RecyclerView.Adapter<LogisticsAdapter0.LogisticsAdapterHolder> {

    private Context context;
    private LayoutInflater mLayoutInflater;
    private LogisticsJson bean;
    
    public LogisticsAdapter0(Context context, LogisticsJson bean) {
        this.context = context;
        this.mLayoutInflater = LayoutInflater.from(context);
        this.bean = bean;
    }

    @Override
    public int getItemCount() {
        return bean.getData().getList().size();
    }

    @Override
    public LogisticsAdapter0.LogisticsAdapterHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new LogisticsAdapter0.LogisticsAdapterHolder(mLayoutInflater.inflate(R.layout.logistics_recycle_item, parent, false));
    }

    @Override
    public void onBindViewHolder(LogisticsAdapter0.LogisticsAdapterHolder holder, int position) {

        try {
            holder.tv_status.setText(bean.getData().getList().get(position).getContext());//訂單狀態(tài)
            holder.tv_time.setText(bean.getData().getList().get(position).getTime());//時(shí)間

            if (position == 0) {
                //紅色的圓點(diǎn)
                holder.iv_status.setImageResource(R.drawable.logistics_shape_circle_red);
                RelativeLayout.LayoutParams pointParams = new RelativeLayout.LayoutParams(DensityUtil.dp2px(context, 20), DensityUtil.dp2px(context, 20));
                pointParams.addRule(RelativeLayout.CENTER_IN_PARENT);
                holder.iv_status.setLayoutParams(pointParams);

                holder.tv_time.setTextColor(context.getResources().getColor(R.color.newPrimary));
                holder.tv_status.setTextColor(context.getResources().getColor(R.color.newPrimary));

                //灰色的豎線(xiàn)
                RelativeLayout.LayoutParams lineParams = new RelativeLayout.LayoutParams(DensityUtil.dp2px(context, 1), ViewGroup.LayoutParams.MATCH_PARENT);
                lineParams.addRule(RelativeLayout.BELOW, R.id.iv_status);//讓直線(xiàn)置于圓點(diǎn)下面
                lineParams.addRule(RelativeLayout.CENTER_IN_PARENT);
                holder.iv_line.setLayoutParams(lineParams);

            } else {
//                holder.iv_status.setBackgroundResource(R.mipmap.ic_logistics_bottom);
                holder.iv_status.setImageResource(R.drawable.logistics_shape_circle_gray);
                RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(DensityUtil.dp2px(context, 10), DensityUtil.dp2px(context, 10));
                lp.addRule(RelativeLayout.CENTER_IN_PARENT);

                holder.iv_status.setLayoutParams(lp);

                holder.tv_time.setTextColor(context.getResources().getColor(R.color.textColor_9b));
                holder.tv_status.setTextColor(context.getResources().getColor(R.color.textColor_9b));

                //灰色的豎線(xiàn)
                RelativeLayout.LayoutParams lineParams = new RelativeLayout.LayoutParams(DensityUtil.dp2px(context, 1), ViewGroup.LayoutParams.MATCH_PARENT);
//                lineParams.addRule(RelativeLayout.BELOW, R.id.iv_status);//讓直線(xiàn)置于圓點(diǎn)下面
                lineParams.addRule(RelativeLayout.CENTER_IN_PARENT);
                holder.iv_line.setLayoutParams(lineParams);

            }

        } catch (Exception e) {
            e.printStackTrace();
        }

    }

    //自定義的ViewHolder,持有每個(gè)Item的的所有界面元素
    public static class LogisticsAdapterHolder extends RecyclerView.ViewHolder {

        ImageView iv_status;
        TextView tv_status;
        TextView tv_time;
        ImageView iv_line;

        LogisticsAdapterHolder(View view) {
            super(view);
            iv_line = (ImageView) view.findViewById(R.id.iv_line);
            iv_status = (ImageView) view.findViewById(R.id.iv_status);
            tv_status = (TextView) view.findViewById(R.id.tv_status);
            tv_time = (TextView) view.findViewById(R.id.tv_time);

        }
    }
}

4. 最后雅潭,Activity里面設(shè)置一下

LogisticsJson logisticsJson = new Gson().fromJson(json, LogisticsJson.class);
LogisticsAdapter logisticsAdapter = new LogisticsAdapter(LogisticsActivity.this, logisticsJson);
rvLogisticsDetail.setAdapter(logisticsAdapter);

再給一個(gè)測(cè)試的json瘪匿,自己生成Gson 的bean類(lèi)吧!

{
    "code": 1,
    "message": "Success",
    "data": {
        "id": "1",
        "state": "3",
        "num": "71265042088396",
        "time": "2018-03-11 12:55:09",
        "com_name": "匯通",
        "list": [
            {
                "time": "2018-03-02 08:46:40",
                "context": "秦皇島市|秦皇島市【秦皇島市區(qū)五部】寻馏,八棟西霞超市 已簽收"
            }棋弥, {
                "time": "2018-03-02 08:46:40",
                "context": "秦皇島市|秦皇島市【秦皇島市區(qū)五部】,八棟西霞超市 已簽收"
            }
        ]
    }
}

大功告成诚欠!復(fù)制粘貼大法好~~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末顽染,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子轰绵,更是在濱河造成了極大的恐慌粉寞,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,826評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件左腔,死亡現(xiàn)場(chǎng)離奇詭異唧垦,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)液样,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)振亮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人鞭莽,你說(shuō)我怎么就攤上這事坊秸。” “怎么了澎怒?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,234評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵褒搔,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng)星瘾,這世上最難降的妖魔是什么走孽? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,562評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮琳状,結(jié)果婚禮上融求,老公的妹妹穿的比我還像新娘。我一直安慰自己算撮,他們只是感情好生宛,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著肮柜,像睡著了一般陷舅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上审洞,一...
    開(kāi)封第一講書(shū)人閱讀 51,482評(píng)論 1 302
  • 那天莱睁,我揣著相機(jī)與錄音,去河邊找鬼芒澜。 笑死仰剿,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的痴晦。 我是一名探鬼主播南吮,決...
    沈念sama閱讀 40,271評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼誊酌!你這毒婦竟也來(lái)了部凑?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,166評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤碧浊,失蹤者是張志新(化名)和其女友劉穎涂邀,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體箱锐,經(jīng)...
    沈念sama閱讀 45,608評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡比勉,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了驹止。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片浩聋。...
    茶點(diǎn)故事閱讀 39,926評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖幢哨,靈堂內(nèi)的尸體忽然破棺而出赡勘,到底是詐尸還是另有隱情嫂便,我是刑警寧澤捞镰,帶...
    沈念sama閱讀 35,644評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響岸售,放射性物質(zhì)發(fā)生泄漏践樱。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評(píng)論 3 329
  • 文/蒙蒙 一凸丸、第九天 我趴在偏房一處隱蔽的房頂上張望拷邢。 院中可真熱鬧,春花似錦屎慢、人聲如沸瞭稼。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,866評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)环肘。三九已至,卻和暖如春集灌,著一層夾襖步出監(jiān)牢的瞬間悔雹,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,991評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工欣喧, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留腌零,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,063評(píng)論 3 370
  • 正文 我出身青樓唆阿,卻偏偏與公主長(zhǎng)得像益涧,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子驯鳖,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,117評(píng)論 25 707
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理饰躲,服務(wù)發(fā)現(xiàn),斷路器臼隔,智...
    卡卡羅2017閱讀 134,656評(píng)論 18 139
  • 可進(jìn)入我的博客查看原文嘹裂。 Raft 算法是可以用來(lái)替代 Paxos 算法的分布式一致性算法,而且 raft 算法比...
    Jeffbond閱讀 13,328評(píng)論 4 91
  • 上周六摔握,帶孩子洗好澡準(zhǔn)備講個(gè)晚安故事就睡覺(jué)了寄狼,突然接到公公的電話(huà),說(shuō)老公表哥出了車(chē)禍氨淌,正在醫(yī)院搶救泊愧,讓我們趕緊過(guò)去...
    家燕閱讀 271評(píng)論 0 0
  • 嘉賓介紹 大家好,首先自我介紹一下盛正,我是360 web平臺(tái)-基礎(chǔ)架構(gòu)組的宋昭删咱,負(fù)責(zé)大容量類(lèi)redis存儲(chǔ)pika的...
    dd92c2f421e3閱讀 73,346評(píng)論 5 26