本申請涉及計算機技術領域,尤其涉及一種待展示對象的全尺寸適配方法及裝置。
背景技術:
待展示對象是指可以展示于網頁或終端的任意應用界面的對象的統(tǒng)稱。其可以是一張圖片,也可以是圖片與文字等其他信息的組合。
目前的待展示對象制作一次只能適應單一尺寸,也就是在制作待展示對象時,直接確定待展示對象中所包含的所有元素的尺寸及位置信息,該尺寸及位置信息是固定不變的。而當需要將該待展示對象展示于某一展示區(qū)域時,往往展示區(qū)域的尺寸與制作的待展示對象的尺寸不一致,則出現待展示對象的尺寸無法適配展示區(qū)域尺寸的情況。
為了解決上述問題,一般采用將待展示對象進行縮放或拉伸等處理實現待展示對象的全尺寸適配。而縮放及拉伸處理會影響待展示對象的展示效果,例如,會出現待展示對象變形、或模糊等情況,因此該處理方式無法保證待展示對象的展示效果。
技術實現要素:
本申請解決的技術問題之一是提供待展示對象的全尺寸適配方法及裝置,在保證待展示對象的展示效果的同時,簡單方便的實現全尺寸適配。
根據本申請一方面的一個實施例,提供了一種待展示對象的全尺寸適配方法,包括:
獲取待展示對象包含的元素以及所述元素的描述信息,所述元素的描述信息包括:元素間的父子關系信息以及基于所述父子關系適配不同尺寸 的展示區(qū)域的規(guī)則;
基于獲取的所述元素及所述元素的描述信息結合當前展示區(qū)域的尺寸信息,確定所述待展示對象包含的元素適配所述當前展示區(qū)域后的尺寸及位置;
以確定的所述尺寸及位置在所述當前展示區(qū)域展示所述待展示對象包含的元素。
根據本申請另一方面的一個實施例,提供了一種待展示對象的全尺寸適配裝置,包括:
獲取單元,用于獲取待展示對象包含的元素以及所述元素的描述信息,所述元素的描述信息包括:元素間的父子關系信息以及基于所述父子關系適配不同尺寸的展示區(qū)域的規(guī)則;
確定單元,用于基于獲取的所述元素及所述元素的描述信息結合當前展示區(qū)域的尺寸信息,確定所述待展示對象包含的元素適配所述當前展示區(qū)域后的尺寸及位置;
展示單元,用于以確定的所述尺寸及位置在所述當前展示區(qū)域展示所述待展示對象包含的元素。
本實施例獲取待展示對象的所包含的元素及元素的描述信息,基于獲取的所述元素及所述元素的描述信息結合當前展示區(qū)域的尺寸信息,可以確定所述待展示對象包含的元素適配所述當前展示區(qū)域后的尺寸及位置,最終以確定的所述尺寸及位置在所述當前展示區(qū)域展示所述待展示對象包含的元素。由于所述元素的描述信息中包括元素間的父子關系信息以及基于所述父子關系適配不同尺寸的展示區(qū)域的規(guī)則,因此按照該規(guī)則可以在保證待展示對象的展示效果的同時,簡單方便的令待展示對象可以適配各種展示區(qū)域,不會出現待展示對象的變形及模糊等情況。
本領域普通技術人員將了解,雖然下面的詳細說明將參考圖示實施例、附圖進行,但本申請并不僅限于這些實施例。而是,本申請的范圍是廣泛的,且意在僅通過后附的權利要求限定本申請的范圍。
附圖說明
通過閱讀參照以下附圖所作的對非限制性實施例所作的詳細描述,本申請的其它特征、目的和優(yōu)點將會變得更明顯:
圖1是根據本申請一個實施例的待展示對象的全尺寸適配方法的流程圖。
圖2是根據本申請一個實施例的獲取的各元素間父子關系示意圖。
圖3是根據本申請一個實施例的以適配后的尺寸展示待展示對象示意圖。
圖4是根據本申請另一個實施例的以適配后的尺寸展示待展示對象示意圖。
圖5是根據本申請一個實施例的待展示對象的全尺寸適配裝置的結構示意圖。
附圖中相同或相似的附圖標記代表相同或相似的部件。
具體實施方式
在更加詳細地討論示例性實施例之前應當提到的是,一些示例性實施例被描述成作為流程圖描繪的處理或方法。雖然流程圖將各項操作描述成順序的處理,但是其中的許多操作可以被并行地、并發(fā)地或者同時實施。此外,各項操作的順序可以被重新安排。當其操作完成時所述處理可以被終止,但是還可以具有未包括在附圖中的附加步驟。所述處理可以對應于方法、函數、規(guī)程、子例程、子程序等等。
所述計算機設備包括用戶設備與網絡設備。其中,所述用戶設備包括但不限于電腦、智能手機、PDA等;所述網絡設備包括但不限于單個網絡服務器、多個網絡服務器組成的服務器組或基于云計算(Cloud Computing)的由大量計算機或網絡服務器構成的云,其中,云計算是分布式計算的一種,由一群松散耦合的計算機集組成的一個超級虛擬計算機。其中,所述計算機設備可單獨運行來實現本申請,也可接入網絡并通過與網絡中的其他計算機設備的交互操作來實現本申請。其中,所述計算機設備所處的網 絡包括但不限于互聯(lián)網、廣域網、城域網、局域網、VPN網絡等。
需要說明的是,所述用戶設備、網絡設備和網絡等僅為舉例,其他現有的或今后可能出現的計算機設備或網絡如可適用于本申請,也應包含在本申請保護范圍以內,并以引用方式包含于此。
后面所討論的方法(其中一些通過流程圖示出)可以通過硬件、軟件、固件、中間件、微代碼、硬件描述語言或者其任意組合來實施。當用軟件、固件、中間件或微代碼來實施時,用以實施必要任務的程序代碼或代碼段可以被存儲在機器或計算機可讀介質(比如存儲介質)中。(一個或多個)處理器可以實施必要的任務。
這里所公開的具體結構和功能細節(jié)僅僅是代表性的,并且是用于描述本申請的示例性實施例的目的。但是本申請可以通過許多替換形式來具體實現,并且不應當被解釋成僅僅受限于這里所闡述的實施例。
應當理解的是,雖然在這里可能使用了術語“第一”、“第二”等等來描述各個單元,但是這些單元不應當受這些術語限制。使用這些術語僅僅是為了將一個單元與另一個單元進行區(qū)分。舉例來說,在不背離示例性實施例的范圍的情況下,第一單元可以被稱為第二單元,并且類似地第二單元可以被稱為第一單元。這里所使用的術語“和/或”包括其中一個或更多所列出的相關聯(lián)項目的任意和所有組合。
應當理解的是,當一個單元被稱為“連接”或“耦合”到另一單元時,其可以直接連接或耦合到所述另一單元,或者可以存在中間單元。與此相對,當一個單元被稱為“直接連接”或“直接耦合”到另一單元時,則不存在中間單元。應當按照類似的方式來解釋被用于描述單元之間的關系的其他詞語(例如“處于...之間”相比于“直接處于...之間”,“與...鄰近”相比于“與...直接鄰近”等等)。
這里所使用的術語僅僅是為了描述具體實施例而不意圖限制示例性實施例。除非上下文明確地另有所指,否則這里所使用的單數形式“一個”、“一項”還意圖包括復數。還應當理解的是,這里所使用的術語“包括”和/或“包含”規(guī)定所陳述的特征、整數、步驟、操作、單元和/或組件的存在,而不排除存在或添加一個或更多其他特征、整數、步驟、操作、單 元、組件和/或其組合。
還應當提到的是,在一些替換實現方式中,所提到的功能/動作可以按照不同于附圖中標示的順序發(fā)生。舉例來說,取決于所涉及的功能/動作,相繼示出的兩幅圖實際上可以基本上同時執(zhí)行或者有時可以按照相反的順序來執(zhí)行。
本申請實施例中所述的待展示對象的全尺寸適配是指待展示對象的尺寸可以適應不同尺寸的展示區(qū)域,同時保證待展示對象的展示效果。保證待展示對象的展示效果包括但不限于:不改變待展示對象中任一元素的視覺特征。
本申請實施例實現在保證待展示對象的展示效果的情況下實現全尺寸適配的方案為:將全尺寸適配邏輯封裝成一個工具,將該工具安裝于需要實現全尺寸適配的設備(例如,網絡設備或用戶端設備)中。本申請實施例的待展示對象需要按照本申請約定的規(guī)則制作。在執(zhí)行待展示對象的全尺寸適配時,由安裝了所述工具的設備根據所述規(guī)則以及展示區(qū)域的尺寸確定待展示對象的尺寸,以實現待展示對象的尺寸可以適應展示區(qū)域的尺寸,這樣制作的待展示對象可以適應各種展示區(qū)域的尺寸。
其中,可以采用JavaScript語言制作本申請實施例的滿足約定規(guī)則的待展示對象。當然,本實施例并不局限于此。按照本申請實施例約定的規(guī)則制作的待展示對象至少包括:元素以及元素的描述信息。
所述元素即該待展示對象中包含的組成部分。
其中,為便于識別,可使用指定屬性標識標記每個元素及元素的描述信息。例如,使用data-rwd標識來標記待展示對象中的元素及元素的描述信息。
在元素的描述信息中至少包含如下信息:元素間的父子關系信息以及基于所述父子關系適配不同尺寸的展示區(qū)域的規(guī)則。也就是,本申請實施例是以父子關系描述元素間的關系。由于本申請實施例是基于父子關系適配不同尺寸的展示區(qū)域的規(guī)則,因此在該規(guī)則中描述元素的尺寸及位置時,不但可以描述元素尺寸允許的范圍、元素之間距離等,還可以描述諸如:子元素的某一尺寸與另一元素的某一尺寸相同,或子元素的某一尺寸占父 元素的比值、或子元素與父元素某一邊的距離是另一元素某一尺寸的倍數等等,也就是基于父子關系適配不同尺寸的展示區(qū)域的規(guī)則能夠充分描述元素間的尺寸或位置關系,使得元素的布局更加靈活。
基于所述父子關系適配不同尺寸的展示區(qū)域的規(guī)則至少包括:各元素在不同尺寸范圍的展示區(qū)域展示時的尺寸及位置的確定規(guī)則;及確定各元素適配后的尺寸及位置的優(yōu)先順序。
確定各元素適配后的尺寸及位置的優(yōu)先順序通過如下方式表達:
優(yōu)先順序指示信息;或
各元素聲明的先后順序。
所述優(yōu)先順序指示信息,即,在規(guī)則中通過指示信息明確指示確定各元素適配后的尺寸及位置的優(yōu)先順序。各元素聲明的先后順序,即,描述信息中各元素出現的先后順序。其中,確定各元素適配后的尺寸及位置的優(yōu)先順序包括但不限于:從最外層父元素開始,依照從父元素到子元素順序適配各元素的尺寸及位置,對于同一父元素下的同級別元素按照聲明的先后順序適配各元素的尺寸及位置。也就是同一父元素下的同級別子元素中,先聲明的先確定其適配后的尺寸及位置,對于不同父元素下的同級別子元素不限制確定適配后尺寸及位置的先后順序。
其中,所述規(guī)則可以規(guī)定在不同尺寸的展示區(qū)域展示時各元素間的相對展示位置可以不同??梢?,通過該規(guī)則可靈活設置各元素的展示樣式。
下面結合附圖對本申請的技術方案作進一步詳細描述。
圖1是根據本申請一個實施例的待展示對象的全尺寸適配方法的流程圖,該方法用于在一展示區(qū)域展示待展示對象時,確定待展示對象的尺寸,以實現待展示對象的尺寸完全適應該展示區(qū)域的尺寸,且保證待展示對象的展示效果。如圖1中所示,該方法主要包括如下步驟:
S10、獲取待展示對象包含的元素以及所述元素的描述信息;
S11、基于獲取的所述元素及所述元素的描述信息結合當前展示區(qū)域的尺寸信息,確定所述待展示對象包含的元素適配所述當前展示區(qū)域后的尺寸及位置;
S12、以確定的所述尺寸及位置在所述當前展示區(qū)域展示所述待展示 對象包含的元素。
為進一步理解本實施例的方法,下面對上述各步驟做進一步詳細介紹。
步驟S10中獲取待展示對象包含的元素及元素的描述信息時,可依據指定屬性標識(如data-rwd標識)來識別待展示對象中包含的元素及元素的描述信息,獲取識別的所有元素。
一種實施例所述待展示對象的元素及元素的描述信息使用HTML(超文本標記語言)語法進行標記,不但符合已有技術的開發(fā)習慣,同時能夠方便的顯示出元素間的父子關系,例如,HTML中元素的包含與被包含關系,即可表示元素的父子關系。且通過各元素聲明的先后順序即可獲得確定各元素適配后的尺寸的先后順序。當然本申請實施例并不局限于此。
假設一種實例所獲取的待展示對象包含的元素包括:最外層容器、待展示大圖區(qū)域、大圖、商業(yè)標識(logo)、標題和小標志區(qū)域、標題、小標志。通過獲取元素的描述信息獲知上述元素的父子關系如圖2中所示。圖2中的待展示大圖區(qū)域、商業(yè)標識(logo)和標題和小標志區(qū)域屬于同一級別,且為同屬于一個父元素“最外層容器”下的子元素。標題、小標志屬于同一級別,且為同屬于一個父元素“標題和小標志區(qū)域”下的子元素。大圖屬于待展示大圖區(qū)域下的子元素。
本實例中所獲取的各元素的描述信息包括各元素適配不同尺寸的展示區(qū)域的規(guī)則和確定各元素適配后的尺寸及位置的優(yōu)先順序。假設獲取的上述各元素適配不同尺寸的展示區(qū)域的規(guī)則如下:
最外層容器的尺寸適配規(guī)則定義為superview.width,superview.height,即寬度和高度分別與展示區(qū)域的寬度和高度一致;最外層容器的位置為:left:0,top:0,即最外層容器的左邊和展示區(qū)域的左邊重合,即最外層容器的上邊與展示區(qū)域的上邊重合。這樣無論展示區(qū)域尺寸為多少,該最外層容器均可以與展示區(qū)域尺寸一致。
商業(yè)標識(logo)的尺寸為100×80px,按“覆蓋子元素的最小值”的原則自動適配,所述“覆蓋子元素的最小值”的原則即保持原始尺寸(100×80px)不變。商業(yè)標識(logo)的位置為在展示區(qū)域的高大于100px時為:left:0,bottom:0,即商業(yè)標識(logo)的左邊與展示區(qū)域的左邊重 合,下邊與展示區(qū)域下邊重合;在展示區(qū)域的高小于等于100px時為:top:0,right:0,即,商業(yè)標識(logo)的右邊與展示區(qū)域的右邊重合,商業(yè)標識(logo)的上邊與展示區(qū)域的上邊重合。
標題和小標志區(qū)域的尺寸為使用減法描述的尺寸確定規(guī)則,該區(qū)域的寬的確定規(guī)則為展示區(qū)域的高小于等于100px時,該標題和小標志區(qū)域的高為展示區(qū)域的高減去商業(yè)標識(logo)的高,寬等于商業(yè)標識(logo)的寬,位置為bottom:0,right:0,即,標題和小標志區(qū)域的下邊與展示區(qū)域的下邊重合,右邊與展示區(qū)域的右邊重合;展示區(qū)域的高大于100px時,該標題和小標志區(qū)域的高等于商業(yè)標識(logo)的高,寬為展示區(qū)域的寬減去商業(yè)標識(logo)的寬,位置為bottom:0,right:0,即,標題和小標志區(qū)域的下邊與展示區(qū)域的下邊重合,右邊與展示區(qū)域的右邊重合。該元素中的子元素標題”與同一級別的小標志在豎直方向按間距1%的方式在父元素中顯示,且在展示區(qū)域的高小于等于100px時,小標志隱藏。
標題的寬的確定規(guī)則為:展示區(qū)域的高大于100px時,標題的寬為展示區(qū)域的寬減去商業(yè)標識(logo)的寬再減去40px,高為30px,標題的位置為left:20,即距離父元素左邊20px。且可指定標題中字體的大小。展示區(qū)域的高小于等于100px時,標題的高等于標題和小標志區(qū)域的高,寬等于標題和小標志區(qū)域的寬。
小標志的寬的確定規(guī)則為:展示區(qū)域的高大于100px時,與標題寬一致,高為20px,位置為left:20,即左邊與父元素距離20px。展示區(qū)域的高小于等于100px時,小標志隱藏。
待展示大圖區(qū)域的寬度確定規(guī)則定義為:展示區(qū)域的高大于100px時,superview.width,即寬度與展示區(qū)域的尺寸一致,高度確定規(guī)則定義為待展示區(qū)域的高度減去商業(yè)標識(logo)的高度。位置為:left:0,top:0,即距離其父元素“最外層容器”的左邊及上邊均為0。展示區(qū)域的高小于等于100px時,待展示大圖區(qū)域的寬為展示區(qū)域的寬減去商業(yè)標識(logo)的寬,高等于展示區(qū)域的高,位置為:left:0,top:0。
大圖的尺寸確定規(guī)則為使用keep函數表示的,即表示按照當前設定的大圖的寬高比按比例縮放大圖。假設大圖的設定的寬高比為5:3。位置 使用contain函數表示,即大圖的位置為在父元素“待展示大圖區(qū)域”中全部展示,即覆蓋父元素全部范圍。
上面所述僅為一種實例,實際應用中可以針對展示區(qū)域的各種尺寸(尺寸范圍)設置相應的尺寸及位置的確定規(guī)則。
假如所述規(guī)則中沒有優(yōu)先順序指示信息來指示各元素適配時的優(yōu)先順序,則表明需要根據各元素聲明先后順序來確定優(yōu)先順序,也就是同一父元素下的同級別子元素中,先聲明的先確定其適配后的尺寸及位置,對于不同父元素下的同級別子元素不限制確定適配后尺寸及位置的先后順序。上述實例中各元素聲明的順序為:最外層容器-商業(yè)標識(logo)-標題和小標志區(qū)域-標題-小標志-待展示大圖區(qū)域-大圖。
步驟S11中需要先獲取當前展示區(qū)域的尺寸信息(本申請實施例對具體獲取方法不做限制),再基于獲取的所述元素及所述元素的描述信息結合當前展示區(qū)域的尺寸信息,按照獲取的確定各元素適配后的尺寸及位置的優(yōu)先順序來確定待展示對象包含的元素適配所述當前展示區(qū)域后的尺寸及位置。
仍以上面的實例為例,上面的實例中最外層容器為最外層父元素,則在確定各元素適配后的尺寸及位置時首先確定最外層容器適配后的尺寸及位置,由于沒有與最外層容器同級別的元素,因此按照從父元素到子元素的順序確定,也就是接下來確定該最外層容器包含的子元素適配后的尺寸及位置,包括:確定商業(yè)標識(logo)、標題和小標志區(qū)域、待展示大圖區(qū)域三個子元素適配后的尺寸及位置,并按照該三個子元素聲明的順序來確定三個子元素的適配后的尺寸及位置,即,按照商業(yè)標識(logo)-標題和小標志區(qū)域-待展示大圖區(qū)域的順序確定三個子元素適配后的尺寸及位置。之后再分別確定該三個子元素所包含的子元素適配后的尺寸及位置,包括確定標題和小標志的適配后的尺寸及位置以及確定大圖的適配后的尺寸及位置。標題和小標志同屬于一個父元素下,則按照聲明的順序確定適配后的尺寸及位置,也就是先確定標題的適配后的尺寸及位置,后確定小標志的適配后的尺寸及位置。對于大圖,其與標題及小標志不屬于同一父元素下,因此確定的先后順序無限制,也就是其可以與標題和/或小標志 同時或之前或之后來確定適配后的尺寸及位置。
本實施例中按照指定的順序(即獲取的確定各元素適配后的尺寸及位置的優(yōu)先順序)來確定各元素適配后的尺寸及位置,這樣不會出錯計算沖突問題,也就是針對同一元素所得到的適配后的尺寸及位置是唯一的。
依照上面實例中獲取的所述規(guī)則,假設一種實例當前展示區(qū)域的尺寸為590×400px,則所確定的各元素適配后的尺寸及位置如下:
最外層容器的寬、高分別和當前展示區(qū)域的寬、高一致,也就是最外層容器尺寸為:590×400px。位置為:最外層容器的左邊與當前展示區(qū)域的左邊重合,最外層容器的上邊與當前展示區(qū)域的上邊重合。
商業(yè)標識(logo)會按其真實尺寸(100×80px)顯示出來;位置為:商業(yè)標識(logo)的左邊當前展示區(qū)域的左邊重合,下邊與當前展示區(qū)域的下邊重合。
標題和小標志區(qū)域寬為當前展示區(qū)域寬-商業(yè)標識(logo)寬的所得值,即590-100=490px;高為與商業(yè)標識(logo)相同的值為80px;位置為:該區(qū)域右邊與當前展示區(qū)域右邊重合,下邊與當前展示區(qū)域下邊重合。
標題的寬是當前展示區(qū)域的寬-商業(yè)標識(logo)的寬-40px的所得值,即,590-100-40=450px;高為30px。位置為:左邊與父元素“標題和小標志區(qū)域”距離20px。
小標志的寬和標題的寬一致450px,高為20px。位置為:左邊與父元素距離20px;標題和小標志在豎直方向,在其父元素中按間距1%,標題,間距1%,小標志,間距1%的方式顯示。
待展示大圖區(qū)域的寬與當前展示區(qū)域寬一致為590px,高為當前展示區(qū)域高減去商業(yè)標識(logo)的高400-80=320px,位置為左邊與當前展示區(qū)域的左邊重合,上邊和當前展示區(qū)域的上邊重合。
大圖的尺寸按照設定的大圖的寬高比5:3按比例縮放,使其覆蓋待展示大圖區(qū)域的全部范圍。
另一實例,假設獲取的當前展示區(qū)域的尺寸為展示區(qū)域的尺寸310×100px,此時當前展示區(qū)域的高等于100px,則所確定的各元素適配后的尺寸及位置如下:
最外層容器的寬、高分別和當前展示區(qū)域的寬、高一致,也就是最外層容器尺寸為:310×100px。位置為:最外層容器的左邊與當前展示區(qū)域的左邊重合,最外層容器的上邊與當前展示區(qū)域的上邊重合。
商業(yè)標識(logo)會按其真實尺寸(100×80px)顯示出來;位置為:商業(yè)標識(logo)的上邊當前展示區(qū)域的上邊重合,右邊與當前展示區(qū)域的右邊重合。
標題和小標志區(qū)域寬為與商業(yè)標識(logo)寬相同為80px;高為當前展示區(qū)域的高減去商業(yè)標識(logo)的高,100-80=20px;位置為:該區(qū)域右邊與當前展示區(qū)域右邊重合,下邊與當前展示區(qū)域下邊重合。
標題的尺寸及位置與其父元素標題和小標志區(qū)域的相同。小標志隱藏。
待展示大圖區(qū)域的高與當前展示區(qū)域高一致為100px,寬為當前展示區(qū)域寬減去商業(yè)標識(logo)的寬310-100=210px,位置為左邊與當前展示區(qū)域的左邊重合,上邊和當前展示區(qū)域的上邊重合。
大圖的尺寸按照設定的大圖的寬高比5:3按比例縮放,使其覆蓋待展示大圖區(qū)域的全部范圍。
上述步驟S11完成了確定待展示對象適配當前展示區(qū)域后的尺寸及位置,步驟S12為以確定的所述尺寸及位置在所述當前展示區(qū)域展示所述待展示對象包含的元素。
在當前展示區(qū)域的尺寸為590×400px情況下,以上述確定的各元素適配后的尺寸及位置在當前展示區(qū)域中展示待展示對象的實例如圖3中所示。
在當前展示區(qū)域的尺寸為展示區(qū)域的尺寸310×100px情況下,以上述確定的各元素適配后的尺寸及位置在當前展示區(qū)域中展示待展示對象的實例如圖4中所示。
可見,依照指定規(guī)則制作的待展示對象可以適配不同尺寸的展示區(qū)域,實現了待展示對象的全尺寸適配。且由上述介紹可知,本申請實施例在制作待展示對象時,無需關注具體適配方法,只需關注各元素展示樣式。而具體的適配方法可以在展示待展示對象時由具有適配工具的設備完成。
本申請實施例通過在制作的待展示對象中設置各元素的適配規(guī)則,所 述規(guī)則比較靈活,使得待展示對象可以實現全尺寸適配。且在全尺寸適配時保證待展示對象的整體展示效果的同時,可以設置在適配不同尺寸的展示區(qū)域時保持某些元素尺寸不變,以保證該元素展示效果更佳。
本申請實施例還提供一種與上述待展示對象的全尺寸適配方法對應的待展示對象的全尺寸適配裝置,該裝置可設置于網絡設備或用戶端設備中。如圖5所示為所述裝置結構示意圖,該裝置主要包括:
獲取單元50,用于獲取待展示對象包含的元素以及所述元素的描述信息,所述元素的描述信息包括:元素間的父子關系信息以及基于所述父子關系適配不同尺寸的展示區(qū)域的規(guī)則;也就是,本申請實施例是以父子關系描述元素間的關系。由于本申請實施例是基于父子關系適配不同尺寸的展示區(qū)域的規(guī)則,因此在該規(guī)則中描述元素的尺寸及位置時,不但可以描述元素尺寸允許的范圍、元素之間距離等,還可以描述諸如:子元素的某一尺寸與另一元素的某一尺寸相同,或子元素的某一尺寸占父元素的比值、或子元素與父元素某一邊的距離是另一元素某一尺寸的倍數等等,也就是基于父子關系適配不同尺寸的展示區(qū)域的規(guī)則能夠充分描述元素間的尺寸或位置關系,使得元素的布局更加靈活。
確定單元51,用于基于獲取的所述元素及所述元素的描述信息結合當前展示區(qū)域的尺寸信息,確定所述待展示對象包含的元素適配所述當前展示區(qū)域后的尺寸及位置;
展示單元52,用于以確定的所述尺寸及位置在所述當前展示區(qū)域展示所述待展示對象包含的元素。
本申請實施例可使用指定屬性標識標記待展示對象中包含的元素及元素的描述信息,例如,使用data-rwd標識來標記待展示對象中的元素及元素的描述信息。則獲取單元50被配置為:
通過所述指定屬性標識獲取待展示對象包含的元素及所述元素的描述信息。
本實施例中所述的基于所述父子關系適配不同尺寸的展示區(qū)域的規(guī)則包括:
各元素在不同尺寸范圍的展示區(qū)域展示時的尺寸及位置的確定規(guī)則;及確定各元素適配后的尺寸及位置的優(yōu)先順序。
確定各元素適配后的尺寸及位置的優(yōu)先順序通過如下方式表達:
優(yōu)先順序指示信息;或
各元素聲明的先后順序。
所述優(yōu)先順序指示信息,即,在規(guī)則中通過指示信息明確指示確定各元素適配后的尺寸及位置的優(yōu)先順序。各元素聲明的先后順序,即,描述信息中各元素出現的先后順序。其中,確定各元素適配后的尺寸及位置的優(yōu)先順序包括但不限于:從最外層父元素開始,依照從父元素到子元素順序適配各元素的尺寸及位置,對于同一父元素下的同級別元素按照聲明的先后順序適配各元素的尺寸及位置。也就是同一父元素下的同級別子元素中,先聲明的先確定其適配后的尺寸及位置,對于不同父元素下的同級別子元素不限制確定適配后尺寸及位置的先后順序。
其中,所述規(guī)則可以規(guī)定在不同尺寸的展示區(qū)域展示時各元素間的相對展示位置可以不同??梢?,通過該規(guī)則可靈活設置各元素的展示樣式。
綜上所述,本申請實施例所述的待展示對象的全尺寸適配方法及裝置,通過獲取按照指定規(guī)則制作的待展示對象的所包含的元素及元素的描述信息,所述元素的描述信息中包括:元素間的父子關系信息以及基于所述父子關系適配不同尺寸的展示區(qū)域的規(guī)則;則基于獲取的所述元素及所述元素的描述信息結合當前展示區(qū)域的尺寸信息,可以確定所述待展示對象包含的元素適配所述當前展示區(qū)域后的尺寸及位置,最終以確定的所述尺寸及位置在所述當前展示區(qū)域展示所述待展示對象包含的元素。因此本實施例的待展示對象可以在保證展示效果的同時,適配各種尺寸的展示區(qū)域,而不會出現對待展示對象進行拉伸縮放等出現的變形等情況。
另外,本申請實施例制作待展示對象時無需關注具體的適配方法,只需關注待展示對象的展示樣式,將全尺寸適配功能封裝成一個工具加載于設備中,不但令待展示對象的制作更加簡單,同時另待展示對象的全尺寸適配更加方便快捷。
需要注意的是,本申請可在軟件和/或軟件與硬件的組合體中被實施, 例如,可采用專用集成電路(ASIC)、通用目的計算機或任何其他類似硬件設備來實現。在一個實施例中,本申請的軟件程序可以通過處理器執(zhí)行以實現上文所述步驟或功能。同樣地,本申請的軟件程序(包括相關的數據結構)可以被存儲到計算機可讀記錄介質中,例如,RAM存儲器,磁或光驅動器或軟磁盤及類似設備。另外,本申請的一些步驟或功能可采用硬件來實現,例如,作為與處理器配合從而執(zhí)行各個步驟或功能的電路。
另外,本申請的一部分可被應用為計算機程序產品,例如計算機程序指令,當其被計算機執(zhí)行時,通過該計算機的操作,可以調用或提供根據本申請的方法和/或技術方案。而調用本申請的方法的程序指令,可能被存儲在固定的或可移動的記錄介質中,和/或通過廣播或其他信號承載媒體中的數據流而被傳輸,和/或被存儲在根據所述程序指令運行的計算機設備的工作存儲器中。在此,根據本申請的一個實施例包括一個裝置,該裝置包括用于存儲計算機程序指令的存儲器和用于執(zhí)行程序指令的處理器,其中,當該計算機程序指令被該處理器執(zhí)行時,觸發(fā)該裝置運行基于前述根據本申請的多個實施例的方法和/或技術方案。
對于本領域技術人員而言,顯然本申請不限于上述示范性實施例的細節(jié),而且在不背離本申請的精神或基本特征的情況下,能夠以其他的具體形式實現本申請。因此,無論從哪一點來看,均應將實施例看作是示范性的,而且是非限制性的,本申請的范圍由所附權利要求而不是上述說明限定,因此旨在將落在權利要求的等同要件的含義和范圍內的所有變化涵括在本申請內。不應將權利要求中的任何附圖標記視為限制所涉及的權利要求。此外,顯然“包括”一詞不排除其他單元或步驟,單數不排除復數。系統(tǒng)權利要求中陳述的多個單元或裝置也可以由一個單元或裝置通過軟件或者硬件來實現。第一,第二等詞語用來表示名稱,而并不表示任何特定的順序。