duilib-- 图片和文字的位置调整---编辑框

转自 http://www.cnblogs.com/Alberl/p/3398319.html

 

上个教程讲到了按钮图片效果不对的问题，如下：　

　　明明是迅雷里面的图片，为啥效果和迅雷不一样呢？ 这是因为duilib默认会将图片缩放成和控件一样大小，这个时候我们需要在图片里加上dest属性。

normalimage="file='btn_open.png' source='178,0,266,16' dest='38,13,126,29' "

　　其中source='178,0,266,16' 代表只显示btn_open.png中(178,0,266,16)区域的图片。(注：所有的坐标顺序都是左上右下 )

　　dest='38,13,126,29' 代表将source区域的图片显示到按钮的（38,13,126,29）区域。可以看到dest代表的宽度为98，高度为16，也就是图片的高度和宽度啦，这样duilib就不会拉伸图片拉。效果如下：

　　是不是和迅雷的一个像素都不差呢~O(∩_∩)O~

　　那我们接着加上上方的地址栏，

<Edit  text="请输入播放地址">

　　这个效果和迅雷也差太远了吧~~~ 不急，下面我们加上更详细的属性，比如背景，字体颜色等等，XML如下：

 <Edit  text="请输入播放地址" bkcolor="#FF0E0E0E" textcolor="#FF4B4F51" disabledtextcolor="#FFA7A6AA" />

　　终于有点像啦，不过貌似文字离编辑框的左边太近了点，这时就要加上 textpadding="10,0,8,0"啦，意思就是文字离左边最少10个像素，离右边最少8个像素，效果如下：

　　嗯，现在位置也和迅雷一样啦，不过可以发现点击编辑框的时候，又不一样啦

　　我勒个去，吓(he)老子一跳，又和迅雷差了一大截啊o(╯□╰)o

　　嘿嘿，加上 nativebkcolor="#FF0E0E0E" 属性就好一点啦，效果如下：　

　　不过编辑框的高度怎么那么挤呢？ 这个Alberl没有去研究设置高度的属性，不过改变字体后，高度会跟着变化哟，那我们就加上font="3" 属性吧，不过这里的"3"指的是第4个默认的字体，字体XML如下：

<Font name="微软雅黑" size="12" bold="false" />

　　哈哈，和迅雷一样了吧~O(∩_∩)O~

　　不过可以发现迅雷的编辑框有蓝色的边框，这个Alberl设置了好一会儿，发现focusbordercolor并不生效，后来仔细看了Edit的所有属性，发现有个bordersize属性，对头，需要设置bordersize属性，focusbordercolor才能生效，那我们加上如下属性：

bordersize="1" focusbordercolor="#FF154B83"

　　不过duilib并没有提供hotbordercolor属性，所以当鼠标移上去时，并不显示蓝色边框，但是和迅雷也仅仅是差这一个地方而已，并且我们可以用图片来代替hotbordercolor属性，一个开源软件能做到如此地步，还能苛求什么呢~O(∩_∩)O~  不过建议大家去实现一下hotbordercolor属性，已经有focusbordercolor了，所以这个很简单的哦，当然啦，分不分享随便你，it's up to you！

　　Edit控件的整个XML代码如下：                

<Edit   name="editURL" text="请输入播放地址" font="3" textpadding="10,0,8,0" bordersize="1" focusbordercolor="#FF154B83" nativebkcolor="#FF0E0E0E" bkcolor="#FF0E0E0E" textcolor="#FF4B4F51" disabledtextcolor="#FFA7A6AA" />

　　【打开文件】按钮的整个XML代码如下：

<Button name="btnOpen" float="true" pos="72,228,0,0" width="158" height="40" bkimage="file=&apos;btn_bk.png&apos;" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" pushedimage="file=&apos;btn_open.png&apos; source=&apos;0,0,88,20&apos; dest=&apos;38,13,126,29&apos; " hotimage="file=&apos;btn_open.png&apos; source=&apos;89,0,177,16&apos; dest=&apos;38,13,126,29&apos; " normalimage="file=&apos;btn_open.png&apos; source=&apos;178,0,266,16&apos; dest=&apos;38,13,126,29&apos; " />