本申請涉及軟件技術(shù)領(lǐng)域，尤其涉及一種繪制用戶界面的方法及裝置。

背景技術(shù)：

客戶端的用戶界面(userinterface，ui)是用戶與客戶端進行交互時，用戶操作的對象。當用戶打開ui時，客戶端根據(jù)ui對應(yīng)的繪制代碼，將ui繪制到用戶使用的終端(如手機)的屏幕上。用戶在使用客戶端時，可以打開多個不同的ui，不同的ui對應(yīng)的繪制代碼是不同的。

出于業(yè)務(wù)靈活性的需要，開發(fā)人員總是希望ui盡可能地多樣化。但是，由于繪制代碼屬于客戶端的原生代碼(native代碼)，而客戶端只能執(zhí)行native代碼，也就是只能根據(jù)預先寫入到客戶端的繪制代碼進行ui的繪制，因此，為了業(yè)務(wù)的靈活性，開發(fā)人員常常只能在客戶端中盡可能多地寫入多種繪制代碼，或頻繁地發(fā)布客戶端的新版本(包含更新的繪制代碼)要求用戶安裝。

但是，這樣做要么導致了客戶端越來越臃腫，對用戶使用的終端造成很大的負擔，要么要求用戶頻繁安裝新版本的客戶端，造成了用戶使用客戶端的不便。

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

本申請實施例提供一種繪制用戶界面的方法及裝置，以減輕用戶使用的終端的負擔以及提升用戶使用客戶端的便利性。

為解決上述技術(shù)問題，本申請實施例是這樣實現(xiàn)的：

本申請實施例提供的一種繪制用戶界面的方法，預先在客戶端中定義用戶界面ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，所述方法包括：

接收服務(wù)端下發(fā)的ui對應(yīng)的配置參數(shù)；

根據(jù)所述ui對應(yīng)的配置參數(shù)配置所述ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)；

根據(jù)配置后的所述ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，確定所述ui對應(yīng)的繪制數(shù)據(jù)；

根據(jù)所述繪制數(shù)據(jù)，繪制所述ui。

本申請實施例提供的一種繪制用戶界面的裝置，預先在所述裝置中定義用戶界面ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，所述裝置包括：

接收模塊，接收服務(wù)端下發(fā)的ui對應(yīng)的配置參數(shù)；

配置模塊，根據(jù)所述ui對應(yīng)的配置參數(shù)配置所述ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)；

確定模塊，根據(jù)配置后的所述ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，確定所述ui對應(yīng)的繪制數(shù)據(jù)；

繪制模塊，根據(jù)所述繪制數(shù)據(jù)，繪制所述ui。

由以上本申請實施例提供的技術(shù)方案可見，在本申請實施例中，預先在客戶端中定義ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，所述數(shù)據(jù)結(jié)構(gòu)是利用客戶端的native代碼定義的，客戶端能夠?qū)⑺鰯?shù)據(jù)結(jié)構(gòu)作為執(zhí)行的對象。當需要繪制某個ui時，通過服務(wù)端下發(fā)該ui對應(yīng)的配置參數(shù)，客戶端根據(jù)接收到的配置參數(shù)配置該ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，使得該數(shù)據(jù)結(jié)構(gòu)一方面可以表達該ui的繪制數(shù)據(jù)，另一方面可以被客戶端調(diào)用，以作為執(zhí)行繪制該ui操作的對象。如此以來，客戶端可以根據(jù)配置后的數(shù)據(jù)結(jié)構(gòu)確定該ui的繪制數(shù)據(jù)，進行ui繪制。通過本申請實施例，不必預先在客戶端種寫入大量繪制代碼，也不必頻繁發(fā)布客戶端的新版本，就可以通過服務(wù)端下發(fā)不同的配置參數(shù)來實現(xiàn)對客戶端的ui的動態(tài)定制，這樣減輕了用戶使用的終端的負擔，也提升了用戶使用客戶端的便利性。

附圖說明

為了更清楚地說明本申請實施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對實施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本申請中記載的一些實施例，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動性的前提下，還可以根據(jù)這些附圖獲得其他的附圖。

圖1是本申請?zhí)峁┑囊环N繪制用戶界面的方法流程圖；

圖2是本申請實施例提供的視圖塊的結(jié)構(gòu)示意圖；

圖3是本申請實施例提供的視圖塊的布局示意圖；

圖4是本申請實施例提供的一種繪制用戶界面的裝置示意圖。

具體實施方式

本申請實施例提供一種交互控件的調(diào)用方法及裝置。

為了使本技術(shù)領(lǐng)域的人員更好地理解本申請中的技術(shù)方案，下面將結(jié)合本申請實施例中的附圖，對本申請實施例中的技術(shù)方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本申請一部分實施例，而不是全部的實施例?；诒旧暾堉械膶嵤├?，本領(lǐng)域普通技術(shù)人員在沒有作出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都應(yīng)當屬于本申請保護的范圍。

如背景技術(shù)所述，現(xiàn)有的繪制客戶端的用戶界面(userinterface，ui)的方法，是通過執(zhí)行預先寫入客戶端中的繪制代碼來實現(xiàn)的，這是因為客戶端通常只能執(zhí)行原生代碼(native代碼)，native代碼包含用于繪制用戶界面的繪制代碼，是合乎實際的。

開發(fā)人員想要在客戶端上實現(xiàn)多樣化的ui，可以預先在客戶端中寫入對應(yīng)與各種ui一一對應(yīng)的繪制代碼，這樣工作量是很大的，也造成客戶端過于臃腫。如果不采用上述方式，開發(fā)人員就只能頻發(fā)發(fā)布客戶端的新版本，要求用戶安裝新版本的客戶端，來實現(xiàn)對客戶端的ui進行定制和更新，但是這樣會給用戶使用客戶端造成很大的不便。

可見，如何設(shè)計一種繪制客戶端的新方法，能夠在避免造成上述兩方面問題的前提下，實現(xiàn)ui的多樣化和可定制，是本技術(shù)領(lǐng)域丞待解決的技術(shù)問題。而本領(lǐng)域技術(shù)人員的解決思路通常是考慮如何通過服務(wù)端下發(fā)繪制數(shù)據(jù)，來實現(xiàn)對客戶端ui的動態(tài)定制。其中難以突破的技術(shù)點在于，服務(wù)端下發(fā)的繪制數(shù)據(jù)并不是預先寫入客戶端的繪制代碼，也就是說服務(wù)端下發(fā)的繪制數(shù)據(jù)不是native級別的，客戶端無法將接收到的繪制數(shù)據(jù)作為執(zhí)行的對象。

鑒于此，本申請所要求保護的技術(shù)方案提供了一種方法，即一方面，預先在客戶端中定義ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，由于該數(shù)據(jù)結(jié)構(gòu)是利用native代碼定義的，因此該數(shù)據(jù)結(jié)構(gòu)可以作為客戶端執(zhí)行的對象而被客戶端調(diào)用；另一方面，當需要繪制ui時，服務(wù)端可以向客戶端下發(fā)配置參數(shù)，配置參數(shù)是開發(fā)人員在服務(wù)端編寫的，包含了繪制ui所需的繪制數(shù)據(jù)?？蛻舳丝梢愿鶕?jù)接收到的配置參數(shù)配置ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，使得該數(shù)據(jù)結(jié)構(gòu)能夠表達繪制ui所需的繪制數(shù)據(jù)。這樣以來，客戶端調(diào)用該數(shù)據(jù)結(jié)構(gòu)，根據(jù)該數(shù)據(jù)結(jié)構(gòu)可以確定繪制數(shù)據(jù)，再根據(jù)確定出的繪制數(shù)據(jù)進行ui繪制。

也就是說，在本申請所要求保護的方案中，開發(fā)人員只需要耗費很小的工作量，預先在客戶端的native代碼中定義用于繪制ui的數(shù)據(jù)結(jié)構(gòu)，使得客戶端可以根據(jù)該數(shù)據(jù)結(jié)構(gòu)確定用于繪制ui的繪制數(shù)據(jù)。當需要繪制ui時，開發(fā)人員就可以在服務(wù)端下發(fā)用于配置數(shù)據(jù)結(jié)構(gòu)的配置參數(shù)，通過配置數(shù)據(jù)結(jié)構(gòu)來間接定制需要繪制的ui。

以下結(jié)合附圖，詳細說明本申請各實施例提供的技術(shù)方案。

圖1是本申請實施例提供的一種繪制用戶界面的方法流程圖，包括以下步驟：

s101：接收服務(wù)端下發(fā)的ui對應(yīng)的配置參數(shù)。

本方法的執(zhí)行主體是客戶端，具體可以是在用戶使用的終端(如手機、電腦)的操作系統(tǒng)中安裝的應(yīng)用的客戶端。其中，所述操作系統(tǒng)可以是安卓操作系統(tǒng)、蘋果公司的開發(fā)的操作系統(tǒng)、微軟操作系統(tǒng)以及其他能夠安裝所述客戶端，并支持所述客戶端進行ui繪制的操作系統(tǒng)。

在本申請實施例中，所述服務(wù)端可以是與客戶端進行遠程交互的服務(wù)器。所述配置參數(shù)可以是開發(fā)人員在服務(wù)端編寫的參數(shù)，所述配置參數(shù)適配客戶端中ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，可以用于對ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)進行配置。也就是說，ui對應(yīng)的配置參數(shù)用于間接實現(xiàn)對ui的定制。

在步驟s101之前，可以接收用戶輸入的交互指令，然后根據(jù)所述交互指令向所述服務(wù)端發(fā)送所述交互指令對應(yīng)的ui繪制請求，以使所述服務(wù)端根據(jù)所述ui繪制請求下發(fā)ui對應(yīng)的配置參數(shù)。

其中，所述交互指令可以是用戶對客戶端中的按鈕的點擊操作，也可以是用戶打開客戶端的操作等；所述ui繪制請求可以攜帶有需要繪制的ui對應(yīng)的業(yè)務(wù)內(nèi)容等信息。

s102：根據(jù)所述ui對應(yīng)的配置參數(shù)配置所述ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)。

s103：根據(jù)配置后的所述ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，確定所述ui對應(yīng)的繪制數(shù)據(jù)。

數(shù)據(jù)結(jié)構(gòu)是軟件技術(shù)領(lǐng)域的概念，數(shù)據(jù)結(jié)構(gòu)可以存儲各數(shù)據(jù)元素以及各數(shù)據(jù)元素之間的關(guān)系。數(shù)據(jù)元素是組成數(shù)據(jù)結(jié)構(gòu)的基本單位，數(shù)據(jù)元素的具體內(nèi)容可以被配置。

在本申請實施例中，可以根據(jù)所述配置參數(shù)中的繪制參數(shù)，配置視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，以及根據(jù)所述配置參數(shù)中的布局參數(shù)，配置所述ui的視圖組件布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)。

在本申請實施例中，定義數(shù)據(jù)結(jié)構(gòu)即是定義數(shù)據(jù)結(jié)構(gòu)包含的各數(shù)據(jù)元素以及各數(shù)據(jù)元素之間的關(guān)系，配置數(shù)據(jù)結(jié)構(gòu)即是配置數(shù)據(jù)結(jié)構(gòu)包含的各數(shù)據(jù)元素的具體內(nèi)容。

繪制ui實際上就是繪制組成ui的各視圖組件(view)，并根據(jù)一定的布局，將繪制出的各視圖塊合成ui。視圖組件有多種類型，多個類型的多個視圖組件可以組合成很多不同的ui。例如，圖片視圖組件(imageview)就是一類視圖組件，文本視圖組件(textview)也是一類視圖組件。在一個ui中，可以包含多種類型的視圖組件，每種類型的視圖組件也可以有多個。

在本申請實施例中，可以預先定義視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)以及預先定義ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)。

具體而言，可以預先在客戶端中，定義各視圖組件一一對應(yīng)的多個數(shù)據(jù)結(jié)構(gòu)以及ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)；也可以預先在客戶端中，定義各類視圖組件一一對應(yīng)的多個數(shù)據(jù)結(jié)構(gòu)以及ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)。并且，ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)也可以有多個?？傊?，定義的數(shù)據(jù)結(jié)構(gòu)能夠表達組成ui的各視圖組件以及各視圖組件如何布局即可，本申請對定義數(shù)據(jù)結(jié)構(gòu)的具體方式不做限制。

在本申請實施例中，當針對每類視圖組件，定義該類視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)時，每類視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)包含的數(shù)據(jù)元素可以是當前繪制ui需要用到的各視圖組件，某個數(shù)據(jù)元素的具體內(nèi)容可以是該視圖組件的相對位置坐標或位置坐標、顏色、交互邏輯等信息。例如，圖片視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)包含的每個數(shù)據(jù)元素都可以是一個圖片視圖組件，某個數(shù)據(jù)元素的具體內(nèi)容可以是該圖片視圖組件顯示的圖片的url地址等信息。每類視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)包含的各數(shù)據(jù)元素之間的關(guān)系可以是線性關(guān)系、集合關(guān)系、樹形關(guān)系等。例如，圖片視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)包含的各數(shù)據(jù)元素之間的關(guān)系可以是集合關(guān)系。

舉例來說，可以通過以下native代碼定義imageview類對應(yīng)的一個數(shù)據(jù)結(jié)構(gòu)：

其中，第一段native代碼描述各類view的通用信息，第二段native代碼描述imageview的具體信息。該通用信息可以在每類view對應(yīng)的數(shù)據(jù)結(jié)構(gòu)中都描述一次，也可以在客戶端中僅描述一次，在每類view對應(yīng)的數(shù)據(jù)結(jié)構(gòu)中都只描述該類view的具體信息。

在本申請實施例中，當定義ui的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)時，該數(shù)據(jù)結(jié)構(gòu)區(qū)別于各類視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，其主要用于表達各視圖組件在ui中是如何布局的。

可見，根據(jù)ui對應(yīng)的配置參數(shù)配置各類視圖組件分別對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，實際上可以是針對每類視圖組件，根據(jù)配置參數(shù)中的繪制參數(shù)配置該類視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，也就是各數(shù)據(jù)元素的具體內(nèi)容，所述繪制參數(shù)表達如何對視圖組件進行繪制。而根據(jù)ui對應(yīng)的配置參數(shù)配置ui的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，實際上可以是根據(jù)配置參數(shù)中的布局參數(shù)配置ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)存儲的布局參數(shù)，也就是該數(shù)據(jù)結(jié)構(gòu)包含的各數(shù)據(jù)元素具體為哪種類型的視圖組件，以及各數(shù)據(jù)元素(各視圖組件)的關(guān)系。

進一步地，定義ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)可以有多種方式，可以將ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)包含的各數(shù)據(jù)元素的關(guān)系定義為線性關(guān)系，用于表達簡單的ui布局，如某客戶端的ui同時都是只包含一橫排imageview的ui，那么該ui的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)包含的各數(shù)據(jù)元素就可以是線性排列的；也可以將ui的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)包含的各數(shù)據(jù)元素的關(guān)系定義為樹形關(guān)系，每個數(shù)據(jù)元素可以對應(yīng)一個視圖組件，也可以對應(yīng)不止一個視圖組件即視圖塊(viewgroup)。這樣以來，ui的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)就可以反映較為復雜的ui布局，在這樣的ui布局中，各視圖組件分布在不止一個層級上，使得繪制出的ui的交互功能更加豐富。實際上，大部分客戶端的ui的布局都是較為復雜的，需要預先在客戶端中定義這種樹形關(guān)系的數(shù)據(jù)結(jié)構(gòu)。

在本申請實施例中，可以預先定義視圖塊對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，作為ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)；一個視圖塊中包含視圖組件和/或子視圖塊，每個視圖塊是其包含的子視圖塊的父試圖塊，每個子視圖塊又能作為父視圖塊包含包含視圖組件和/或子視圖塊。

圖2是本申請實施例提供的視圖塊(viewgroup)的結(jié)構(gòu)示意圖，如圖2所示，視圖塊的結(jié)構(gòu)為層層嵌套，以一個視圖組件塊為總節(jié)點向下分支，呈樹形結(jié)構(gòu)，每個視圖組件塊可以包含視圖組件和/或子視圖塊。圖2所示的視圖塊的結(jié)構(gòu)可以被視為ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)。

開發(fā)人員通過服務(wù)端下發(fā)的配置參數(shù)中的布局參數(shù)，可以表達視圖組件塊的結(jié)構(gòu)，服務(wù)端下發(fā)的布局參數(shù)不同，視圖塊的結(jié)構(gòu)也就不同。視圖塊的結(jié)構(gòu)其實可以是ui中顯示的各視圖組件的布局結(jié)構(gòu)。

實際上，一個ui本質(zhì)上是由若干視圖組件組合而成的，倘若將ui中顯示的視圖組件進行分組，即以視圖塊(viewgroup)為單位來描述ui的視圖組件的布局，就可以理解在本申請實施例中為何通過定義視圖塊對應(yīng)的數(shù)據(jù)結(jié)構(gòu)來表達ui的視圖組件的布局了。

圖3是本申請實施例提供的視圖塊的布局示意圖。如圖3所示，將ui視為一個視圖塊1，視圖塊1包含視圖塊2、視圖塊3、view1、view2，視圖塊2進一步包含視圖塊4、view3，視圖塊3進一步包含view4、view5，視圖塊4進一步包含view6、view7?？蛻舳烁鶕?jù)配置參數(shù)中的布局參數(shù)配置后的ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，可以包含ui的視圖組件的布局信息，也就是以ui(即視圖塊1)為參考系下的視圖塊2、視圖塊3、view1、view2的相對位置坐標，以視圖塊2為參考系下的視圖塊4、view3的相對位置坐標，以視圖塊3為參考系下的view4、view5的相對位置坐標，以視圖塊4為參考系下的view6、view7的相對位置坐標。其中，各視圖組件(view1-view7)中可以存在相同類別的視圖組件，如view1、view3可以是imageview，view2可以是textview。其中，可以以視圖塊和view的左下角的端點為參考系的原點。當然，也可以統(tǒng)一以視圖塊和view的其他點為參考系的原點，本申請對此不做限制。

基于以上，在圖3所示的ui快的布局示意圖中，各視圖組件相對于ui的位置坐標都可以被最終確定下來，那么，ui的視圖組件的布局也就可以確定了?？蛻舳丝梢愿鶕?jù)服務(wù)端下發(fā)的布局參數(shù)，確定視圖塊的結(jié)構(gòu)，也就是確定每個視圖塊包含的視圖組件和/或視圖塊。各視圖塊的結(jié)構(gòu)不同，客戶端繪制出的ui的視圖組件的布局自然也就不同。

值得說明的是，一個視圖塊包含的視圖組件和/或視圖塊的排列方式也是可以定制的，具體的排列方式可以是橫向排列、縱向排列、重疊等。

舉例來說，可以通過以下native代碼定義圖2所示的視圖塊對應(yīng)的數(shù)據(jù)結(jié)構(gòu)：

publicabstractclassbaseblockextendbaseitem{

//一個視圖塊可以包含m個視圖塊和/或n個視圖組件

publicarraylist<baseblock>mblock；

publicarraylist<baseitem>nitems；

……

}

publicclasslinearlayoutblockextendbaseblock{

//視圖塊包含的視圖組件是線性排列的

publicintorientation；//定義線性排列的方式是橫向還是縱向

……

}

其中，第一段native代碼是描述各種不同排列方式對應(yīng)的視圖塊的通用信息，第二段native代碼描述線性排列方式對應(yīng)的視圖塊的具體信息，當然還可以通過其他native代碼描述重疊排列對應(yīng)的視圖塊的具體信息，在此不再贅述。

綜上，通過定義各類視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)和ui的視圖組件布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，客戶端就可以順利從這兩種數(shù)據(jù)結(jié)構(gòu)中獲取組成ui的每個視圖組件的位置坐標和繪制信息，各視圖組件的位置坐標和繪制信息，也就是ui的繪制數(shù)據(jù)。

在本申請實施例中，當定義的數(shù)據(jù)結(jié)構(gòu)較為簡單時，可以直接將各類視圖組件分別對應(yīng)的數(shù)據(jù)結(jié)構(gòu)存儲的繪制參數(shù)作為各類視圖分別對應(yīng)的繪制信息，將ui的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)存儲的布局參數(shù)直接作為ui的布局信息，將繪制信息和布局信息作為繪制數(shù)據(jù)，就可以進行ui的繪制了。

當定義的數(shù)據(jù)結(jié)構(gòu)較為復雜時，尤其是當定義的ui的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)表達的是圖3所示的布局結(jié)構(gòu)時，還需要在客戶端中預先定義解析函數(shù)，用于解析復雜的數(shù)據(jù)結(jié)構(gòu)。

具體而言，根據(jù)所述解析函數(shù)從各視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)中解析出各視圖組件的繪制信息；以及根據(jù)所述解析函數(shù)從所述ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)中解析出所述ui的視圖組件的布局信息；將解析出的各視圖組件的繪制信息和所述ui的視圖組件的布局信息作為所述ui對應(yīng)的繪制數(shù)據(jù)。

值得說明的是，當需要繪制的ui要用到多個不同規(guī)格的同一類視圖組件(如需要用到多個imageview，也就是需要顯示多個圖片)時，根據(jù)解析函數(shù)從該類視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)存儲的繪制參數(shù)中解析出的該類視圖組件的繪制信息包含了多個不同規(guī)格的視圖組件的繪制信息。

在本申請實施例中，根據(jù)解析函數(shù)從該布局結(jié)構(gòu)對應(yīng)的數(shù)據(jù)結(jié)構(gòu)存儲的布局參數(shù)中解析出ui的布局信息，可以是從該布局結(jié)構(gòu)中解析出組成ui的各視圖組件的位置坐標。

具體而言，客戶端可以從視圖塊對應(yīng)的數(shù)據(jù)結(jié)構(gòu)中解析出每個視圖塊相對于其父視圖塊的相對位置坐標和每個視圖組件相對于其父視圖塊的相對位置坐標，那么，將ui視為最初的父視圖塊的話，也就可以確定每個視圖組件相對于ui的相對位置坐標。每個視圖組件的相對于ui的相對位置坐標就是ui的布局信息。

在本申請實施例中，當視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)中存儲有視圖組件相對于其父視圖塊的相對位置坐標時，也可以針對每個視圖塊，根據(jù)所述解析函數(shù)，從該視圖塊對應(yīng)的數(shù)據(jù)結(jié)構(gòu)中解析出該視圖塊的位置坐標；針對該視圖塊中的每個視圖組件，根據(jù)所述解析函數(shù)，從該視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)中解析出該視圖組件相對于該視圖塊的相對位置坐標；將針對每個視圖塊確定出的位置坐標和針對每個視圖組件確定出的相對位置坐標，作為所述ui的視圖組件的布局信息。

其中，可以是每個視圖塊可以對應(yīng)一個數(shù)據(jù)結(jié)構(gòu)，也可以是各視圖塊對應(yīng)一個數(shù)據(jù)結(jié)構(gòu)，本申請視圖塊和數(shù)據(jù)結(jié)構(gòu)具體如何對應(yīng)不做限制。

其中，每個視圖塊的位置坐標具體可以是每個視圖塊相對于其父視圖塊的相對位置坐標，也可以是每個視圖塊相對于ui的相對位置坐標。總之，客戶端可以根據(jù)每個視圖組件相對于其父視圖塊的相對位置坐標和每個視圖塊的位置坐標，確定每個視圖組件相對于ui的位置坐標。

可見，通過步驟s102和步驟s103，可以確定繪制ui所需的繪制數(shù)據(jù)，該繪制數(shù)據(jù)可以是每個視圖組件對應(yīng)的繪制信息和位置坐標，具體可以是每個視圖組件對應(yīng)的繪制信息和相對位置坐標，以及每個視圖塊的相對位置坐標。

s104：根據(jù)所述繪制數(shù)據(jù)，繪制所述ui。

在本申請實施例中，可以根據(jù)每個視圖組件的繪制信息和位置坐標進行ui的繪制。具體而言，可以根據(jù)每個視圖組件對應(yīng)的繪制信息和相對位置坐標，以及每個視圖塊的相對位置坐標，繪制該視圖組件；所述ui是由繪制出的各視圖塊合而成的。

其中，當每類視圖組件對應(yīng)一個數(shù)據(jù)結(jié)構(gòu)時，每個視圖組件的繪制信息可以是根據(jù)該視圖組件所屬類別對應(yīng)的繪制信息確定的；當每個視圖組件對應(yīng)一個數(shù)據(jù)結(jié)構(gòu)時，每個視圖組件的繪制信息可以是從該視圖組件對應(yīng)的這個數(shù)據(jù)結(jié)構(gòu)中解析出的繪制信息。

綜上，通過圖1所示的交互控件的調(diào)用方法，預先在客戶端中定義ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，所述數(shù)據(jù)結(jié)構(gòu)是利用客戶端的native代碼定義的，客戶端能夠?qū)⑺鰯?shù)據(jù)結(jié)構(gòu)作為執(zhí)行的對象。當需要繪制某個ui時，通過服務(wù)端下發(fā)該ui對應(yīng)的配置參數(shù)，客戶端根據(jù)接收到的配置參數(shù)配置該ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，使得該數(shù)據(jù)結(jié)構(gòu)一方面可以表達該ui的繪制數(shù)據(jù)，另一方面可以被客戶端調(diào)用，以作為執(zhí)行繪制該ui操作的對象。如此以來，客戶端可以根據(jù)配置后的數(shù)據(jù)結(jié)構(gòu)確定該ui的繪制數(shù)據(jù)，進行ui繪制，增加了繪制ui靈活性。

此外，在現(xiàn)有的ui繪制方法中，不同的ui對應(yīng)有不同的繪制代碼，繪制代碼專用性強，可復用性差。而在本申請實施例中，預先定義的ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，可以根據(jù)服務(wù)端下發(fā)的不同的配置參數(shù)，用于繪制不同的ui，也就是說，預先定義的ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)有很強的可復用性。

另外，在現(xiàn)有的ui繪制方法中，對于業(yè)務(wù)功能類似的多個客戶端(如三個實現(xiàn)支付功能的app)而言，這多個客戶端的業(yè)務(wù)功能哪怕有一點不同，其所需要的ui也會不同，這就要求開發(fā)人員針對這多個客戶端分別編寫多套繪制代碼。例如，app1除了有基本的支付功能外，還有外賣功能，app2除了有基本的支付功能外，還有社交功能，app3除了有基本的支付功能外，還有新聞資訊功能，那么app1的ui中除了包含基本的支付類控件(控件由組件組成)外，還可能包含用于展示外賣商家的商品清單的展示控件等特殊功能的控件，app2的ui中除了包含基本的支付類控件外，還可能包含多個聊天窗口的切換標簽控件，app3的ui中除了包含基本的支付類控件外，還可能包含一些用于顯示新聞資訊的控件。app1、app2、app3的繪制代碼中有關(guān)支付業(yè)務(wù)的代碼部分基本上是雷同的，但是這3個app各自的特殊功能對應(yīng)的代碼部分卻需要與支付業(yè)務(wù)的代碼部分耦合，否則這3個app的ui的顯示效果會很差。開發(fā)人員就只能分別針對這3個app撰寫三套繪制代碼，工作量是巨大的。

而在本申請實施例中，由于預先定義了一種可配置的數(shù)據(jù)結(jié)構(gòu)(工作量較小)，因此開發(fā)人員不必針對這三個客戶端都分別撰寫繪制代碼，而可以將這種數(shù)據(jù)結(jié)構(gòu)一并定義在這三個客戶端中，并且業(yè)務(wù)功能類似的客戶端越多，開發(fā)人員的工作效率就越高，這就實現(xiàn)了ui與業(yè)務(wù)功能分離，該數(shù)據(jù)結(jié)構(gòu)可以適配多個業(yè)務(wù)功能類似的客戶端，開發(fā)人員只需要在服務(wù)端動態(tài)配置這多個類似的客戶端上的數(shù)據(jù)結(jié)構(gòu)，就可以分別在這多個客戶端上繪制實現(xiàn)其業(yè)務(wù)功能的ui。倘若上述舉例中的app1、app2、app3中都定義有本申請所述的ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，那么服務(wù)端只需要針對這3個app下發(fā)不同的配置參數(shù)即可實現(xiàn)ui的繪制，并且這3個app的支付功能對應(yīng)的配置參數(shù)與各自的特殊功能對應(yīng)的配置參數(shù)的耦合性很低，開發(fā)人員不必重復編寫支付功能對應(yīng)的配置參數(shù)。

值得說明的是，本申請實施例中所述支付涉及的技術(shù)載體，例如可以包括近場通信(nearfieldcommunication，nfc)、wifi、3g/4g/5g、pos機刷卡技術(shù)、二維碼掃碼技術(shù)、條形碼掃碼技術(shù)、藍牙、紅外、短消息(shortmessageservice，sms)、多媒體消息(multimediamessageservice，mms)等。

基于圖1所示的繪制用戶界面的方法，本申請實施例還對應(yīng)提供了一種繪制用戶界面的裝置，如圖4所示，預先在所述裝置中定義用戶界面ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，所述裝置包括：

接收模塊401，接收服務(wù)端下發(fā)的ui對應(yīng)的配置參數(shù)；

配置模塊402，根據(jù)所述ui對應(yīng)的配置參數(shù)配置所述ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)；

確定模塊403，根據(jù)配置后的所述ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，確定所述ui對應(yīng)的繪制數(shù)據(jù)；

繪制模塊404，根據(jù)所述繪制數(shù)據(jù)，繪制所述ui。

所述裝置還包括：請求模塊405，在所述接收模塊401接收服務(wù)端下發(fā)的ui對應(yīng)的配置參數(shù)之前，接收用戶輸入的交互指令；根據(jù)所述交互指令，向所述服務(wù)端發(fā)送所述交互指令對應(yīng)的ui繪制請求，以使所述服務(wù)端根據(jù)所述ui繪制請求下發(fā)ui對應(yīng)的配置參數(shù)。

預先在客戶端中定義用戶界面ui對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，具體包括：預先定義視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)；預先定義ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)；

所述配置模塊402，根據(jù)所述配置參數(shù)中的繪制參數(shù)，配置視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，以及根據(jù)所述配置參數(shù)中的布局參數(shù)，配置所述ui的視圖組件布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)。

預先在客戶端中定義解析函數(shù)，所述解析函數(shù)用于解析所述數(shù)據(jù)結(jié)構(gòu)；

所述確定模塊403，根據(jù)所述解析函數(shù)從各視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)中解析出各視圖組件的繪制信息；以及根據(jù)所述解析函數(shù)從所述ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)中解析出所述ui的視圖組件的布局信息；將解析出的各視圖組件的繪制信息和所述ui的視圖組件的布局信息作為所述ui對應(yīng)的繪制數(shù)據(jù)。

預先定義ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，具體包括：預先定義視圖塊對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，作為ui的視圖組件的布局對應(yīng)的數(shù)據(jù)結(jié)構(gòu)；一個視圖塊中包含視圖組件和/或子視圖塊；

所述確定模403，針對每個視圖塊，根據(jù)所述解析函數(shù)，從該視圖塊對應(yīng)的數(shù)據(jù)結(jié)構(gòu)中解析出該視圖塊的位置坐標；針對該視圖塊中的每個視圖組件，根據(jù)所述解析函數(shù)，從該視圖組件對應(yīng)的數(shù)據(jù)結(jié)構(gòu)中解析出該視圖組件相對于該視圖塊的相對位置坐標；將針對每個視圖塊確定出的位置坐標和針對每個視圖組件確定出的相對位置坐標，作為所述ui的視圖組件的布局信息。

所述確定模塊403，根據(jù)所述解析函數(shù)，確定該視圖塊的父視圖塊，從該視圖塊對應(yīng)的數(shù)據(jù)結(jié)構(gòu)中解析出該視圖塊相對于所述父視圖塊的相對位置坐標。

所述繪制模塊404，根據(jù)每個視圖組件對應(yīng)的繪制信息和相對位置坐標，以及每個視圖塊的相對位置坐標，繪制該視圖組件；所述ui是由繪制出的各視圖塊合而成的。

在20世紀90年代，對于一個技術(shù)的改進可以很明顯地區(qū)分是硬件上的改進(例如，對二極管、晶體管、開關(guān)等電路結(jié)構(gòu)的改進)還是軟件上的改進(對于方法流程的改進)。然而，隨著技術(shù)的發(fā)展，當今的很多方法流程的改進已經(jīng)可以視為硬件電路結(jié)構(gòu)的直接改進。設(shè)計人員幾乎都通過將改進的方法流程編程到硬件電路中來得到相應(yīng)的硬件電路結(jié)構(gòu)。因此，不能說一個方法流程的改進就不能用硬件實體模塊來實現(xiàn)。例如，可編程邏輯器件(programmablelogicdevice,pld)(例如現(xiàn)場可編程門陣列(fieldprogrammablegatearray，fpga))就是這樣一種集成電路，其邏輯功能由用戶對器件編程來確定。由設(shè)計人員自行編程來把一個數(shù)字系統(tǒng)“集成”在一片pld上，而不需要請芯片制造廠商來設(shè)計和制作專用的集成電路芯片。而且，如今，取代手工地制作集成電路芯片，這種編程也多半改用“邏輯編譯器(logiccompiler)”軟件來實現(xiàn)，它與程序開發(fā)撰寫時所用的軟件編譯器相類似，而要編譯之前的原始代碼也得用特定的編程語言來撰寫，此稱之為硬件描述語言(hardwaredescriptionlanguage，hdl)，而hdl也并非僅有一種，而是有許多種，如abel(advancedbooleanexpressionlanguage)、ahdl(alterahardwaredescriptionlanguage)、confluence、cupl(cornelluniversityprogramminglanguage)、hdcal、jhdl(javahardwaredescriptionlanguage)、lava、lola、myhdl、palasm、rhdl(rubyhardwaredescriptionlanguage)等，目前最普遍使用的是vhdl(very-high-speedintegratedcircuithardwaredescriptionlanguage)與verilog。本領(lǐng)域技術(shù)人員也應(yīng)該清楚，只需要將方法流程用上述幾種硬件描述語言稍作邏輯編程并編程到集成電路中，就可以很容易得到實現(xiàn)該邏輯方法流程的硬件電路。

控制器可以按任何適當?shù)姆绞綄崿F(xiàn)，例如，控制器可以采取例如微處理器或處理器以及存儲可由該(微)處理器執(zhí)行的計算機可讀程序代碼(例如軟件或固件)的計算機可讀介質(zhì)、邏輯門、開關(guān)、專用集成電路(applicationspecificintegratedcircuit，asic)、可編程邏輯控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：arc625d、atmelat91sam、microchippic18f26k20以及siliconelabsc8051f320，存儲器控制器還可以被實現(xiàn)為存儲器的控制邏輯的一部分。本領(lǐng)域技術(shù)人員也知道，除了以純計算機可讀程序代碼方式實現(xiàn)控制器以外，完全可以通過將方法步驟進行邏輯編程來使得控制器以邏輯門、開關(guān)、專用集成電路、可編程邏輯控制器和嵌入微控制器等的形式來實現(xiàn)相同功能。因此這種控制器可以被認為是一種硬件部件，而對其內(nèi)包括的用于實現(xiàn)各種功能的裝置也可以視為硬件部件內(nèi)的結(jié)構(gòu)?；蛘呱踔?，可以將用于實現(xiàn)各種功能的裝置視為既可以是實現(xiàn)方法的軟件模塊又可以是硬件部件內(nèi)的結(jié)構(gòu)。

上述實施例闡明的系統(tǒng)、裝置、模塊或單元，具體可以由計算機芯片或?qū)嶓w實現(xiàn)，或者由具有某種功能的產(chǎn)品來實現(xiàn)。一種典型的實現(xiàn)設(shè)備為計算機。具體的，計算機例如可以為個人計算機、膝上型計算機、蜂窩電話、相機電話、智能電話、個人數(shù)字助理、媒體播放器、導航設(shè)備、電子郵件設(shè)備、游戲控制臺、平板計算機、可穿戴設(shè)備或者這些設(shè)備中的任何設(shè)備的組合。

為了描述的方便，描述以上裝置時以功能分為各種單元分別描述。當然，在實施本申請時可以把各單元的功能在同一個或多個軟件和/或硬件中實現(xiàn)。

本領(lǐng)域內(nèi)的技術(shù)人員應(yīng)明白，本發(fā)明的實施例可提供為方法、系統(tǒng)、或計算機程序產(chǎn)品。因此，本發(fā)明可采用完全硬件實施例、完全軟件實施例、或結(jié)合軟件和硬件方面的實施例的形式。而且，本發(fā)明可采用在一個或多個其中包含有計算機可用程序代碼的計算機可用存儲介質(zhì)(包括但不限于磁盤存儲器、cd-rom、光學存儲器等)上實施的計算機程序產(chǎn)品的形式。

本發(fā)明是參照根據(jù)本發(fā)明實施例的方法、設(shè)備(系統(tǒng))、和計算機程序產(chǎn)品的流程圖和/或方框圖來描述的。應(yīng)理解可由計算機程序指令實現(xiàn)流程圖和/或方框圖中的每一流程和/或方框、以及流程圖和/或方框圖中的流程和/或方框的結(jié)合?？商峁┻@些計算機程序指令到通用計算機、專用計算機、嵌入式處理機或其他可編程數(shù)據(jù)處理設(shè)備的處理器以產(chǎn)生一個機器，使得通過計算機或其他可編程數(shù)據(jù)處理設(shè)備的處理器執(zhí)行的指令產(chǎn)生用于實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的裝置。

這些計算機程序指令也可存儲在能引導計算機或其他可編程數(shù)據(jù)處理設(shè)備以特定方式工作的計算機可讀存儲器中，使得存儲在該計算機可讀存儲器中的指令產(chǎn)生包括指令裝置的制造品，該指令裝置實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能。

這些計算機程序指令也可裝載到計算機或其他可編程數(shù)據(jù)處理設(shè)備上，使得在計算機或其他可編程設(shè)備上執(zhí)行一系列操作步驟以產(chǎn)生計算機實現(xiàn)的處理，從而在計算機或其他可編程設(shè)備上執(zhí)行的指令提供用于實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的步驟。

在一個典型的配置中，計算設(shè)備包括一個或多個處理器(cpu)、輸入/輸出接口、網(wǎng)絡(luò)接口和內(nèi)存。

內(nèi)存可能包括計算機可讀介質(zhì)中的非永久性存儲器，隨機存取存儲器(ram)和/或非易失性內(nèi)存等形式，如只讀存儲器(rom)或閃存(flashram)。內(nèi)存是計算機可讀介質(zhì)的示例。

計算機可讀介質(zhì)包括永久性和非永久性、可移動和非可移動媒體可以由任何方法或技術(shù)來實現(xiàn)信息存儲。信息可以是計算機可讀指令、數(shù)據(jù)結(jié)構(gòu)、程序的模塊或其他數(shù)據(jù)。計算機的存儲介質(zhì)的例子包括，但不限于相變內(nèi)存(pram)、靜態(tài)隨機存取存儲器(sram)、動態(tài)隨機存取存儲器(dram)、其他類型的隨機存取存儲器(ram)、只讀存儲器(rom)、電可擦除可編程只讀存儲器(eeprom)、快閃記憶體或其他內(nèi)存技術(shù)、只讀光盤只讀存儲器(cd-rom)、數(shù)字多功能光盤(dvd)或其他光學存儲、磁盒式磁帶，磁帶磁磁盤存儲或其他磁性存儲設(shè)備或任何其他非傳輸介質(zhì)，可用于存儲可以被計算設(shè)備訪問的信息。按照本文中的界定，計算機可讀介質(zhì)不包括暫存電腦可讀媒體(transitorymedia)，如調(diào)制的數(shù)據(jù)信號和載波。

還需要說明的是，術(shù)語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、商品或者設(shè)備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、商品或者設(shè)備所固有的要素。在沒有更多限制的情況下，由語句“包括一個……”限定的要素，并不排除在包括所述要素的過程、方法、商品或者設(shè)備中還存在另外的相同要素。

本領(lǐng)域技術(shù)人員應(yīng)明白，本申請的實施例可提供為方法、系統(tǒng)或計算機程序產(chǎn)品。因此，本申請可采用完全硬件實施例、完全軟件實施例或結(jié)合軟件和硬件方面的實施例的形式。而且，本申請可采用在一個或多個其中包含有計算機可用程序代碼的計算機可用存儲介質(zhì)(包括但不限于磁盤存儲器、cd-rom、光學存儲器等)上實施的計算機程序產(chǎn)品的形式。

本申請可以在由計算機執(zhí)行的計算機可執(zhí)行指令的一般上下文中描述，例如程序模塊。一般地，程序模塊包括執(zhí)行特定任務(wù)或?qū)崿F(xiàn)特定抽象數(shù)據(jù)類型的例程、程序、對象、組件、數(shù)據(jù)結(jié)構(gòu)等等。也可以在分布式計算環(huán)境中實踐本申請，在這些分布式計算環(huán)境中，由通過通信網(wǎng)絡(luò)而被連接的遠程處理設(shè)備來執(zhí)行任務(wù)。在分布式計算環(huán)境中，程序模塊可以位于包括存儲設(shè)備在內(nèi)的本地和遠程計算機存儲介質(zhì)中。

本說明書中的各個實施例均采用遞進的方式描述，各個實施例之間相同相似的部分互相參見即可，每個實施例重點說明的都是與其他實施例的不同之處。尤其，對于系統(tǒng)實施例而言，由于其基本相似于方法實施例，所以描述的比較簡單，相關(guān)之處參見方法實施例的部分說明即可。

以上所述僅為本申請的實施例而已，并不用于限制本申請。對于本領(lǐng)域技術(shù)人員來說，本申請可以有各種更改和變化。凡在本申請的精神和原理之內(nèi)所作的任何修改、等同替換、改進等，均應(yīng)包含在本申請的權(quán)利要求范圍之內(nèi)。