本發(fā)明涉及計(jì)算機(jī)技術(shù)領(lǐng)域，尤其是涉及一種android商品列表的展示方法及系統(tǒng)。

背景技術(shù)：

android應(yīng)用展示商品列表是消費(fèi)者瀏覽商品，選購(gòu)商品的重要渠道。商品列表的用戶體驗(yàn)至關(guān)重要，可影響到用戶是否愿意使用該產(chǎn)品。但商品列表的商品種類繁多，樣式各一，再加上還需要展示商家的一些廣告，使得整個(gè)界面十分復(fù)雜。用戶在瀏覽商品的時(shí)候，就會(huì)出現(xiàn)卡頓，造成用戶流失。廣告也十分重要，是做活動(dòng)的入口，廣告由于需要配合一些活動(dòng)必須做到靈活配置，靈活顯示，不能每次都依賴于客戶端添加新樣式。

現(xiàn)在有的支持商品列表的技術(shù)方案有：(1)android原生的listview控件，自定義樣式類型(一般是原生控件組合的布局)，通過(guò)adapter(一種給listview提供樣式的組件)綁定數(shù)據(jù)，然后展示所有商品樣式。(2)使用html5的網(wǎng)頁(yè)展示，通過(guò)android的webview展示網(wǎng)頁(yè)類型的商品列表。

現(xiàn)在方案的缺陷：一是使用android原生listview控件，若是商品類型太多，會(huì)造成listview的復(fù)用功能弱化，加上廣告占用很多類型，而且自定義的樣式是由原生控件組成，使得布局計(jì)算非常復(fù)雜并且界面過(guò)渡繪制超過(guò)4x，最終導(dǎo)致滑動(dòng)瀏覽商品時(shí)卡頓嚴(yán)重。二是使用html5的頁(yè)面，本身由于是網(wǎng)頁(yè)，網(wǎng)絡(luò)傳輸數(shù)據(jù)量大，用戶看到頁(yè)面就會(huì)有明顯延遲，又因?yàn)闀?huì)解析整個(gè)html，然后再渲染webview，用戶體驗(yàn)非常差。

view：android圖形繪制抽象組件，所有需要繪制的圖形需要繼承該組件。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明的目的在于克服上述技術(shù)不足，提出一種android商品列表的展示方法及系統(tǒng)，解決現(xiàn)有技術(shù)中商品列表的布局計(jì)算復(fù)雜，瀏覽卡頓嚴(yán)重的技術(shù)問(wèn)題。

為達(dá)到上述技術(shù)目的，本發(fā)明的技術(shù)方案提供一種android商品列表的展示方法，包括：

s1、自定義一樣式提供組件adapter；

s2、定義一數(shù)據(jù)結(jié)構(gòu)的規(guī)則；

s3、后端按照s2定義的數(shù)據(jù)結(jié)構(gòu)的規(guī)則，將商品列表的布局?jǐn)?shù)據(jù)傳遞給前端；

s4、前端接收數(shù)據(jù)后將數(shù)據(jù)傳遞給adapter，adapter解析接收的數(shù)據(jù)，并計(jì)算各樣式在屏幕顯示的間距、位置；

s5、根據(jù)adapter計(jì)算的結(jié)果，使用原生繪圖控件進(jìn)行繪圖展示。

本發(fā)明還提供一種android商品列表的展示系統(tǒng)，包括：

樣式提供組件定義模塊：自定義一樣式提供組件adapter；

規(guī)則定義模塊：定義一數(shù)據(jù)結(jié)構(gòu)的規(guī)則；

數(shù)據(jù)傳遞模塊：后端按照規(guī)則定義模塊定義的數(shù)據(jù)結(jié)構(gòu)的規(guī)則，將商品列表的布局?jǐn)?shù)據(jù)傳遞給前端；

計(jì)算模塊：前端接收數(shù)據(jù)后將數(shù)據(jù)傳遞給adapter，adapter解析接收的數(shù)據(jù)，并計(jì)算各樣式在屏幕顯示的間距、位置；

繪圖顯示模塊：根據(jù)adapter計(jì)算的結(jié)果，使用原生繪圖控件進(jìn)行繪圖展示。

與現(xiàn)有技術(shù)相比，本發(fā)明的有益效果包括：摒棄android提供的系統(tǒng)自帶基礎(chǔ)控件，通過(guò)使用原生繪圖控件繪制商品流和廣告，簡(jiǎn)化復(fù)雜布局計(jì)算、快速渲染圖形，從而提高繪圖性能，用戶瀏覽時(shí)不卡頓、展示快速；通過(guò)自定義一種格式化的數(shù)據(jù)結(jié)構(gòu)來(lái)支持任意樣式的商品流和廣告，客戶端不用做任何變更，只要服務(wù)端配置希望展示的界面效果的數(shù)據(jù)，前端顯示屏幕就會(huì)如實(shí)展示，用戶不需要更新應(yīng)用，大大提高了靈活性，以及多樣性。

附圖說(shuō)明

圖1是本發(fā)明提供的一種android商品列表的展示方法流程圖；

圖2是本發(fā)明提供的一種android商品列表的展示系統(tǒng)結(jié)構(gòu)框圖。

附圖中：1、android商品列表的展示系統(tǒng)，11、樣式提供組件定義模塊，12、規(guī)則定義模塊，13、數(shù)據(jù)傳遞模塊，14、計(jì)算模塊，15、繪圖顯示模塊。

具體實(shí)施方式

為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合附圖及實(shí)施例，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說(shuō)明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。

本發(fā)明提供了一種android商品列表的展示方法，其中，包括：

s1、自定義一樣式提供組件adapter；

s2、定義一數(shù)據(jù)結(jié)構(gòu)的規(guī)則；

s3、后端按照s2定義的數(shù)據(jù)結(jié)構(gòu)的規(guī)則，將商品列表的布局?jǐn)?shù)據(jù)傳遞給前端；

s4、前端接收數(shù)據(jù)后將數(shù)據(jù)傳遞給adapter，adapter解析接收的數(shù)據(jù)，并計(jì)算各樣式在屏幕顯示的間距、位置；

s5、根據(jù)adapter計(jì)算的結(jié)果，使用原生繪圖控件進(jìn)行繪圖展示。

本發(fā)明所述的android商品列表的展示方法，步驟s1中：

adapter預(yù)先設(shè)置需要的樣式控件，adapter預(yù)先設(shè)置需要的樣式控件繼承自view，用于解析接收的數(shù)據(jù)以及與繪圖控件配合進(jìn)行繪圖顯示。

adapter預(yù)先設(shè)置需要的樣式控件需要支持的所有廣告類型以及商品流類型,以應(yīng)對(duì)多變的活動(dòng)頁(yè)面，以及多變的商品流展示效果。

本發(fā)明所述的android商品列表的展示方法，步驟s2中：

規(guī)則1：定義數(shù)據(jù)結(jié)構(gòu)為行嵌套列，數(shù)據(jù)結(jié)構(gòu)的行是一個(gè)廣告結(jié)構(gòu)單元，定義數(shù)據(jù)結(jié)構(gòu)的列是一個(gè)控件組合單元，那么，一個(gè)廣告由多個(gè)列的單元控件組合而成；

規(guī)則2：一數(shù)組包含多個(gè)行，使得廣告數(shù)量可以沒(méi)有限制；

規(guī)則3：后端計(jì)算每個(gè)廣告單元的寬高并傳遞前端，前端根據(jù)計(jì)算結(jié)果進(jìn)行寬高限制顯示，極大的方便了配置的靈活性，可適配不同大小的圖片；

規(guī)則4：間距字段由后端傳遞給前端，間距字段控制前端每行之間的間距；

規(guī)則5：分割線字段由后端傳遞給前端，分割線字段控制廣告頂部或者內(nèi)部是否需要分割線分割廣告，這極大的提高了ui展示效果，通常情況需要在圖片上由美工畫(huà)上分割線，由于android端屏幕尺寸各一，會(huì)造成分割線顯示模糊，粗細(xì)不正確的情況發(fā)生，而原生繪制的分割線，展示清晰，無(wú)模糊現(xiàn)象出現(xiàn)；

規(guī)則6：后端的倒計(jì)時(shí)結(jié)構(gòu)傳遞數(shù)據(jù)給前端，倒計(jì)時(shí)結(jié)構(gòu)控制前端的倒計(jì)時(shí)顯示。

使用規(guī)則而非固定數(shù)據(jù)約束ui展示極大的方便了客戶端控件復(fù)用率，僅提供基礎(chǔ)組件，所有復(fù)雜展示效果通過(guò)規(guī)則來(lái)確定，這樣使得多變，靈活的頁(yè)面ui展示成為可能。

本發(fā)明所述的android商品列表的展示方法，步驟s5中：

重寫(xiě)view的ondraw方法，使用方法drawxxx，在原生繪圖控件canvas上繪圖。

一般技術(shù)封裝了太多復(fù)雜的情況，是一種通用策略，而原生繪制是針對(duì)特定條件下進(jìn)行的繪制，所以原生繪制的性能是大大高于一般技術(shù)的，主要原理是：避免了不必要的位置計(jì)算和圖形渲染次數(shù)，原生繪制所帶來(lái)的效果就是應(yīng)用的流暢性，不帶一點(diǎn)卡頓。

本發(fā)明所述的android商品列表的展示方法，步驟s5中：

通過(guò)recyclerview來(lái)進(jìn)行繪圖后商品列表的頁(yè)面展示，相比listview界面更為流暢。

本發(fā)明還提供一種android商品列表的展示系統(tǒng)1，包括：

樣式提供組件定義模塊11：自定義一樣式提供組件adapter；

規(guī)則定義模塊12：定義一數(shù)據(jù)結(jié)構(gòu)的規(guī)則；

數(shù)據(jù)傳遞模塊13：后端按照規(guī)則定義模塊定義的數(shù)據(jù)結(jié)構(gòu)的規(guī)則，將商品列表的布局?jǐn)?shù)據(jù)傳遞給前端；

計(jì)算模塊14：前端接收數(shù)據(jù)后將數(shù)據(jù)傳遞給adapter，adapter解析接收的數(shù)據(jù)，并計(jì)算各樣式在屏幕顯示的間距、位置；

繪圖顯示模塊15：根據(jù)adapter計(jì)算的結(jié)果，使用原生繪圖控件進(jìn)行繪圖展示。

本發(fā)明所述的android商品列表的展示系統(tǒng)1，樣式提供組件定義模塊11中：

adapter預(yù)先設(shè)置需要的樣式控件，adapter預(yù)先設(shè)置需要的樣式控件繼承自view，用于解析接收的數(shù)據(jù)以及與繪圖控件配合進(jìn)行繪圖顯示。

本發(fā)明所述的android商品列表的展示系統(tǒng)1，規(guī)則定義模塊12中：

定義數(shù)據(jù)結(jié)構(gòu)為行嵌套列，數(shù)據(jù)結(jié)構(gòu)的行是一個(gè)廣告結(jié)構(gòu)單元，定義數(shù)據(jù)結(jié)構(gòu)的列是一個(gè)控件組合單元，一數(shù)組包含多個(gè)行，后端計(jì)算每個(gè)廣告單元的寬高并傳遞前端，前端根據(jù)計(jì)算結(jié)果進(jìn)行寬高限制顯示，間距字段由后端傳遞給前端，間距字段控制前端每行之間的間距，分割線字段由后端傳遞給前端，分割線字段控制前端的分割線顯示，后端的倒計(jì)時(shí)結(jié)構(gòu)傳遞數(shù)據(jù)給前端，倒計(jì)時(shí)結(jié)構(gòu)控制前端的倒計(jì)時(shí)顯示。

本發(fā)明所述的android商品列表的展示系統(tǒng)1，繪圖顯示模塊15中：

重寫(xiě)view的ondraw方法，使用方法drawxxx，在原生繪圖控件canvas上繪圖。

本發(fā)明所述的android商品列表的展示系統(tǒng)1，繪圖顯示模塊15中：

通過(guò)recyclerview來(lái)進(jìn)行繪圖后商品列表的頁(yè)面展示。

與現(xiàn)有技術(shù)相比，本發(fā)明的有益效果包括：摒棄android提供的系統(tǒng)自帶基礎(chǔ)控件，通過(guò)使用原生繪圖控件繪制商品流和廣告，簡(jiǎn)化復(fù)雜布局計(jì)算、快速渲染圖形，從而提高繪圖性能，用戶瀏覽時(shí)不卡頓、展示快速；通過(guò)自定義一種格式化的數(shù)據(jù)結(jié)構(gòu)來(lái)支持任意樣式的商品流和廣告，客戶端不用做任何變更，只要服務(wù)端配置希望展示的界面效果的數(shù)據(jù)，前端顯示屏幕就會(huì)如實(shí)展示，用戶不需要更新應(yīng)用，大大提高了靈活性，以及多樣性。

以上所述本發(fā)明的具體實(shí)施方式，并不構(gòu)成對(duì)本發(fā)明保護(hù)范圍的限定。任何根據(jù)本發(fā)明的技術(shù)構(gòu)思所做出的各種其他相應(yīng)的改變與變形，均應(yīng)包含在本發(fā)明權(quán)利要求的保護(hù)范圍內(nèi)。