原文转载自: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个像素的高度需要拉伸;除了以上指定四边长度或宽度拉伸外,其他的不拉伸;

duilib属性的更多相关文章

  1. duilib属性列表

    <?xml version="1.0" encoding="UTF-8"?> <!-- 可能有错漏,欢迎补充.wangchyz(wangchy ...

  2. nim_duilib(15)之duilib属性列表.xml

    Note 为了更加方便查看duilib的属性(github有时候打不开),特此记录. 阅读本文,可以知道控件有哪些属性,可以写在xml文件中.个别需要结合源码一起看 from here 原文 < ...

  3. 使用Duilib开发Windows软件(2)——控件的基本介绍

    XML 先学习xml https://www.w3cschool.cn/xml/xml-xml-tutorialhc4o1t5m.html 控件 上图是我们下载的NIM_Duilib_Framewor ...

  4. jqu

    1 /*2 * 说明:3 * 本源代码的中文注释乃Auscarlin呕心沥血所作.旨在促进jQuery的传播以及向广大jQuery爱好者提供一个进阶4 *的途径,以让各位更加深入地了解jQuery,学 ...

  5. DuiLib学习笔记(二) 扩展CScrollbar属性

    DuiLib学习笔记(二) 扩展CScrollbar属性 Duilib的滚动条滑块默认最小值为滚动条的高度(HScrollbar)或者宽度(VScrollbar).并且这个值默认为16.当采用系统样式 ...

  6. duilib relativepos属性导致控件错误的bug修复

    转载请说明出处,谢谢~~ 我在仿酷狗音乐播放器的开发日志系列里,曾经提到了这个bug,文章地址为:http://blog.csdn.net/zhuhongshu/article/details/381 ...

  7. duilib corner属性的贴图技巧——让图片自动贴到控件的的某一边或者一角并自适应控件的大小

    转载请说明原出处,谢谢~~ Duilib给控件贴图功能可以附带多个属性,各个属性的配合可以达到许多效果.以下是duilib支持的所有贴图属性: 贴图描述: Duilib的表现力丰富很大程度上得益于贴图 ...

  8. duilib bkimage 属性

    duilib bkimage 属性<Attribute name="bkimage" default="" type="STRING" ...

  9. duilib 修复padding属性导致其他控件自动计算宽高度错误的bug和导致自己宽高度错误的bug

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42950733          BUG 一:padding导致其他控件宽 ...

随机推荐

  1. JSP中自动刷新

    以下内容引用自http://wiki.jikexueyuan.com/project/jsp/auto-refresh.html: 细想一个显示在线比赛分数.股市状态或当前交易额的网页.对于所有这种类 ...

  2. &quot;Simple Factory&quot; vs &quot;Factory Method&quot; vs &quot;Abstract Factory&quot; vs &quot;Reflect&quot;

    ref: http://www.cnblogs.com/zhangchenliang/p/3700820.html 1. "Simple Factory" package torv ...

  3. NoSQL数据库概览及其与SQL语法的比較

    [文章摘要] HBase是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统.同一时候也是知名的NoSQL数据库之中的一个.NoSQL数据库的产生就是为了解决大规模数据集合多重数据种类带来的挑战,尤 ...

  4. 华为OJ2288-合唱队(最长递增子序列)

    一.题目描述 描述: N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学不交换位置就能排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1, 2, -, ...

  5. 使用Docker部署Gitlab

    由于公司的代码server已使用Gitosis搭建,但由于用户和权限管理太麻烦. 如今想在原有server上再搭建Gitlab,使用Gitlab官方方法直接安装. 会导致与Gitosis冲突,使得Gi ...

  6. JsonArray和JsonObject的使用

    import net.sf.json.JSONArray; import net.sf.json.JSONObject; public class JsonTest { public static v ...

  7. Windows 点击 模拟

    点击模拟  安卓模拟器  爬虫

  8. Codeforces Round #228 (Div. 2) C. Fox and Box Accumulation

    C. Fox and Box Accumulation time limit per test 1 second memory limit per test 256 megabytes input s ...

  9. 利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全)

    利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全) 14.4 利用JFreeChart生成折线图 通过JFreeChart插件,既可以生成普通效果的折线图,也可以生成3D效果的折 ...

  10. luogu 1121 环状最大两段子段和

    题目大意: 一个序列看做一个环 选两段数使它们和最大 思路: 定义一个dp数组i j 0/1 表示前i个取了连续的j段 0/1表示取不取第i个 但是因为看做一个环 首尾相接的情况可以看做是选三段,其中 ...