introduction

• 本文將總結我對nim_duilib的xml配置。
• 更多控制元件和控制元件屬性的具體說明， 請參考 here

before starting

１

　　You should clone the program named NIM_Duilib_Framework

2

　　open the NIM_Duilib_Framework\bin\bin\resources\themes\default folder.

lets go

• 基於上一篇, 已經建立了一個duilib的視窗了。 這個視窗使用的是basic.xml檔案配置的UI，這個檔案位於NIM_Duilib_Framework\bin\bin\resources\themes\default\basic
  目錄下。
• 位於bin目錄下的controls.exe出現的控制元件(按鈕，label.......)，使用的是controls.xml.
• controls.xml中的控制元件，這些控制元件的屬性有些定義在了上一層目錄下的global.xml中，比如，按鈕的樣式。 basic.xml中的按鈕程式碼如下：

          <Button class="btn_global_blue_80x30" text="blue"/>
          <Button class="btn_global_white_80x30" text="white"/>
          <Button class="btn_global_red_80x30" text="red"/>
 

看，這裡的按鈕出現了屬性class, 一開始我也沒明白這個屬性。 後來發覺，class屬性定義在了global.xml中：

    <!--按鈕-->
    <Class name="btn_global_blue_80x30" font="system_bold_14" normaltextcolor="white" normalimage="file='../public/button/btn_global_blue_80x30_normal.png'" hotimage="file='../public/button/btn_global_blue_80x30_hovered.png'" pushedimage="file='../public/button/btn_global_blue_80x30_pushed.png'" disabledimage="file='../public/button/btn_global_blue_80x30_normal.png' fade='80'"/>
    <Class name="btn_global_white_80x30" font="system_bold_14" normaltextcolor="dark_gray" normalimage="file='../public/button/btn_global_white_80x30_normal.png'" hotimage="file='../public/button/btn_global_white_80x30_hovered.png'" pushedimage="file='../public/button/btn_global_white_80x30_pushed.png'" disabledimage="file='../public/button/btn_global_white_80x30_normal.png' fade='128'"/>
    <Class name="btn_global_red_80x30" font="system_bold_14" normaltextcolor="white" normalimage="file='../public/button/btn_global_red_80x30_normal.png'" hotimage="file='../public/button/btn_global_red_80x30_hovered.png'" pushedimage="file='../public/button/btn_global_red_80x30_pushed.png'" disabledimage="file='../public/button/btn_global_red_80x30_normal.png' fade='80'"/>

 

其中，設定了按鈕的幾種狀態下的圖片和圖片透明度屬性。當然，也可以將這些屬性寫在controls.xml中。
以btn_global_blue_80x30為例， controls.xml中的btn_global_blue_80x30需要與global.xml中btn_global_blue_80x30的結合看。

• 需要結合 controls.xml和global.xml檔案，一起看， 熟悉常見控制元件的xml用法。
• 可以自己動手修改部分屬性，看看效果。