一種移動(dòng)終端解決滑塊跳動(dòng)的方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明屬于移動(dòng)終端中的UI技術(shù)領(lǐng)域，特別是一種移動(dòng)終端解決滑塊跳動(dòng)的方法。
【背景技術(shù)】
[0002]目前移動(dòng)終端App應(yīng)用越來(lái)越趨于大數(shù)據(jù)量顯示數(shù)據(jù)，如顯示大量圖片數(shù)據(jù)，目前大部分App采用瀑布流的方式顯示，但1s和Android系統(tǒng)各有不同，瀑布流的使用比較有局限性，配合其它控件顯示在技術(shù)上處理起來(lái)就會(huì)有很大麻煩。瀑布流配合時(shí)間刻度滑塊一起聯(lián)動(dòng)，相對(duì)1S系統(tǒng)提供了相應(yīng)的控件，處理起來(lái)比較容易，對(duì)于Android系統(tǒng)就要組合控件才能實(shí)現(xiàn)，但效果比較差，出現(xiàn)滑塊跳動(dòng)，各種沖突等問(wèn)題。
[0003]特別是瀑布流通常是以固定模板為一個(gè)條目，這樣的話每一個(gè)條目的數(shù)據(jù)可以是I張到9張甚至更多張，這樣如果數(shù)據(jù)量少，條目不多，在滑動(dòng)頁(yè)面時(shí)就會(huì)出現(xiàn)滑塊大幅度跳動(dòng)，如果一個(gè)條目的數(shù)據(jù)量過(guò)大超過(guò)一屏，滑動(dòng)頁(yè)面時(shí)(在同一個(gè)條目)就會(huì)出現(xiàn)滑塊消失的現(xiàn)象，當(dāng)滑動(dòng)下一個(gè)條目時(shí)，滑塊會(huì)再次出現(xiàn)，這種現(xiàn)象影響用戶體驗(yàn)。

【發(fā)明內(nèi)容】

[0004]鑒于現(xiàn)有技術(shù)的不足，解決大數(shù)據(jù)量圖片顯示與時(shí)間刻度滑塊聯(lián)動(dòng)時(shí)出現(xiàn)的滑塊跳動(dòng)問(wèn)題，及數(shù)據(jù)加載時(shí)造成的滑動(dòng)卡頓問(wèn)題，本發(fā)明通過(guò)以下技術(shù)方案來(lái)實(shí)現(xiàn):
一種移動(dòng)終端解決滑塊跳動(dòng)的方法，其特征在于，包括:
SI，移動(dòng)終端上查詢本地?cái)?shù)據(jù)庫(kù)獲取要顯示的多張圖片信息；
S2，根據(jù)設(shè)定的照片顯示規(guī)則，瀑布流模板顯示多張圖片；
S3，將瀑布流模板拆解，使模板中的每個(gè)條目最多有3張照片；
S4，將拆解的模板各條目隨機(jī)組裝成更多張圖的模塊，限制每個(gè)條目的高度；
S5、沿日期刻度向上或向下滑動(dòng)瀑布流模板上的照片，在側(cè)邊顯示的滑塊與照片數(shù)據(jù)流聯(lián)動(dòng)。
[0005]所述向上或向下滑動(dòng)，監(jiān)聽(tīng)滑塊滾動(dòng)事件獲取界面是否在滾動(dòng)狀態(tài)，當(dāng)為停止滑動(dòng)狀態(tài)時(shí)加載照片數(shù)據(jù)。
[0006]本發(fā)明的有益效果是:滑塊在側(cè)邊顯示，與數(shù)據(jù)流聯(lián)動(dòng)，更方便找到特定的照片，有效避免滑塊跳動(dòng)現(xiàn)象；圖片加載快，消耗內(nèi)存少，滑動(dòng)流暢等比較好的效果。
【附圖說(shuō)明】
[0007]圖1為本發(fā)明的一種移動(dòng)終端解決滑塊跳動(dòng)的方法的流程框圖。
[0008]圖2為本發(fā)明的一具體實(shí)施例的某一條目隨機(jī)排列示意圖。
[0009]圖3為本發(fā)明的一具體實(shí)施例的界面排列示意圖。
【具體實(shí)施方式】
[0010]以下結(jié)合附圖對(duì)本發(fā)明實(shí)施例進(jìn)行詳細(xì)的描述。
[0011]如圖1所述，圖1是一種移動(dòng)終端解決滑塊跳動(dòng)的方法的流程框圖，包括:
SI，移動(dòng)終端上查詢本地?cái)?shù)據(jù)庫(kù)獲取要顯示的多張圖片信息；在移動(dòng)終端中，獲取本地媒體庫(kù)圖片數(shù)據(jù)信息，并保存到數(shù)據(jù)庫(kù)。
[0012]S2，根據(jù)設(shè)定的照片顯示規(guī)則，瀑布流模板顯示多張圖片；具體的顯示規(guī)則如下文所述。
[0013]S3，將瀑布流模板拆解，使模板中的每個(gè)條目最多有3張照片，數(shù)據(jù)庫(kù)中的圖片或照片有多張時(shí)，按每個(gè)條目最多3張的規(guī)則隨機(jī)排列。
[0014]S4，將拆解的模板各條目隨機(jī)組裝成更多張圖的模塊，限制每個(gè)條目的高度。
[0015]S5、沿日期刻度向上或向下滑動(dòng)瀑布流模板上的照片，在側(cè)邊顯示的滑塊與照片數(shù)據(jù)流聯(lián)動(dòng)。
[0016]如圖2所示，圖2是圖1中方法的具體實(shí)施例示意圖，照片或圖片(以下簡(jiǎn)稱圖片)顯示規(guī)則，根據(jù)照片顯示根據(jù)時(shí)間分類，同一天的數(shù)據(jù)在同一模塊同一天的時(shí)間可以是I張、2張、3張、4張、5張、6張、7張、8張、9張和超過(guò)10張包含10張:
I張和2張圖片各有一種顯示方式，其中2張為并列顯示。
[0017]3張圖片有四種顯示方式:
a，上面2張橫向并列下面I張； b，橫向并列；
C，左2張縱向排列、右I張； d，右2張縱向排列、左I張。
[0018]以3張圖片時(shí)的4種排列為基礎(chǔ)，超過(guò)3張圖片時(shí)，排列方案如下:
4張圖片有三種顯示方式:格局為上面3張下面I張，其中上面三張有三種顯示方式同
2)中 b，c，do
[0019]5張圖片有三種顯示方式:格局為上面3張下面2張，其中上面三張有三種顯示方式同2)中b, c，do
[0020]6張圖片有三種顯示方式:格局為上面3張下面3張，其中上面三張有三種顯示方式同2)中b, c，do
[0021]上面3張和下面3張布局必須有一個(gè)b布局，C，d布局隨機(jī)選一個(gè)。
[0022]7張圖片有三種顯示方式:格局為上面3張，中間3張，下面一張，上面3張和中間3張布局必須有一個(gè)b布局，c，d布局隨機(jī)選一個(gè)、下面只有一張。
[0023]8張圖片有三種顯示方式:格局為上面3張，中間3張，下面一張、上面3張和中間3張布局必須有一個(gè)b布局，c，d布局隨機(jī)選一個(gè)，下面2張橫向并列。
[0024]9張圖片有三種顯示方式:格局為上面3張，中間3張，下面3張上面3張和下面3張布局必須是b布局，中間三張c，d布局隨機(jī)選一個(gè)。
[0025]超過(guò)10張圖片九宮格顯示。
每一個(gè)條目可以是I張圖片、2張圖片橫向并列顯示、3張圖片顯示，并且每個(gè)條目最多3張圖片，三張圖片的顯示格局就是上面所說(shuō)的a，b，c，d布局。
[0026]其中3張、4張、5張、6張、7張、8張、9張和超過(guò)10張包含10張由a，h, c, d四種布局按照上述2 (照片顯示規(guī)則)隨機(jī)顯示拼接而成，這樣做的目的是為避免滑塊聯(lián)動(dòng)顯示時(shí)，滑塊跳動(dòng)問(wèn)題，并且滑動(dòng)比較流暢，這也是與瀑布流相比一個(gè)比較大的優(yōu)勢(shì)。
[0027]在本發(fā)明的具體實(shí)施例中的組裝數(shù)據(jù):查詢數(shù)據(jù)庫(kù)，根據(jù)拍照時(shí)間倒序查詢，根據(jù)上述UI布局規(guī)則，組裝數(shù)據(jù)，以同一天數(shù)據(jù)為一大集合，每個(gè)條目的數(shù)據(jù)為一個(gè)小集合，每個(gè)條目最多三條數(shù)據(jù)，同一天最后一條數(shù)據(jù)可以是兩條數(shù)據(jù)，也可以是一條數(shù)據(jù)，顯示與上述UI布局規(guī)則對(duì)應(yīng)。
[0028]滑塊在側(cè)邊顯示，滾動(dòng)時(shí)滑塊顯示，停止時(shí)隱藏，其目的是大數(shù)據(jù)量顯示時(shí)可以拖動(dòng)滑塊迅速滑動(dòng)預(yù)期的位置，避免大數(shù)據(jù)篇幅過(guò)長(zhǎng)，要找到某一時(shí)間(天)的照片非常困難。
[0029]本發(fā)明具體實(shí)施例中，將瀑布流模板拆解，使每個(gè)條目最多有三張圖片，也可以是兩張或一張，1-9張圖的模板均有上述a，b, c, d和兩張或一張圖組合而成，通過(guò)一定的規(guī)貝1J，將其組裝成1-9張圖及更多張圖的模塊，使得每個(gè)條目的高度限制在一定的范圍，這樣滑塊在滑動(dòng)的時(shí)候跳動(dòng)的范圍極小，有效避免滑塊跳動(dòng)現(xiàn)象及同一模塊數(shù)據(jù)超過(guò)一屏?xí)r滑塊消失的現(xiàn)象，提高了用戶體驗(yàn)
由于數(shù)據(jù)量過(guò)大，邊滑動(dòng)邊加載圖片會(huì)造成滑動(dòng)卡頓想象影響用戶體驗(yàn)，并且邊滑動(dòng)邊加載會(huì)造成CPU集聚飆升，可能導(dǎo)致程序崩潰，并且電量消耗快，等各種各樣的問(wèn)題。
[0030]本發(fā)明所述采用停止滑動(dòng)加載數(shù)據(jù)的方式，通過(guò)監(jiān)聽(tīng)滑塊滾動(dòng)事件獲取界面是否在滾動(dòng)狀態(tài)，當(dāng)為停止滑動(dòng)狀態(tài)時(shí)加載圖片，這種方式可以達(dá)到圖片加載快，消耗內(nèi)存少，滑動(dòng)流暢等比較好的效果，給用戶良好的體驗(yàn)。
[0031]以上內(nèi)容僅為本發(fā)明的較佳實(shí)施例，對(duì)于本領(lǐng)域的普通技術(shù)人員，依據(jù)本發(fā)明的思想，在【具體實(shí)施方式】及應(yīng)用范圍上均會(huì)有改變之處，本說(shuō)明書內(nèi)容不應(yīng)理解為對(duì)本發(fā)明的限制。
【主權(quán)項(xiàng)】
1.一種移動(dòng)終端解決滑塊跳動(dòng)的方法，其特征在于，包括: SI，移動(dòng)終端上查詢本地?cái)?shù)據(jù)庫(kù)獲取要顯示的多張圖片信息； S2，根據(jù)設(shè)定的照片顯示規(guī)則，瀑布流模板顯示多張圖片； S3，將瀑布流模板拆解，使模板中的每個(gè)條目最多有3張照片； S4，將拆解的模板各條目隨機(jī)組裝成更多張圖的模塊，限制每個(gè)條目的高度； S5、沿日期刻度向上或向下滑動(dòng)瀑布流模板上的照片，在側(cè)邊顯示的滑塊與照片數(shù)據(jù)流聯(lián)動(dòng)。2.一種移動(dòng)終端解決滑塊跳動(dòng)的方法，其特征在于，所述向上或向下滑動(dòng)，監(jiān)聽(tīng)滑塊滾動(dòng)事件獲取界面是否在滾動(dòng)狀態(tài)，當(dāng)為停止滑動(dòng)狀態(tài)時(shí)加載照片數(shù)據(jù)。
【專利摘要】本發(fā)明提供一種移動(dòng)終端解決滑塊跳動(dòng)的方法，包括：移動(dòng)終端上查詢本地?cái)?shù)據(jù)庫(kù)獲取要顯示的多張圖片信息；根據(jù)設(shè)定的照片顯示規(guī)則，瀑布流模板顯示多張圖片；將瀑布流模板拆解，使模板中的每個(gè)條目最多有3張照片；將拆解的模板各條目隨機(jī)組裝成更多張圖的模塊，限制每個(gè)條目的高度。向上或向下滑動(dòng)瀑布流模板上的照片，在側(cè)邊顯示的滑塊與照片數(shù)據(jù)流聯(lián)動(dòng)。實(shí)施本發(fā)明的有益效果是滑塊在側(cè)邊顯示，與數(shù)據(jù)流聯(lián)動(dòng)，更方便找到特定的照片，有效避免滑塊跳動(dòng)現(xiàn)象；結(jié)合停止滑動(dòng)加載圖片技術(shù)，達(dá)到加載快，消耗內(nèi)存少，滑動(dòng)流暢等比較好的效果。
【IPC分類】G06F3/14, G06F17/30
【公開號(hào)】CN105549926
【申請(qǐng)?zhí)枴緾N201510619805
【發(fā)明人】李志勇, 王會(huì)
【申請(qǐng)人】深圳市美貝殼科技有限公司
【公開日】2016年5月4日
【申請(qǐng)日】2015年9月25日