一種用于消除頁面抖動的方法和裝置制造方法
【專利摘要】本發(fā)明公開了一種用于消除頁面抖動的方法和裝置，適用于移動終端，用于消除頁面顯示中的抖動，其中該方法包括：預(yù)設(shè)多個用于內(nèi)容加載和顯示的模板；讀取數(shù)據(jù)；根據(jù)各個數(shù)據(jù)的內(nèi)容依次選擇對應(yīng)的模板，將數(shù)據(jù)與列表框控件綁定，生成列表框；當(dāng)頁面初始顯示或頁面滾動時，選取列表框中需要顯示的數(shù)據(jù)，將需要顯示的數(shù)據(jù)加載到內(nèi)存中，生成用戶界面元素；顯示用戶界面元素。本發(fā)明的方法和裝置，可以在保證內(nèi)存開銷足夠小的情況下消除頁面抖動。
【專利說明】一種用于消除頁面抖動的方法和裝置
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計算機(jī)和通信領(lǐng)域，特別涉及一種用于消除頁面抖動的方法和裝置。【背景技術(shù)】
[0002]移動終端，例如智能手機(jī)，在瀏覽頁面，例如瀏覽微博的頁面時，一般多采用無限加載的方式呈現(xiàn)，對于大量數(shù)據(jù)的展示，會受到手機(jī)內(nèi)存的一些限制，所以采用虛擬化來支持UI (user interface,用戶界面)復(fù)用來減少內(nèi)存的使用，對于復(fù)雜布局的列表框(ListBox),支持虛擬化的同時會帶來頁面抖動的現(xiàn)象。例如，ListBox滑動時,對于頁面上的一些圖片等內(nèi)容需要異步加載，對于復(fù)雜布局的列表，由于每一項內(nèi)容不同，需要展示的格式也不盡相同，內(nèi)容的高度不固定，列表在渲染展示過程中，會不斷計算需要展示的高度，對于圖片等一些內(nèi)容，是在列表渲染過程中異步加載，此時會對列表高度的計算造成誤差。導(dǎo)致頁面顯示不全，并且隨著圖片的加載會造成頁面的抖動。

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

[0003]本發(fā)明提供一種用于消除頁面抖動的方法和裝置，以達(dá)到在移動終端顯示頁面時消除頁面抖動的效果。為達(dá)到上述目的，本發(fā)明采用如下技術(shù)方案:
[0004]本發(fā)明公開了一種用于消除頁面抖動的方法，該方法適用于移動終端，包括:
[0005]預(yù)設(shè)多個用于內(nèi)容加載和顯示的模板；
[0006]讀取數(shù)據(jù)；
[0007]根據(jù)各個數(shù)據(jù)的內(nèi)容依次選擇對應(yīng)的模板，將數(shù)據(jù)與列表框控件綁定，生成列表框；
[0008]當(dāng)頁面初始顯示或頁面滾動時，選取列表框中需要顯示的數(shù)據(jù)，將需要顯示的數(shù)據(jù)加載到內(nèi)存中，生成用戶界面元素；
[0009]顯示用戶界面元素。
[0010]其中，該方法進(jìn)一步包括:監(jiān)聽列表框的滾動，當(dāng)頁面滾動時，將顯示焦點(diǎn)設(shè)置于列表框之外的元素；當(dāng)頁面滾動停止時，將顯示焦點(diǎn)設(shè)置于列表框。
[0011]其中，該方法進(jìn)一步包括:判斷內(nèi)存中的數(shù)據(jù)是否需要顯示，若判斷為否，將該數(shù)據(jù)從內(nèi)存中移除。
[0012]其中，該方法進(jìn)一步包括:判斷數(shù)據(jù)的顯示方式，若數(shù)據(jù)的顯示方式為默認(rèn)的顯示方式，則將緩存模式設(shè)置為默認(rèn)模式；若數(shù)據(jù)的顯示方式為循環(huán)的顯示方式，則將緩存模式設(shè)置為循環(huán)模式。
[0013]其中，所述選取列表框中需要顯示的數(shù)據(jù)，包括:選取列表框可視范圍中的數(shù)據(jù)。
[0014]本發(fā)明還公開了一種實(shí)現(xiàn)應(yīng)用割接的裝置，該裝置適用于移動終端，包括:預(yù)設(shè)模塊、數(shù)據(jù)讀取模塊、列表框生成模塊、數(shù)據(jù)加載模塊和顯示模塊，
[0015]預(yù)設(shè)模塊，用于預(yù)設(shè)多個用于內(nèi)容加載和顯示的模板；
[0016]數(shù)據(jù)讀取模塊，用于讀取數(shù)據(jù)；[0017]列表框生成模塊，用于根據(jù)各個數(shù)據(jù)的內(nèi)容依次選擇對應(yīng)的模板，將數(shù)據(jù)與列表框控件綁定,生成列表框；
[0018]數(shù)據(jù)加載模塊，當(dāng)頁面初始顯示或頁面滾動時，選取列表框中需要顯示的數(shù)據(jù)，將需要顯示的數(shù)據(jù)加載到內(nèi)存中，生成用戶界面元素；
[0019]顯示模塊，用于顯示用戶界面元素。
[0020]其中，該裝置還包括:焦點(diǎn)設(shè)置模塊，用于監(jiān)聽列表框的滾動，當(dāng)頁面滾動時，將顯示焦點(diǎn)設(shè)置于列表框之外的元素；當(dāng)頁面滾動停止時，將顯示焦點(diǎn)設(shè)置于列表框。
[0021]其中，所述數(shù)據(jù)加載模塊，進(jìn)一步用于判斷內(nèi)存中的數(shù)據(jù)是否需要顯示，若判斷為否，將該數(shù)據(jù)從內(nèi)存中移除。
[0022]其中，該裝置進(jìn)一步包括:緩存設(shè)置模塊，用于判斷數(shù)據(jù)的顯示方式，若數(shù)據(jù)的顯示方式為默認(rèn)的顯示方式，則將緩存模式設(shè)置為默認(rèn)模式；若數(shù)據(jù)的顯示方式為循環(huán)的顯示方式，則將緩存模式設(shè)置為循環(huán)模式。
[0023]其中，所述數(shù)據(jù)加載模塊，具體用于選取列表框可視范圍中的數(shù)據(jù)，加載到內(nèi)存中，生成用戶界面元素。
[0024]本發(fā)明實(shí)施例的有益效果是:通過使用預(yù)設(shè)模板以加載對應(yīng)的數(shù)據(jù)內(nèi)容，將數(shù)據(jù)與列表框控件綁定，生成列表框，從而可以在顯示時不因?yàn)楫惒郊虞d而發(fā)生抖動。
【專利附圖】

【附圖說明】
[0025]為了更清楚地說明本發(fā)明實(shí)施例中的技術(shù)方案，下面將對實(shí)施例描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的一些實(shí)施例，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據(jù)這些附圖獲得其他的附圖。
[0026]圖1為本發(fā)明較佳實(shí)施例提供的一種用于消除頁面抖動的方法的流程圖；
[0027]圖2為本發(fā)明較佳實(shí)施例提供的一種用于消除頁面抖動的裝置的框圖。
【具體實(shí)施方式】
[0028]為使本發(fā)明的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合附圖對本發(fā)明實(shí)施方式作進(jìn)一步的詳細(xì)描述。
[0029]圖1為本發(fā)明第一較佳實(shí)施例提供的一種用于消除頁面抖動的方法的流程圖。該方法適用于移動終端，包括以下的步驟:
[0030]SlOO:預(yù)設(shè)多個用于內(nèi)容加載和顯示的模板。
[0031]S200:讀取數(shù)據(jù)。
[0032]S300:根據(jù)各個數(shù)據(jù)的內(nèi)容依次選擇對應(yīng)的模板，將數(shù)據(jù)與列表框控件綁定，生成列表框。
[0033]S400:當(dāng)頁面初始顯示或頁面滾動時,選取列表框中需要顯示的數(shù)據(jù),將需要顯示的數(shù)據(jù)加載到內(nèi)存中，生成用戶界面元素。
[0034]S500:顯示用戶界面元素。
[0035]本實(shí)施例之中，步驟S200之中，讀取的數(shù)據(jù)可以是移動終端的本地文件或通過網(wǎng)絡(luò)獲得的信息等等。步驟S400的選取列表框中需要顯示的數(shù)據(jù)，是選取列表框可視范圍中的數(shù)據(jù)，或者說選取需顯示在使用者視野中的數(shù)據(jù)。當(dāng)然也可以一并選擇與列表框可視范圍中的數(shù)據(jù)相鄰的數(shù)據(jù)，或者說，與需顯示在使用者視野中的數(shù)據(jù)相鄰的數(shù)據(jù)加載到內(nèi)存中。通過僅將選擇的數(shù)據(jù)加載到內(nèi)存中，可以減小內(nèi)存開銷。
[0036]另外，該方法進(jìn)一步包括變換焦點(diǎn)，以更進(jìn)一步地降低頁面的抖動。變換焦點(diǎn)的操作，具體包括:監(jiān)聽列表框的滾動，當(dāng)頁面滾動時，將顯示焦點(diǎn)設(shè)置于列表框之外的元素；當(dāng)頁面滾動停止時，將顯示焦點(diǎn)設(shè)置于列表框。
[0037]進(jìn)一步地，當(dāng)頁面滾動時，可以判斷內(nèi)存中的數(shù)據(jù)是否需要顯示，若判斷為否，將該數(shù)據(jù)從內(nèi)存中移除。這樣，對于已經(jīng)展示過的列表框的內(nèi)容，如果不在列表框顯示的可視范圍內(nèi)(換言之，不在用戶的視野范圍內(nèi))則從內(nèi)存中移除?？梢詼p小內(nèi)存的開銷，維護(hù)系統(tǒng)的運(yùn)行質(zhì)量。
[0038]進(jìn)一步地，本實(shí)施例會設(shè)置緩存模式，具體地，可以通過設(shè)置虛擬堆棧面板(VSP，Virtualizing Stack Panel)的緩存模式(CacheMode)參數(shù)。包括:判斷數(shù)據(jù)的顯示方式，若數(shù)據(jù)的顯示方式為默認(rèn)的顯示方式，則將緩存模式設(shè)置為默認(rèn)(Standard)模式；若數(shù)據(jù)的顯示方式為循環(huán)的顯示方式，則將緩存模式設(shè)置為循環(huán)(Recycling)模式，系統(tǒng)會對已經(jīng)生產(chǎn)并展示過的內(nèi)容進(jìn)行回收，來保證有足夠的內(nèi)存空間來展示需要的內(nèi)容。這樣可以根據(jù)顯示方式的不同設(shè)置緩存模式，提高處理效率。
[0039]圖2為本發(fā)明第一較佳實(shí)施例提供的一種用于消除頁面抖動的裝置的框圖。該裝置適用于移動終端，包括:預(yù)設(shè)模塊100、數(shù)據(jù)讀取模塊200、列表框生成模塊300、數(shù)據(jù)加載模塊400和顯示模塊500。
[0040]預(yù)設(shè)模塊100,用于預(yù)設(shè)多個用于內(nèi)容加載和顯不的模板。
[0041]數(shù)據(jù)讀取模塊200，用于讀取數(shù)據(jù)。
[0042]列表框生成模塊300，用于根據(jù)各個數(shù)據(jù)的內(nèi)容依次選擇對應(yīng)的模板，將數(shù)據(jù)與列表框控件綁定，生成列表框。
[0043]數(shù)據(jù)加載模塊400，當(dāng)頁面初始顯示或頁面滾動時，選取列表框中需要顯示的數(shù)據(jù)，將需要顯示的數(shù)據(jù)加載到內(nèi)存中，生成用戶界面元素。
[0044]顯示模塊500，用于顯示用戶界面元素。
[0045]本實(shí)施例之中的數(shù)據(jù)加載模塊400，具體用于選取列表框可視范圍中的數(shù)據(jù)，或者說使用者視野中的數(shù)據(jù)，加載到內(nèi)存中，生成用戶界面(UI)元素。當(dāng)然也可以一并選擇與列表框可視范圍中的數(shù)據(jù)相鄰的數(shù)據(jù)，或者說，與使用者視野中的數(shù)據(jù)相鄰的數(shù)據(jù)加載到內(nèi)存中。
[0046]本實(shí)施例之中，該裝置還包括焦點(diǎn)設(shè)置模塊600，可以變換焦點(diǎn)，以更進(jìn)一步地降低頁面的抖動。焦點(diǎn)設(shè)置模塊600，用于監(jiān)聽列表框的滾動，當(dāng)頁面滾動時，將顯示焦點(diǎn)設(shè)置于列表框之外的元素；當(dāng)頁面滾動停止時，將顯示焦點(diǎn)設(shè)置于列表框。
[0047]進(jìn)一步地，當(dāng)頁面初始顯示或滾動時，數(shù)據(jù)加載模塊400可以判斷內(nèi)存中的數(shù)據(jù)是否需要顯示，當(dāng)判斷內(nèi)存中的數(shù)據(jù)不需要顯示時，將該數(shù)據(jù)從內(nèi)存中移除。這樣，對于已經(jīng)展示過的內(nèi)容，如果不在顯示的可視范圍內(nèi)(換言之，不在用戶的視野范圍內(nèi))則從內(nèi)存中移除?？梢詼p小內(nèi)存的開銷，維護(hù)系統(tǒng)的運(yùn)行質(zhì)量。
[0048]該裝置進(jìn)一步包括緩存設(shè)置模塊700，用于判斷數(shù)據(jù)的顯示方式，從而設(shè)置虛擬堆棧面板(VSP, Virtualizing Stack Panel)的緩存模式(CacheMode),若數(shù)據(jù)的顯示方式為默認(rèn)的顯示方式，則將緩存模式設(shè)置為默認(rèn)模式；若數(shù)據(jù)的顯示方式為循環(huán)的顯示方式，則將緩存模式設(shè)置為循環(huán)模式，系統(tǒng)會對已經(jīng)生產(chǎn)并展示過的內(nèi)容進(jìn)行回收，來保證有足夠的內(nèi)存空間來展示需要的內(nèi)容。
[0049]以下以WindowsPhone平臺，特別地，以WindowsPhone7平臺為例進(jìn)行示例性的說明，僅僅是本發(fā)明的一些應(yīng)用實(shí)例。
[0050]由于列表框中要展示的內(nèi)容的格式不同，可以預(yù)設(shè)不同的模板，在給列表賦值的過程中，需要對每一項要填充到列表的內(nèi)容，增加一個屬性，即模板屬性，來說明需要選擇哪一種模板進(jìn)行展示，用來提供給列表，以選擇用那種模板進(jìn)行展示，例如模板A展示圖片內(nèi)容，模板B展示文字內(nèi)容，則需要在生成列表框(listbox)的數(shù)據(jù)的時候，將文字內(nèi)容對應(yīng)的模板屬性設(shè)置為使用模板A，圖片內(nèi)容對應(yīng)的模板屬性設(shè)置為使用模板B, ListTemplate Selector類則根據(jù)設(shè)置的模板屬性,來選擇模板。
[0051]當(dāng)列表停止時將焦點(diǎn)給滾動條，可以通過捕捉ListBox里滾動條狀態(tài)來知道滾動條是在滾動中還是停止?fàn)顟B(tài)。當(dāng)滾動條處于滾動狀態(tài)時，把頁面焦點(diǎn)給滾動條，此時可以防止其余元素獲得焦點(diǎn)而影響列表元素高度的計算。當(dāng)滾動條停止時把焦點(diǎn)交還給當(dāng)前頁面:
[0052]本發(fā)明的實(shí)施例具有以下的優(yōu)點(diǎn):
[0053](一)通過使用預(yù)設(shè)模板以加載對應(yīng)的數(shù)據(jù)內(nèi)容，將數(shù)據(jù)與列表框控件綁定，生成列表框，從而可以在顯示時不因?yàn)楫惒郊虞d而發(fā)生抖動；
[0054](二)通過變換焦點(diǎn)，更進(jìn)一步地降低頁面的抖動；
[0055](三)通過將不需要顯示數(shù)據(jù)從內(nèi)存中移除，可以減小內(nèi)存的開銷，維護(hù)系統(tǒng)的運(yùn)行質(zhì)量；
[0056](四)通過根據(jù)默認(rèn)顯示方式、循環(huán)顯示方式的不同，設(shè)置緩存模式，可以提高處理效率。
[0057]以上所述，僅為本發(fā)明的【具體實(shí)施方式】，但本發(fā)明的保護(hù)范圍并不局限于此，任何熟悉本【技術(shù)領(lǐng)域】的技術(shù)人員在本發(fā)明揭露的技術(shù)范圍內(nèi)，可輕易想到的變化或替換，都應(yīng)涵蓋在本發(fā)明的保護(hù)范圍之內(nèi)。因此，本發(fā)明的保護(hù)范圍應(yīng)以權(quán)利要求的保護(hù)范圍為準(zhǔn)。
【權(quán)利要求】
1.一種用于消除頁面抖動的方法，其特征在于，該方法適用于移動終端，包括: 預(yù)設(shè)多個用于內(nèi)容加載和顯示的模板； 讀取數(shù)據(jù)； 根據(jù)各個數(shù)據(jù)的內(nèi)容依次選擇對應(yīng)的模板，將數(shù)據(jù)與列表框控件綁定，生成列表框； 當(dāng)頁面初始顯示或頁面滾動時，選取列表框中需要顯示的數(shù)據(jù)，將需要顯示的數(shù)據(jù)加載到內(nèi)存中，生成用戶界面元素； 顯示用戶界面元素。
2.根據(jù)權(quán)利要求1所述的方法，其特征在于，該方法進(jìn)一步包括: 監(jiān)聽列表框的滾動，當(dāng)頁面滾動時，將焦點(diǎn)交給頁面；當(dāng)滾動條停止時，將焦點(diǎn)交給滾動條。
3.根據(jù)權(quán)利要求1或2所述的方法，其特征在于，該方法進(jìn)一步包括: 判斷內(nèi)存中的數(shù)據(jù)是否需要顯示，若判斷為否，將該數(shù)據(jù)從內(nèi)存中移除。
4.根據(jù)權(quán)利要求1或2所述的方法，其特征在于，該方法進(jìn)一步包括: 判斷數(shù)據(jù)的顯示方式，若數(shù)據(jù)的顯示方式為默認(rèn)的顯示方式，則將緩存模式設(shè)置為默認(rèn)模式；若數(shù)據(jù)的顯示方式為循環(huán)的顯示方式，則將緩存模式設(shè)置為循環(huán)模式。
5.根據(jù)權(quán)利要求1或2所述的方法，其特征在于: 所述選取列表框中需要顯示的數(shù)據(jù)，包括:選取列表框可視范圍中的數(shù)據(jù)。
6.一種用于消除頁面抖動的裝置，其特征在于，該裝置適用于移動終端，包括:預(yù)設(shè)模塊、數(shù)據(jù)讀取模塊、列表框生成模塊、數(shù)據(jù)加載模塊和顯示模塊， 預(yù)設(shè)模塊，用于預(yù)設(shè)多個用于內(nèi)容加載和顯示的模板； 數(shù)據(jù)讀取模塊，用于讀取數(shù)據(jù)； 列表框生成模塊，用于根據(jù)各個數(shù)據(jù)的內(nèi)容依次選擇對應(yīng)的模板，將數(shù)據(jù)與列表框控件綁定,生成列表框； 數(shù)據(jù)加載模塊，當(dāng)頁面初始顯示或頁面滾動時，選取列表框中需要顯示的數(shù)據(jù)，將需要顯示的數(shù)據(jù)加載到內(nèi)存中，生成用戶界面元素； 顯示模塊，用于顯示用戶界面元素。
7.根據(jù)權(quán)利要求6所述的裝置，其特征在于，該裝置還包括: 焦點(diǎn)設(shè)置模塊，用于監(jiān)聽列表框的滾動，當(dāng)頁面滾動時，將顯示焦點(diǎn)設(shè)置于列表框之外的元素；當(dāng)頁面滾動停止時，將顯示焦點(diǎn)設(shè)置于列表框。
8.根據(jù)權(quán)利要求6或7所述的裝置，其特征在于， 所述數(shù)據(jù)加載模塊，進(jìn)一步用于判斷內(nèi)存中的數(shù)據(jù)是否需要顯示，若判斷為否，將該數(shù)據(jù)從內(nèi)存中移除。
9.根據(jù)權(quán)利要求6或7所述的裝置，其特征在于，該裝置進(jìn)一步包括: 緩存設(shè)置模塊，用于判斷數(shù)據(jù)的顯示方式，若數(shù)據(jù)的顯示方式為默認(rèn)的顯示方式，則將緩存模式設(shè)置為默認(rèn)模式；若數(shù)據(jù)的顯示方式為循環(huán)的顯示方式，則將緩存模式設(shè)置為循環(huán)模式。
10.據(jù)權(quán)利要求6或7所述的裝置，其特征在于， 所述數(shù)據(jù)加載模塊，具體用于選取列表框可視范圍中的數(shù)據(jù)，加載到內(nèi)存中，生成用戶界面元素。
【文檔編號】G06F3/0482GK103914213SQ201210592706
【公開日】2014年7月9日 申請日期:2012年12月31日 優(yōu)先權(quán)日:2012年12月31日
【發(fā)明者】杜立召 申請人:北京新媒傳信科技有限公司