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个像素的高度须要拉伸；除了以上指定四边长度或宽度拉伸外，其余的不拉伸；