Android:玩轉(zhuǎn)訂單詳情三層數(shù)據(jù)只需要一層RecyclerView,并不需要嵌套View

大家好,我們又見面了,很高興證明我又有東西跟大家分享了上星期我寫了一篇關(guān)于[Android:玩轉(zhuǎn)購物車界面和邏輯只需要一層Recyclerview,一個(gè)二層for循環(huán)和三個(gè)屬性](http://www.lxweimin.com/p/6c3328f87fc9),反響比我想象中好很多,而且有幸被DiyCode轉(zhuǎn)發(fā)了,我自己本人也沒去投稿也是有一個(gè)朋友告訴我才知道這件事~不管怎么一個(gè)陰差陽錯(cuò),這也證明最近一段時(shí)間沒有白做項(xiàng)目。

有幸被DiyCode轉(zhuǎn)發(fā).png

連上實(shí)習(xí)出社會(huì)工作一年多了,相比于其他辦公室政治的職業(yè),真心覺得程序猿是比較和諧的,無論是誰只要是程序猿坐在一起都可以聊大半天,互相去分享經(jīng)驗(yàn)和學(xué)習(xí)。當(dāng)然這次來不是為了跟人炫耀什么,只是想來再次分享一些更勁爆的項(xiàng)目經(jīng)驗(yàn),也是關(guān)于商城的,不過這次是購物車之后的訂單列表。我們先看看界面需求:

界面需求.png

那接下來就分析一下我自己的理解和做法。
如果不想聽我啰嗦的人可以直接去下載源碼源碼下載鏈接
這樣看上去,我們就看到有三個(gè)不同的item。
1.一張大訂單的含有所有信息的item:

一張大訂單.png

2.一張大訂單里面分為一張張小訂單,每張小訂單就代表一間店鋪的所有商品,而且每間商鋪的第一個(gè)商品需要帶小訂單編號(hào)和商鋪名字的header:


含有商鋪名和訂單編號(hào)header的item.png

3.下面的就是小訂單內(nèi)非第一件商品的item(不含header):


小訂單內(nèi)非第一件商品.png

看完這個(gè)界面需求,相信很多人都跟我一樣,覺得用兩層嵌套的RecyclerView、隱藏和顯示商品的頭布局不就可以完成這樣的界面了?
確實(shí)做界面的時(shí)候我是這樣做的,但是當(dāng)把數(shù)據(jù)插入的時(shí)候,嵌套View的問題就無緣無故出現(xiàn)了:
兩層RecyclerView嵌套的效果.gif

可能gif圖大家還看不出問題。


兩層RecyclerView嵌套解析圖一.png

明明是一張大訂單里面有兩張不同商鋪的小訂單,總共有五件商品,兩張小訂單號(hào)分別尾數(shù)是133和601,但當(dāng)我們上拉RecyclerView然后再下拉回去的時(shí)候,我發(fā)現(xiàn):

兩層RecyclerView嵌套解析圖二.png

本來同屬于一張大訂單的尾數(shù)為133和601的兩張小訂單本來5件商品卻無緣無故消失了剩下一件商品~
得到這種結(jié)果令我非常詫異,無論我用什么樣的方式去驗(yàn)證這樣的嵌套R(shí)ecyclerView的做法,都是會(huì)出現(xiàn)這樣的情況。我的一位從我學(xué)習(xí)Android以來一直幫助我的師兄,他也去檢查過我寫的xml布局和adapter,也沒發(fā)現(xiàn)問題,但顯示的時(shí)候總會(huì)出現(xiàn)布局丟失的情況。
最后我發(fā)現(xiàn)這是一條死胡同,一個(gè)我無法解釋的bug。
<u>其實(shí)在用RecyclerView嵌套的時(shí)候我已經(jīng)發(fā)現(xiàn)很多無緣無故的顯示bug,所以我勸大家還是少用布局嵌套,不然就像我這樣作死~
</u>
既然這樣走嵌套R(shí)ecyclerView是一條死胡同,那只能用不嵌套的做法來做了,下面我就講講我的師兄,他給我的一個(gè)做法。確實(shí)在這里的做法和邏輯都是師兄寫的,我只是做了實(shí)現(xiàn)和筆錄~
看這種做法之前,我們先看看后臺(tái)返回來的數(shù)據(jù)是怎么樣的,才好思考往下怎么去做:

數(shù)據(jù)結(jié)構(gòu)一:大訂單.png
數(shù)據(jù)結(jié)構(gòu)二:大訂單里面有若干個(gè)商品.png
數(shù)據(jù)結(jié)構(gòu)三:每個(gè)商品信息含有該商品的商鋪信息,每間商鋪就是一張小訂單.png

我把以上三張圖的數(shù)據(jù)結(jié)構(gòu)簡化一下:

"result":{
        "大訂單List":[
            大訂單1{...},
            大訂單2 {
                大訂單的相關(guān)信息
                "商品List":[
                    "商品1"{
                          "商品信息"
                          "商鋪信息":{
                             商品所在商鋪的信息, 即小訂單信息
                        } 
                    },
                    "商品2"{...},
                    "商品3"{...},
                 ]
            },
            大訂單3{...}
        ]
    }

看上去,三層數(shù)據(jù)怎么把他用一層RecyclerView顯示出來呢?這里,不得不說師兄想的方法非常有意思。

他把這里的所有數(shù)據(jù)分成三種數(shù)據(jù)類型,并把RecyclerView分成三種不同的布局,對(duì)返回來的數(shù)據(jù)用不同的對(duì)象進(jìn)行排序并且把排好序的數(shù)據(jù)最后放進(jìn)一條List<Object>,讓adapter去判斷該顯示哪種布局

三種不同的對(duì)象.png

(1)GoodsOrderInfo 表示每個(gè)小訂單的頭部信息(訂單號(hào)、訂單狀態(tài)、店鋪名稱)

小訂單的頭部信息.png

(2)OrderGoodsItem 表示小訂單中的商品

小訂單中的商品.png

(3)OrderPayInfo 表示大訂單的支付信息(金額、訂單狀態(tài))

大訂單的支付信息(金額、訂單狀態(tài)).png

我們來看看代碼:

public class OrderDataHelper {
    /**
     * List<Object>有三種數(shù)據(jù)類型:
     * 1、GoodsOrderInfo 表示每個(gè)小訂單的頭部信息(訂單號(hào)、訂單狀態(tài)、店鋪名稱)
     * 2、OrderGoodsItem 表示小訂單中的商品
     * 3、OrderPayInfo 表示大訂單的支付信息(金額、訂單狀態(tài))
     * @param resultList
     * @return
     */
    public static List<Object> getDataAfterHandle(List<OrderSummary> resultList) {
        List<Object> dataList = new ArrayList<Object>();
        //遍歷每一張大訂單
        for (OrderSummary orderSummary : resultList) {
            //大訂單支付的金額和訂單狀態(tài)
            OrderPayInfo orderPayInfo = new OrderPayInfo();
            orderPayInfo.setTotalAmount(orderSummary.getTotalPrice());
            orderPayInfo.setStatus(orderSummary.getStatus());
            orderPayInfo.setId(orderSummary.getId());
            //小訂單商品
            List<OrderGoodsItem> orderDetailList = orderSummary.getOrderDetailList();
            Map<String, List<OrderGoodsItem>> orderGoodsMap = new HashMap<String, List<OrderGoodsItem>>();
            Map<String, GoodsOrderInfo> orderInfoMap = new HashMap<String, GoodsOrderInfo>();
            //遍歷每個(gè)大訂單里面的商品
            for (OrderGoodsItem orderGoodsItem : orderDetailList) {
                //獲取商品里面的商鋪信息的訂單號(hào)
                String orderCode = orderGoodsItem.getOrder().getOrderCode();
                orderGoodsItem.setOrderid(orderSummary.getId());
                //拿到相對(duì)應(yīng)訂單號(hào)的所有商品
                List<OrderGoodsItem> goodsList = orderGoodsMap.get(orderCode);
                //如果goodsList為空,則新建;
                //而且把這個(gè)訂單號(hào)的orderGoodsMap持有訂單的對(duì)象goodsList
                if (goodsList == null) {
                    goodsList = new ArrayList<>();
                    orderGoodsMap.put(orderCode, goodsList);
                }
                //goodsList添加商品的對(duì)象,因?yàn)閛rderGoodsMap
                //已經(jīng)持有這個(gè)訂單號(hào)的goodsList對(duì)象,所以不用重新put         
                goodsList.add(orderGoodsItem);
                //把小訂單的店鋪信息賦給GoodsOrderInfo對(duì)象,并加入到orderInfoMap
                GoodsOrderInfo orderInfo = orderInfoMap.get(orderCode);
                if(orderInfo == null) {
                    orderInfo = new GoodsOrderInfo();
                    orderInfo.setOrderCode(orderCode);
                    orderInfo.setShopName(orderGoodsItem.getOrder().getShopName());
                    orderInfo.setStatus(orderGoodsItem.getOrder().getStatus());
                    orderInfoMap.put(orderCode, orderInfo);
                }
            }
            //把所有數(shù)據(jù)按照頭部、內(nèi)容和尾部三個(gè)部分排序好
            Set<String> keySet = orderGoodsMap.keySet();
            for(String orderCode : keySet) {
                dataList.add(orderInfoMap.get(orderCode));
                dataList.addAll(orderGoodsMap.get(orderCode));
            }
            dataList.add(orderPayInfo);
        }
        return dataList;
    }
}

代碼很簡單,只是一個(gè)簡單的工具類,就把后臺(tái)返回來的三層數(shù)據(jù)分為了一層,一條已經(jīng)排好序的List<Object>。
然后我們就去看看簡單的adapter數(shù)據(jù)顯示:

變量的聲明.png

下面就是拿到數(shù)據(jù)之后的使用:


使用.png

看看adapter怎么寫:

類型.png
根據(jù)不同的對(duì)象返回要顯示相應(yīng)布局的參數(shù).png
根據(jù)不同的參數(shù)顯示相應(yīng)的ViewHolder.png
根據(jù)不同的布局做相關(guān)的處理.png

三種布局最后拼接成了理想的界面.png

是不是很簡單?其實(shí)師兄的這種做法同時(shí)也利用了RecyclerView可以顯示返回不同的布局,然后通過三種不同的布局拼接來完成一層RecyclerView控制三層數(shù)據(jù)的相關(guān)做法,而且這樣做并不會(huì)用到該死的嵌套R(shí)ecyclerView,不會(huì)有那該死的不知道拿來的顯示bug,我個(gè)人覺得真的很贊!你們覺得如何?
感興趣的同學(xué)可以下載源碼去慢慢研究,有不同做法的同學(xué)可以提出來~
源碼下載鏈接

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,533評(píng)論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,055評(píng)論 3 414
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 175,365評(píng)論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,561評(píng)論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,346評(píng)論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,889評(píng)論 1 321
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,978評(píng)論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,118評(píng)論 0 286
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,637評(píng)論 1 333
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,558評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,739評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,246評(píng)論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 43,980評(píng)論 3 346
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,362評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,619評(píng)論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,347評(píng)論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,702評(píng)論 2 370

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