圖形界面的排列顯示方法及裝置制造方法
【專利摘要】本發(fā)明公開了一種圖形界面的排列顯示方法及裝置。其中，該方法包括：讀取屏幕的屏幕分辨率；根據(jù)屏幕分辨率對圖形界面進行劃分，生成排列網(wǎng)格；獲取需要顯示的數(shù)據(jù)內(nèi)容集合；根據(jù)數(shù)據(jù)內(nèi)容集合，獲取與數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板，正方形等比排列模板用于表征在圖形界面內(nèi)，不同大小的正方形圖標按預定的排列方式進行顯示的排列顯示方法；將數(shù)據(jù)內(nèi)容集合按照正方形等比排列模板對數(shù)據(jù)內(nèi)容以正方形圖標的形式進行排列顯示。本發(fā)明解決了現(xiàn)有中設(shè)計人員、技術(shù)人員、咨詢?nèi)藛T以及界面使用用戶需要針對每個前端界面進行重復開發(fā)，導致的開發(fā)效率低、浪費人力資源的問題。
【專利說明】圖形界面的排列顯示方法及裝置

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計算機領(lǐng)域，具體而言，涉及一種圖形界面的排列顯示方法及裝置。

【背景技術(shù)】
[0002]在日常的軟件開發(fā)過程中，程序開發(fā)人員往往在對軟件功能進行開發(fā)之后，還要對前端顯示界面進行設(shè)計開發(fā)。在開發(fā)調(diào)試階段，不但要對軟件功能的可靠性進行測試，還要對前端界面的兼容性和美觀度進行驗證。
[0003]對于程序開發(fā)人員來說，前端顯示界面的設(shè)計開發(fā)工作往往并不能得心應(yīng)手，很難在保證前端顯示界面兼容性的同時，還兼顧美觀度。每次在對功能開發(fā)完畢之后，還要花費大量的時間和精力對前端顯示界面進行重復的開發(fā)，造成了程序開發(fā)人員資源的浪費。
[0004]進一步的，如果在多個開發(fā)人員對同一個軟件進行開發(fā)時，很難統(tǒng)一每個程序開發(fā)人員開發(fā)出來的前端顯示界面的一致性。
[0005]就設(shè)計人員來說，創(chuàng)意的結(jié)果是多樣的，從創(chuàng)意產(chǎn)生到最終的工程圖樣的呈現(xiàn)都是需要經(jīng)過大量的尺度換算和設(shè)定。同時在設(shè)計中存在大量的定制和個性多元化的設(shè)計概念，這樣在多平臺設(shè)計當中增加了設(shè)計師的工作量。就咨詢?nèi)藛T來說，需要大量將咨詢結(jié)果轉(zhuǎn)換為簡單易懂的圖形的繪圖任務(wù)，處理圖形界面的工作量非常龐大。就界面的使用用戶來說，想要打造具有自己個性的操作界面的學習成本和實施成本都很高。
[0006]針對現(xiàn)有技術(shù)中設(shè)計人員、技術(shù)人員、咨詢?nèi)藛T以及界面使用用戶需要針對每個前端界面進行重復開發(fā)，導致的開發(fā)效率低、浪費人力資源的問題，目前尚未提出有效的解決方案。


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

[0007]本發(fā)明的主要目的在于提供一種圖形界面的排列顯示方法及裝置，以解決現(xiàn)有技術(shù)中設(shè)計人員、技術(shù)人員、咨詢?nèi)藛T以及界面使用用戶需要針對每個前端界面進行重復開發(fā)，導致的開發(fā)效率低、浪費人力資源的問題。
[0008]為了實現(xiàn)上述目的，根據(jù)本發(fā)明實施例的一個方面，提供了一種圖形界面的排列顯示方法。該方法包括:讀取屏幕的屏幕分辨率；根據(jù)屏幕分辨率對圖形界面進行劃分，生成排列網(wǎng)格；獲取需要顯示的數(shù)據(jù)內(nèi)容集合；根據(jù)數(shù)據(jù)內(nèi)容集合，獲取與數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板，正方形等比排列模板用于表征在圖形界面內(nèi)，不同大小的正方形圖標按預定的排列方式進行顯示的排列顯示方法，其中，所述排列網(wǎng)格用于表征所述正方形等比模板中用于計算各個正方形圖標邊長的基本單位；將數(shù)據(jù)內(nèi)容集合按照正方形等比排列模板對數(shù)據(jù)內(nèi)容以正方形圖標的形式進行排列顯示。
[0009]為了實現(xiàn)上述目的，根據(jù)本發(fā)明實施例的另一方面，提供了一種圖形界面的排列顯示裝置，該裝置包括讀取模塊，用于讀取屏幕的屏幕分辨率；生成模塊，用于根據(jù)屏幕分辨率對圖形界面進行劃分，生成排列網(wǎng)格；第一獲取模塊，用于獲取需要顯示的數(shù)據(jù)內(nèi)容集合；第二獲取模塊，用于根據(jù)數(shù)據(jù)內(nèi)容集合，獲取與數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板，正方形等比排列模板用于表征在圖形界面內(nèi)，不同大小的正方形圖標按預定的排列方式進行顯示的排列顯示方法，其中，所述排列網(wǎng)格用于表征所述正方形等比模板中用于計算各個正方形圖標邊長的基本單位；顯示模塊，用于將數(shù)據(jù)內(nèi)容集合按照正方形等比排列模板對數(shù)據(jù)內(nèi)容以正方形圖標的形式進行排列顯示。
[0010]根據(jù)發(fā)明實施例，通過讀取屏幕的屏幕分辨率；根據(jù)屏幕分辨率對圖形界面進行劃分，生成排列網(wǎng)格；獲取需要顯示的數(shù)據(jù)內(nèi)容集合；根據(jù)數(shù)據(jù)內(nèi)容集合，獲取與數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板，正方形等比排列模板用于表征在圖形界面內(nèi)，不同大小的正方形圖標按預定的排列方式進行顯示的排列顯示方法，其中，所述排列網(wǎng)格用于表征所述正方形等比模板中用于計算各個正方形圖標邊長的基本單位；將數(shù)據(jù)內(nèi)容集合按照正方形等比排列模板對數(shù)據(jù)內(nèi)容以正方形圖標的形式進行排列顯示，解決了現(xiàn)有技術(shù)中設(shè)計人員、技術(shù)人員、咨詢?nèi)藛T以及界面使用用戶需要針對每個前端界面進行重復開發(fā)，導致的開發(fā)效率低、浪費人力資源的問題。實現(xiàn)了根據(jù)需要顯示的數(shù)據(jù)內(nèi)容自動生成與數(shù)據(jù)內(nèi)容匹配的圖形界面的效果。

【專利附圖】

【附圖說明】
[0011]構(gòu)成本申請的一部分的附圖用來提供對本發(fā)明的進一步理解，本發(fā)明的示意性實施例及其說明用于解釋本發(fā)明，并不構(gòu)成對本發(fā)明的不當限定。在附圖中:
[0012]圖1是根據(jù)本發(fā)明實施例一的圖形界面的排列顯示方法的流程圖；
[0013]圖2是根據(jù)本發(fā)明實施例二的圖形界面的排列顯示裝置的結(jié)構(gòu)示意圖；以及
[0014]圖3是根據(jù)本發(fā)明實施例二優(yōu)選的圖形界面的排列顯示裝置的結(jié)構(gòu)示意圖。

【具體實施方式】
[0015]需要說明的是，在不沖突的情況下，本申請中的實施例及實施例中的特征可以相互組合。下面將參考附圖并結(jié)合實施例來詳細說明本發(fā)明。
[0016]為了使本【技術(shù)領(lǐng)域】的人員更好地理解本發(fā)明方案，下面將結(jié)合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術(shù)方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發(fā)明一部分的實施例，而不是全部的實施例。基于本發(fā)明中的實施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都應(yīng)當屬于本發(fā)明保護的范圍。
[0017]需要說明的是，本發(fā)明的說明書和權(quán)利要求書及上述附圖中的術(shù)語“第一”、“第二”等是用于區(qū)別類似的對象，而不必用于描述特定的順序或先后次序。應(yīng)該理解這樣使用的數(shù)據(jù)在適當情況下可以互換，以便這里描述的本發(fā)明的實施例。此外，術(shù)語“包括”和“具有”以及他們的任何變形，意圖在于覆蓋不排他的包含，例如，包含了一系列步驟或單元的過程、方法、系統(tǒng)、產(chǎn)品或設(shè)備不必限于清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或?qū)τ谶@些過程、方法、產(chǎn)品或設(shè)備固有的其它步驟或單元。
[0018]實施例1
[0019]本發(fā)明實施例提供了一種圖形界面的排列顯示方法。
[0020]圖1是根據(jù)本發(fā)明實施例的圖形界面的排列顯示方法的流程圖。如圖1所示，該方法包括步驟如下:
[0021]步驟S11，讀取屏幕的屏幕分辨率。
[0022]具體的，通過上述步驟S11，獲取當前用于顯示圖形界面的屏幕的屏幕分辨率。
[0023]步驟S13，根據(jù)屏幕分辨率對圖形界面進行劃分，生成排列網(wǎng)格。
[0024]具體的，通過上述步驟S13，根據(jù)屏幕的屏幕分辨率，對圖形界面以網(wǎng)狀形式進行劃分。將圖形界面按照預定的間隔劃分為若干個正方形區(qū)域，得到與屏幕分辨率對應(yīng)的用于排列圖標的排列網(wǎng)格。
[0025]在實際應(yīng)用當中，常用的屏幕分辨率，以及屏幕比例只有幾種?？梢灶A先根據(jù)屏幕的分辨率設(shè)置與屏幕分辨率對應(yīng)的排列網(wǎng)格劃分的方案，以提高圖形界面在各種屏幕分辨率的屏幕上都能得到很好的顯示效果。
[0026]步驟S15，獲取需要顯示的數(shù)據(jù)內(nèi)容集合。
[0027]具體的，通過上述步驟S15，獲取需要通過圖形界面進行顯示的數(shù)據(jù)內(nèi)容集合，通過數(shù)據(jù)內(nèi)容集合可以確定需要顯示的內(nèi)容數(shù)量，以及需要進行顯示的數(shù)據(jù)內(nèi)容。
[0028]步驟S17，根據(jù)數(shù)據(jù)內(nèi)容集合，獲取與數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板，正方形等比排列模板用于表征在圖形界面內(nèi)，不同大小的正方形圖標按預定的排列方式進行顯示的排列顯示方法，其中，所述排列網(wǎng)格用于表征所述正方形等比模板中用于計算各個正方形圖標邊長的基本單位。
[0029]具體的，通過上述步驟S17，將預先設(shè)置的正方形等比排列模板與由數(shù)據(jù)內(nèi)容集合確定的需要顯示的內(nèi)容數(shù)量進行匹配，得到與數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板。正方形等比排列模板中的各個正方形圖標的邊長都設(shè)定為排列網(wǎng)格的基本單位的整數(shù)倍，故需要通過排列網(wǎng)格的基本單位計算得到正方形等比排列模板中，各個圖標在顯示界面內(nèi)的具體顯示位置和大小。
[0030]在實際應(yīng)用當中，可以根據(jù)需要顯示的內(nèi)容數(shù)量，預先設(shè)置不同的正方形等比排列模板。以針對需要對不同數(shù)量的內(nèi)容數(shù)據(jù)進行顯示的情況提供不同的顯示方式，從而實現(xiàn)更好地顯示效果。
[0031]步驟S19，將數(shù)據(jù)內(nèi)容集合按照正方形等比排列模板對數(shù)據(jù)內(nèi)容以正方形圖標的形式進行排列顯示。
[0032]具體的，上述步驟S19，將數(shù)據(jù)內(nèi)容中的數(shù)據(jù)，按照經(jīng)過匹配得到的正方形等比排列模板進行顯示。
[0033]通過上述步驟Sll至步驟S19，首先根據(jù)不同屏幕的屏幕分辨率，對圖形界面進行劃分，劃分為與屏幕分辨率對應(yīng)的用于排列圖標的排列網(wǎng)格。然后，將預先設(shè)置的正方形等比排列模板與數(shù)據(jù)內(nèi)容集合的屬性信息進行匹配，得到適用于數(shù)據(jù)內(nèi)容集合的正方形等比排列模板，最后，將數(shù)據(jù)內(nèi)容集合中的各個需要顯示的數(shù)據(jù)內(nèi)容依照劃分的排列網(wǎng)格，按照正方形等比排列模板提供圖標位置進行顯示。
[0034]在實際應(yīng)用當中，程序開發(fā)人員僅僅需要確定在圖形界面顯示的數(shù)據(jù)內(nèi)容，本方法就可以根據(jù)屏幕的屏幕分辨率和需要顯示的內(nèi)容獲取一套使用的正方形等比排列模板。將數(shù)據(jù)內(nèi)容以不同大小的正方形圖標的形式進行顯示。
[0035]綜上可知，本發(fā)明解決了現(xiàn)有技術(shù)中設(shè)計人員、技術(shù)人員、咨詢?nèi)藛T以及界面使用用戶需要針對每個前端界面進行重復開發(fā)，導致的開發(fā)效率低、浪費人力資源的問題，實現(xiàn)了根據(jù)需要顯示的數(shù)據(jù)內(nèi)容自動生成與數(shù)據(jù)內(nèi)容匹配的圖形界面的效果。
[0036]優(yōu)選的，本申請上述實施例中，在步驟S13根據(jù)屏幕分辨率對圖形界面進行劃分，生成排列網(wǎng)格中，步驟可以包括:
[0037]步驟S131，根據(jù)屏幕分辨率，確定用于劃分圖形界面的基本單位a。
[0038]步驟S133，按照基本單位a對圖形界面進行劃分，將圖形界面劃分為由正方形組成的排列網(wǎng)格，其中，正方形邊長為基本單位a。
[0039]具體的，上述步驟S131至步驟S133，通過屏幕分辨率確認適用于當前屏幕分辨率的用于劃分圖形界面的基本單位a。對圖形界面按照基本單位a分別進行橫向和縱向的劃分，將圖形界面劃分為由邊長為a的正方形組成的排列網(wǎng)格。根據(jù)屏幕分辨率確定基本單位a的具體步驟可以是:根據(jù)分辨率確定屏幕的橫向、縱向像素數(shù)，進而根據(jù)橫向、縱向像素數(shù)對圖形界面進行劃分，橫向得到邊長為a個像素點的數(shù)個正方形，縱向得到邊長為a個像素點的數(shù)個正方形。
[0040]在實際應(yīng)用當中，可以通過對圖形界面劃分的排列網(wǎng)格，確定每個正方形圖標的位置。在對正方形等比排列模板的設(shè)計過程中，只需要確定各個圖標在排列網(wǎng)格中的相對位置即可，不需要再針對每種屏幕分辨率設(shè)計單獨的顯示模板或者調(diào)節(jié)模板中的各個圖標在屏幕中的絕對位置。
[0041]優(yōu)選的，本申請上述實施例中，在數(shù)據(jù)內(nèi)容集合至少包括:數(shù)據(jù)內(nèi)容和與數(shù)據(jù)內(nèi)容對應(yīng)的預設(shè)圖標屬性的情況下，步驟S17根據(jù)數(shù)據(jù)內(nèi)容集合，獲取與數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板中，步驟可以包括:
[0042]步驟S171，根據(jù)數(shù)據(jù)內(nèi)容集合,確定數(shù)據(jù)內(nèi)容集合包含的數(shù)據(jù)內(nèi)容的數(shù)量。
[0043]步驟S173，將數(shù)據(jù)內(nèi)容的數(shù)量與正方形等比排列模板定義的正方形圖標的顯示數(shù)量進行匹配，得到與數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板。
[0044]步驟S175，將數(shù)據(jù)內(nèi)容的預設(shè)圖標屬性分別與正方形等比排列模板中預設(shè)的圖標屬性進行匹配，得到數(shù)據(jù)內(nèi)容在正方形等比排列模板中的顯示位置。
[0045]具體的，通過上述步驟S171至步驟S175，將獲取到的數(shù)據(jù)內(nèi)容集合進行分析，得到數(shù)據(jù)內(nèi)容集合中包含的數(shù)據(jù)內(nèi)容的數(shù)量。通過正方形等比排列模板定義的正方形圖標的顯示數(shù)量與數(shù)據(jù)內(nèi)容集合所包含的數(shù)據(jù)內(nèi)容的數(shù)量進行匹配，確定與數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板。將數(shù)據(jù)內(nèi)容集合中預先對數(shù)據(jù)內(nèi)容設(shè)置的圖標屬性與該正方形等比排列模板中各個位置圖標的屬性進行匹配，從而確定數(shù)據(jù)內(nèi)容集合中各個數(shù)據(jù)內(nèi)容在正方形等比排列模板中的顯示位置。
[0046]在實際應(yīng)用當中，數(shù)據(jù)內(nèi)容集合中包含的內(nèi)容數(shù)量是隨機的，很難針對每種情況設(shè)計一套獨有的正方形等比排列模板。所以，可以在設(shè)置正方形等比排列模板的時候，為每個正方形等比排列模板設(shè)置一個適用內(nèi)容數(shù)量的適用區(qū)間，從而擴大每種模板的適用范圍。
[0047]以數(shù)據(jù)內(nèi)容集合中由四個需要顯示的數(shù)據(jù)內(nèi)容，并且預設(shè)圖標屬性是預先設(shè)置的預設(shè)圖標邊長為例進行說明。首先確定數(shù)據(jù)內(nèi)容集合中的數(shù)據(jù)內(nèi)容的數(shù)量為四。然后獲取適用區(qū)間包含四個的正方形等比排列模板。最后，按照預設(shè)圖標屬性中預先設(shè)置的預設(shè)圖標邊長與正方形等比排列模板中的正方形圖標的邊長進行匹配，得到預設(shè)圖標邊長與正方形等比排列模板中圖標邊長的匹配結(jié)果。當然，預設(shè)圖標屬性還可以是數(shù)據(jù)內(nèi)容的顯示優(yōu)先級等。
[0048]優(yōu)選的，本申請上述實施例中，在步驟Sll讀取屏幕的屏幕分辨率之前，方法還包括:
[0049]步驟S10，設(shè)定正方形等比排列模板，正方形等比排列模板用于確定正方形圖標的顯示位置和正方形圖標的圖標大小。
[0050]具體的，通過上述步驟S10，針對需要顯示的內(nèi)容數(shù)量，預先設(shè)置不同的正方形等比排列模板。正方形等比排列模板中規(guī)定了各個圖標的顯示位置和圖標的顯示大小。
[0051]優(yōu)選的，本申請上述實施例中，在步驟SlO設(shè)定正方形等比排列模板中，步驟可以包括:
[0052]步驟S101，設(shè)定正方形圖標間的圖標間距為a。
[0053]步驟S103，設(shè)定正方形圖標中用于定義初始位置的初始圖標的邊長為a*n，其中，η為正整數(shù)。
[0054]步驟S105，設(shè)定正方形圖標用于顯示數(shù)據(jù)內(nèi)容的正方形的顯示圖標的邊長為a*n’，其中，η’為正整數(shù)。
[0055]步驟S107，根據(jù)初始圖標的邊長、顯示圖標的邊長和圖標間距，設(shè)定正方形圖標的排列位置。
[0056]具體的，通過上述步驟SlOl至步驟S107，對設(shè)定正方形等比排列模板的步驟進行說明。首先，將正方形圖標間的圖標間距設(shè)置為a，其中，a是基本單位，a與屏幕分辨率相對應(yīng)。然后，確定在圖形界面中的初始正方形圖標的位直和大小。根據(jù)初始正方形圖標的位置和大小，在初始正方形圖標的周圍，依次設(shè)定若干個正方形的顯示圖標，這些圖標的邊長都為a的整數(shù)倍。最后，根據(jù)上述初始圖標的大小和顯示圖標的大小，設(shè)定各個正方形圖標的相對位置。
[0057]在實際應(yīng)用當中，通過將邊長設(shè)置為基本單位a的這種方法，可以方便模板設(shè)計人員對模板中各個圖標的位置進行定位，不用為了保證圖標在不同屏幕分辨率的屏幕上顯示的準確性，需要確定在每種屏幕上圖標的具體坐標值。
[0058]實施例2
[0059]本發(fā)明實施例還提供了一種圖形界面的排列顯示裝置，如圖2所示，該裝置可以包括:讀取模塊21、生成模塊23、第一獲取模塊25、第二獲取模塊27和顯示模塊29。
[0060]其中，讀取模塊21，用于讀取屏幕的屏幕分辨率。
[0061]具體的，通過上述讀取模塊21，獲取當前用于顯示圖形界面的屏幕的屏幕分辨率。
[0062]生成模塊23，用于根據(jù)屏幕分辨率對圖形界面進行劃分，生成排列網(wǎng)格。
[0063]具體的，通過上述生成模塊23，根據(jù)屏幕的屏幕分辨率，對圖形界面以網(wǎng)狀形式進行劃分。將圖形界面按照預定的間隔劃分為若干個正方形區(qū)域，得到與屏幕分辨率對應(yīng)的用于排列圖標的排列網(wǎng)格。
[0064]在實際應(yīng)用當中，常用的屏幕分辨率，以及屏幕比例只有幾種?？梢灶A先根據(jù)屏幕的分辨率設(shè)置與屏幕分辨率對應(yīng)的排列網(wǎng)格劃分的方案，以提高圖形界面在各種屏幕分辨率的屏幕上都能得到很好的顯示效果。
[0065]第一獲取模塊25，用于獲取需要顯示的數(shù)據(jù)內(nèi)容集合。
[0066]具體的，通過上述第一獲取模塊25，獲取需要通過圖形界面進行顯示的數(shù)據(jù)內(nèi)容集合，通過數(shù)據(jù)內(nèi)容集合可以確定需要顯示的內(nèi)容數(shù)量，以及需要進行顯示的數(shù)據(jù)內(nèi)容。
[0067]第二獲取模塊27，用于根據(jù)數(shù)據(jù)內(nèi)容集合，獲取與數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板，正方形等比排列模板用于表征在圖形界面內(nèi)，不同大小的正方形圖標按預定的排列方式進行顯示的排列顯示方法，其中，所述排列網(wǎng)格用于表征所述正方形等比模板中用于計算各個正方形圖標邊長的基本單位。
[0068]具體的，通過上述第二獲取模塊27，將預先設(shè)置的正方形等比排列模板與由數(shù)據(jù)內(nèi)容集合確定的需要顯示的內(nèi)容數(shù)量進行匹配，得到與數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板。正方形等比排列模板中的各個正方形圖標的邊長都設(shè)定為排列網(wǎng)格的基本單位的整數(shù)倍，故需要通過排列網(wǎng)格的基本單位計算得到正方形等比排列模板中，各個圖標在顯示界面內(nèi)的具體顯示位置和大小。
[0069]在實際應(yīng)用當中，可以根據(jù)需要顯示的內(nèi)容數(shù)量，預先設(shè)置不同的正方形等比排列模板。以針對需要對同數(shù)量的內(nèi)容數(shù)據(jù)進行顯示的情況提供不同的顯示方式，從而實現(xiàn)更好地顯示效果。
[0070]顯示模塊29，用于將數(shù)據(jù)內(nèi)容集合按照正方形等比排列模板對數(shù)據(jù)內(nèi)容以正方形圖標的形式進行排列顯示。
[0071]具體的，上述顯示模塊29，將數(shù)據(jù)內(nèi)容中的數(shù)據(jù)，按照經(jīng)過匹配得到的正方形等比排列模板進行顯示。
[0072]通過上述讀取模塊21、生成模塊23、第一獲取模塊25、第二獲取模塊27和顯示模塊29，首先根據(jù)不同屏幕的屏幕分辨率，對圖形界面進行劃分，劃分為與屏幕分辨率對應(yīng)的用于排列圖標的排列網(wǎng)格。然后，將預先設(shè)置的正方形等比排列模板與數(shù)據(jù)內(nèi)容集合的屬性信息進行匹配，得到適用于數(shù)據(jù)內(nèi)容集合的正方形等比排列模板，最后，將數(shù)據(jù)內(nèi)容集合中的各個需要顯示的數(shù)據(jù)內(nèi)容依照劃分的排列網(wǎng)格，按照正方形等比排列模板提供圖標位置進行顯示。
[0073]在實際應(yīng)用當中，程序開發(fā)人員僅僅需要確定在圖形界面顯示的數(shù)據(jù)內(nèi)容，本方法就可以根據(jù)屏幕的屏幕分辨率和需要顯示的內(nèi)容獲取一套使用的正方形等比排列模板。將數(shù)據(jù)內(nèi)容以不同大小的正方形圖標的形式進行顯示。
[0074]綜上可知，本發(fā)明解決了現(xiàn)有技術(shù)中設(shè)計人員、技術(shù)人員、咨詢?nèi)藛T以及界面使用用戶需要針對每個前端界面進行重復開發(fā)，導致的開發(fā)效率低、浪費人力資源的問題，實現(xiàn)了根據(jù)需要顯示的數(shù)據(jù)內(nèi)容自動生成與數(shù)據(jù)內(nèi)容匹配的圖形界面的效果。
[0075]優(yōu)選的，本申請上述實施例中，生成模塊23包括:第一子確定模塊231和子生成模塊 233。
[0076]其中，第一子確定模塊231，用于根據(jù)屏幕分辨率，確定用于劃分圖形界面的基本單位a。
[0077]子生成模塊233，用于按照基本單位a對圖形界面進行劃分，將圖形界面劃分為由正方形組成的排列網(wǎng)格，其中，正方形邊長為基本單位a。
[0078]具體的，上述第一子確定模塊231和子生成模塊233，通過屏幕分辨率確認適用于當前屏幕分辨率的用于劃分圖形界面的基本單位a。對圖形界面按照基本單位a分別進行橫向和縱向的劃分，將圖形界面劃分為由邊長為a的正方形組成的排列網(wǎng)格。根據(jù)屏幕分辨率確定基本單位a的具體步驟可以是:根據(jù)分辨率確定屏幕的橫向、縱向像素數(shù)，進而根據(jù)橫向、縱向像素數(shù)對圖形界面進行劃分，橫向得到邊長為a個像素點的數(shù)個正方形，縱向得到邊長為a個像素點的數(shù)個正方形。
[0079]在實際應(yīng)用當中，可以通過對圖形界面劃分的排列網(wǎng)格，確定每個正方形圖標的位置。在對正方形等比排列模板的設(shè)計過程中，只需要確定各個圖標在排列網(wǎng)格中的相對位置即可，不需要再針對每種屏幕分辨率設(shè)計單獨的顯示模板或者調(diào)節(jié)模板中的各個圖標在屏幕中的絕對位置。
[0080]優(yōu)選的，本申請上述實施例中，第二獲取模塊27包括:第二子確定模塊271、第一子匹配模塊273和第二子匹配模塊275。
[0081]其中，第二子確定模塊271，用于根據(jù)數(shù)據(jù)內(nèi)容集合，確定數(shù)據(jù)內(nèi)容集合包含的數(shù)據(jù)內(nèi)容的數(shù)量，其中，數(shù)據(jù)內(nèi)容集合至少包括:數(shù)據(jù)內(nèi)容和與數(shù)據(jù)內(nèi)容對應(yīng)的預設(shè)圖標屬性。
[0082]第一子匹配模塊273，用于將數(shù)據(jù)內(nèi)容的數(shù)量與正方形等比排列模板定義的正方形圖標的顯示數(shù)量進行匹配，得到與數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板。
[0083]第二子匹配模塊275，用于將數(shù)據(jù)內(nèi)容的預設(shè)圖標屬性分別與正方形等比排列模板中預設(shè)的圖標屬性進行匹配，得到數(shù)據(jù)內(nèi)容在正方形等比排列模板中的顯示位置。
[0084]具體的，通過上述第二子確定模塊271、第一子匹配模塊273和第二子匹配模塊275，將獲取到的數(shù)據(jù)內(nèi)容集合進行分析，得到數(shù)據(jù)內(nèi)容集合中包含的數(shù)據(jù)內(nèi)容的數(shù)量。通過正方形等比排列模板定義的正方形圖標的顯示數(shù)量與數(shù)據(jù)內(nèi)容集合所包含的數(shù)據(jù)內(nèi)容的數(shù)量進行匹配，確定與數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板。將數(shù)據(jù)內(nèi)容集合中預先對數(shù)據(jù)內(nèi)容設(shè)置的圖標屬性與該正方形等比排列模板中各個位置圖標的屬性進行匹配，從而確定數(shù)據(jù)內(nèi)容集合中各個數(shù)據(jù)內(nèi)容在正方形等比排列模板中的顯示位置。
[0085]在實際應(yīng)用當中，數(shù)據(jù)內(nèi)容集合中包含的內(nèi)容數(shù)量時隨機的，很難針對每種情況設(shè)計一套獨有的正方形等比排列模板。所以，可以在設(shè)置正方形等比排列模板的時候，為每個正方形等比排列模板設(shè)置一個適用內(nèi)容數(shù)量的適用區(qū)間，從而擴大每種模板的適用范圍。
[0086]以數(shù)據(jù)內(nèi)容集合中由四個需要顯示的數(shù)據(jù)內(nèi)容，并且預設(shè)圖標屬性是預先設(shè)置的預設(shè)圖標邊長為例進行說明。首先確定數(shù)據(jù)內(nèi)容集合中的數(shù)據(jù)內(nèi)容的數(shù)量為四。然后獲取適用區(qū)間包含四個的正方形等比排列模板。最后，按照預設(shè)圖標屬性中預先設(shè)置的預設(shè)圖標邊長與正方形等比排列模板中的正方形圖標的邊長進行匹配，得到預設(shè)圖標邊長與正方形等比排列模板中圖標邊長的匹配結(jié)果。當然，預設(shè)圖標屬性還可以是數(shù)據(jù)內(nèi)容的顯示優(yōu)先級等。
[0087]優(yōu)選的，本申請上述實施例中，如圖3所述，裝置還包括:設(shè)定模塊20。
[0088]其中，設(shè)定模塊20，用于設(shè)定正方形等比排列模板，正方形等比排列模板用于確定正方形圖標的顯示位置和正方形圖標的圖標大小。
[0089]具體的，通過上述設(shè)定模塊20，針對需要顯示的內(nèi)容數(shù)量，預先設(shè)置不同的正方形等比排列模板。正方形等比排列模板中規(guī)定了各個圖標的顯示位置和圖標的顯示大小。
[0090]優(yōu)選的，本申請上述實施例中，設(shè)定模塊20包括:第一子設(shè)定模塊201、第二子設(shè)定模塊203、第三子設(shè)定模塊205和第四子設(shè)定模塊207。
[0091]其中，第一子設(shè)定模塊201，用于設(shè)定正方形圖標間的圖標間距為a。
[0092]第二子設(shè)定模塊203，用于設(shè)定正方形圖標中用于定義初始位置的初始圖標的邊長為a*n,其中，η為正整數(shù)。
[0093]第三子設(shè)定模塊205，用于設(shè)定正方形圖標用于顯示數(shù)據(jù)內(nèi)容的正方形的顯示圖標的邊長為a*n’，其中，η’為正整數(shù)。
[0094]第四子設(shè)定模塊207，用于根據(jù)初始圖標的邊長、顯示圖標的邊長和圖標間距，設(shè)定正方形圖標的排列位置。
[0095]具體的，通過上述第一子設(shè)定模塊201、第二子設(shè)定模塊203、第三子設(shè)定模塊205和第四子設(shè)定模塊207，對設(shè)定正方形比例排列模板的步驟進行說明。。首先，將正方形圖標間的圖標間距設(shè)置為a，其中，a是基本單位，a與屏幕分辨率相對應(yīng)。然后，確定在圖形界面中的初始正方形圖標的位置和大小。根據(jù)初始正方形圖標的位置和大小，在初始正方形圖標的周圍，依次設(shè)定若干個正方形的顯示圖標，這些圖標的邊長都為a的整數(shù)倍。最后，根據(jù)上述初始圖標的大小和顯示圖標的大小，設(shè)定各個正方形圖標的相對位置。
[0096]在實際應(yīng)用當中，通過將邊長設(shè)置為基本單位a的這種方法，可以方便模板設(shè)計人員對模板中各個圖標的位置進行定位，不用為了保證圖標在不同屏幕分辨率的屏幕上顯示的準確性，需要確定在每種屏幕上圖標的具體坐標值。
[0097]需要說明的是，對于前述的各方法實施例，為了簡單描述，故將其都表述為一系列的動作組合，但是本領(lǐng)域技術(shù)人員應(yīng)該知悉，本發(fā)明并不受所描述的動作順序的限制，因為依據(jù)本發(fā)明，某些步驟可以采用其他順序或者同時進行。其次，本領(lǐng)域技術(shù)人員也應(yīng)該知悉，說明書中所描述的實施例均屬于優(yōu)選實施例，所涉及的動作和模塊并不一定是本發(fā)明所必須的。
[0098]在上述實施例中，對各個實施例的描述都各有側(cè)重，某個實施例中沒有詳述的部分，可以參見其他實施例的相關(guān)描述。
[0099]在本申請所提供的幾個實施例中，應(yīng)該理解到，所揭露的裝置，可通過其它的方式實現(xiàn)。例如，以上所描述的裝置實施例僅僅是示意性的，例如所述單元的劃分，僅僅為一種邏輯功能劃分，實際實現(xiàn)時可以有另外的劃分方式，例如多個單元或組件可以結(jié)合或者可以集成到另一個系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另一點，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些接口，裝置或單元的間接耦合或通信連接，可以是電性或其它的形式。
[0100]所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個地方，或者也可以分布到多個網(wǎng)絡(luò)單元上?？梢愿鶕?jù)實際的需要選擇其中的部分或者全部單元來實現(xiàn)本實施例方案的目的。
[0101]另外，在本發(fā)明各個實施例中的各功能單元可以集成在一個處理單元中，也可以是各個單元單獨物理存在，也可以兩個或兩個以上單元集成在一個單元中。上述集成的單元既可以采用硬件的形式實現(xiàn)，也可以采用軟件功能單元的形式實現(xiàn)。
[0102]所述集成的單元如果以軟件功能單元的形式實現(xiàn)并作為獨立的產(chǎn)品銷售或使用時，可以存儲在一個計算機可讀取存儲介質(zhì)中?；谶@樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說對現(xiàn)有技術(shù)做出貢獻的部分或者該技術(shù)方案的全部或部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計算機軟件產(chǎn)品存儲在一個存儲介質(zhì)中，包括若干指令用以使得一臺計算機設(shè)備(可為個人計算機、移動終端、服務(wù)器或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個實施例所述方法的全部或部分步驟。而前述的存儲介質(zhì)包括:U盤、只讀存儲器(ROM，Read-OnlyMemory)、隨機存取存儲器(RAM, Random Access Memory)、移動硬盤、磁碟或者光盤等各種可以存儲程序代碼的介質(zhì)。
[0103]以上所述僅為本發(fā)明的優(yōu)選實施例而已，并不用于限制本發(fā)明，對于本領(lǐng)域的技術(shù)人員來說，本發(fā)明可以有各種更改和變化。凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進等，均應(yīng)包含在本發(fā)明的保護范圍之內(nèi)。
【權(quán)利要求】
1.一種圖形界面的排列顯示方法，其特征在于，包括: 讀取屏幕的屏幕分辨率； 根據(jù)所述屏幕分辨率對所述圖形界面進行劃分，生成排列網(wǎng)格； 獲取需要顯示的數(shù)據(jù)內(nèi)容集合； 根據(jù)所述數(shù)據(jù)內(nèi)容集合，獲取與所述數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板，所述正方形等比排列模板用于表征在圖形界面內(nèi)，不同大小的正方形圖標按預定的排列方式進行顯示的排列顯示方法，其中，所述排列網(wǎng)格用于表征所述正方形等比模板中用于計算各個正方形圖標邊長的基本單位； 將所述數(shù)據(jù)內(nèi)容集合按照所述正方形等比排列模板對數(shù)據(jù)內(nèi)容以正方形圖標的形式進行排列顯示。
2.根據(jù)權(quán)利要求1所述的方法，其特征在于，根據(jù)所述屏幕分辨率對所述圖形界面進行劃分，生成排列網(wǎng)格的步驟包括: 根據(jù)所述屏幕分辨率，確定用于劃分所述圖形界面的基本單位a ； 按照所述基本單位a對所述圖形界面進行劃分，將所述圖形界面劃分為由正方形組成的所述排列網(wǎng)格，其中，所述正方形邊長為所述基本單位a。
3.根據(jù)權(quán)利要求2所述的方法，其特征在于，所述數(shù)據(jù)內(nèi)容集合至少包括:所述數(shù)據(jù)內(nèi)容和與所述數(shù)據(jù)內(nèi)容對應(yīng)的預設(shè)圖標屬性，其中，根據(jù)所述數(shù)據(jù)內(nèi)容集合，獲取與所述數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板的步驟包括: 根據(jù)所述數(shù)據(jù)內(nèi)容集合，確定所述數(shù)據(jù)內(nèi)容集合包含的所述數(shù)據(jù)內(nèi)容的數(shù)量； 將所述數(shù)據(jù)內(nèi)容的數(shù)量與所述正方形等比排列模板定義的所述正方形圖標的顯示數(shù)量進行匹配，得到與所述數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板； 將所述數(shù)據(jù)內(nèi)容的所述預設(shè)圖標屬性分別與所述正方形等比排列模板中預設(shè)的圖標屬性進行匹配，得到所述數(shù)據(jù)內(nèi)容在所述正方形等比排列模板中的顯示位置。
4.根據(jù)權(quán)利要求2所述的方法，其特征在于，在所述讀取屏幕的屏幕分辨率之前，所述方法還包括: 設(shè)定所述正方形等比排列模板，所述正方形等比排列模板用于確定所述正方形圖標的顯示位置和所述正方形圖標的圖標大小。
5.根據(jù)權(quán)利要求4所述的方法，其特征在于，所述設(shè)定所述正方形等比排列模板的步驟包括: 設(shè)定所述正方形圖標間的圖標間距為a ； 設(shè)定所述正方形圖標中用于定義初始位置的初始圖標的邊長為a*n，其中，所述η為正整數(shù)； 設(shè)定所述正方形圖標用于顯示數(shù)據(jù)內(nèi)容的正方形的顯示圖標的邊長為a*n’，其中，所述η’為正整數(shù)； 根據(jù)所述初始圖標的邊長、所述顯示圖標的邊長和所述圖標間距，設(shè)定所述正方形圖標的排列位置。
6.一種圖形界面的排列顯示裝置，其特征在于，所述裝置包括: 讀取模塊，用于讀取屏幕的屏幕分辨率； 生成模塊，用于根據(jù)所述屏幕分辨率對所述圖形界面進行劃分，生成排列網(wǎng)格； 第一獲取模塊，用于獲取需要顯示的數(shù)據(jù)內(nèi)容集合； 第二獲取模塊，用于根據(jù)所述數(shù)據(jù)內(nèi)容集合，獲取與所述數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板，所述正方形等比排列模板用于表征在圖形界面內(nèi)，不同大小的正方形圖標按預定的排列方式進行顯示的排列顯示方法，其中，所述排列網(wǎng)格用于表征所述正方形等比模板中用于計算各個正方形圖標邊長的基本單位； 顯示模塊，用于將所述數(shù)據(jù)內(nèi)容集合按照所述正方形等比排列模板對數(shù)據(jù)內(nèi)容以正方形圖標的形式行排列顯示。
7.根據(jù)權(quán)利要求6所述的裝置，其特征在于，所述生成模塊包括: 第一子確定模塊，用于根據(jù)所述屏幕分辨率，確定用于劃分所述圖形界面的基本單位a ； 子生成模塊，用于按照所述基本單位a對所述圖形界面進行劃分，將所述圖形界面劃分為由正方形組成的所述排列網(wǎng)格，其中，所述正方形邊長為所述基本單位a。
8.根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述第二獲取模塊包括: 第二子確定模塊，用于根據(jù)所述數(shù)據(jù)內(nèi)容集合，確定所述數(shù)據(jù)內(nèi)容集合包含的所述數(shù)據(jù)內(nèi)容的數(shù)量，其中，所述數(shù)據(jù)內(nèi)容集合至少包括:所述數(shù)據(jù)內(nèi)容和與所述數(shù)據(jù)內(nèi)容對應(yīng)的預設(shè)圖標屬性； 第一子匹配模塊，用于將所述數(shù)據(jù)內(nèi)容的數(shù)量與所述正方形等比排列模板定義的所述正方形圖標的顯示數(shù)量進行匹配，得到與所述數(shù)據(jù)內(nèi)容集合匹配的正方形等比排列模板； 第二子匹配模塊，用于將所述數(shù)據(jù)內(nèi)容的所述預設(shè)圖標屬性分別與所述正方形等比排列模板中預設(shè)的圖標屬性進行匹配，得到所述數(shù)據(jù)內(nèi)容在所述正方形等比排列模板中的顯示位置。
9.根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述裝置還包括: 設(shè)定模塊，用于設(shè)定所述正方形等比排列模板，所述正方形等比排列模板用于確定所述正方形圖標的顯示位置和所述正方形圖標的圖標大小。
10.根據(jù)權(quán)利要求9所述的裝置，其特征在于，所述設(shè)定模塊包括: 第一子設(shè)定模塊，用于設(shè)定所述正方形圖標間的圖標間距為a ； 第二子設(shè)定模塊，用于設(shè)定所述正方形圖標中用于定義初始位置的初始圖標的邊長為a*n,其中，所述η為正整數(shù)； 第三子設(shè)定模塊，用于設(shè)定所述正方形圖標用于顯示數(shù)據(jù)內(nèi)容的正方形的顯示圖標的邊長為a*n’，其中，所述η’為正整數(shù)； 第四子設(shè)定模塊，用于根據(jù)所述初始圖標的邊長、所述顯示圖標的邊長和所述圖標間距，設(shè)定所述正方形圖標的排列位置。
【文檔編號】G06F3/0481GK104407779SQ201410779533
【公開日】2015年3月11日 申請日期:2014年12月15日 優(yōu)先權(quán)日:2014年12月15日
【發(fā)明者】黃佳嘉 申請人:北京國雙科技有限公司