duilib屬性

原文轉載自：http://blog.csdn.net/lixiang987654321/article/details/45008441 

 

這裏我想講解一下duilib中的一些屬性的理解，固然這是一篇永遠沒有完結的文章，因爲我在學duilib開源庫，往往遇到模糊的屬性的時候再逐一添加上；

 

熟悉html或css的人知道，duilib中的大多屬性雷同於html或css屬性，若是知道這點，咱們能夠根據html或css搜索相應屬性（因爲duilib資料相對較少）；

 

屬性一：textpadding

http://img.bitscn.com/upimg/webdesign/070917/11Z0112MD01F56.png

 

一個控件的大小指的是border圍起來的大小，包括高度和寬度；

border的外面包圍這margin，叫作邊距，就是離其餘元素的上下左右距離；

border裏面包含着textpadding，textpadding裏面包含的就是文本內容；

textpadding表示在控件中，文本內容離邊框的距離，包括左上右下的距離；

 

 

類html格式文本：

Duilib使用一種通過簡化的類html格式文原本描述複雜的圖文格式。使用<>或{}符號來標識語法標籤，支持標籤嵌套，如<l><b>text</b></l>，可是應該避免交叉嵌套，如<l><b>text</l></b>。

  使用標籤功能須要把控件的showhtml屬性設置爲true。

b:表示字體是否使用粗體；

c:表示字體使用的顏色；

f:表示使用全局字體的序號，從0開始；

i:是否使用斜體或圖表路徑；

a:超連接功能；

n:表示換行；

p:表示一段落；

r:表示包含內容不適用標籤語法功能；

s:表示內容被選中；

u:表示內容使用下劃線；

x:表示從該處移動x個像素值；

y:表示該行固定位y個像素值；

 

例子以下：

 

        <b>text</b> 表示text的內容使用粗體

          <c #xxxxxx>text</c> 表示text內容使用#xxxxxx顏色，#xxxxxx表示16進制的RGB值

         <f x>text</f>表示text內容使用x序號的字體

         <i>text</i> 表示text內容使用斜體

          <i x y z>表示這次插入圖片，x表示圖片名稱，y表示此圖片包含幾張字圖片（可不填，默認值1），z表示當前使用的字圖片id（可不填，默認值0）

         <a x>text</a> 表示text內容有連接功能，x表示連接地址（可不填），用法如app:notepad or http:www.xxx.com，此字符串須要在用戶程序中解析處理。

         <n> 表示這次換行

          <p x>text</p> 表示text內容是一個段落（從這裏開始換行），x表示此段落文字水平距離（可不填）

         <r>text</r>表示text內容不使用語法標籤功能

         <s>text</s> 表示text內容被選中（顯示選中的背景顏色）

          <u>text</u> 表示text內容使用下劃線

         <x i> 表示今後處向後面移動x個像素值

         <y i> 表示該行高度固定爲y個像素值

 

屬性二：corner

       有時候咱們貼圖時，圖片的大小小於控件自己的大小，而咱們須要將圖片貼到控件的某個位置上，這時一般會用dest屬性來解決這個問題。可是dest屬性有個缺點就是貼的位置是固定的，他不可讓圖片隨控件的大小改變而自動改變圖片的位置和大小。若是要把圖片貼到控件的四個邊的其中一個，或者貼到某個角上，使用corner屬性能夠完美實現。以下咱們來了解一下九宮格貼圖技術：

 

       九宮格是利用一張很小的圖片來繪製大區域圖片的技術，用戶能夠製做九宮格圖片，並設置拉伸的位置，圖片會在貼圖時只拉伸中心的部分，邊角卻不會被拉伸，這樣只要設計時圖片中心的顏色是純色，那即便拉伸的再大也會保持原有的效果。

 

  

正常狀況下九宮格繪製會遵循下面的規則：

a. 保持4個角部分不變形

b. 單向拉伸4條邊（即在4個角兩兩之間的邊，好比上邊，只作橫向拉伸）

c. 雙向拉伸中間部分（即九宮格的中間部分，橫向，縱向同時拉伸，PS：拉伸比例不必定相同）

 

 

或

 

 

t_l、t_r、b_r、b_l這四個角是不被拉伸的，而m_l、t_m、m_r、b_m四條邊就是corner要拉伸的邊，

在duilib裏面corner是一個4元組屬性值，4個字分別表示左、上、右、下四邊須要拉伸的寬度或高度；

如圖片大小爲100*80,若是corner=「100,8,0,10"表示圖片的左邊100個像素寬度須要拉伸（也就是全部寬度突變拉伸），距離頂部8個像素高度須要拉伸，剩下的72（此時不考慮下面指定10的值）不須要拉伸；距離右側0個像素寬度須要拉伸（即右側不須要拉伸）；距離底部10個像素的高度須要拉伸；除了以上指定四邊長度或寬度拉伸外，其餘的不拉伸；