您的位置：首页 > 产品设计 > UI/UE

DuiVision开发教程(16)-区域控件

2015-06-10 00:44 429 查看

DuiVision的area控件（类名是CArea）可以设置区域的渐变透明度，不能响应鼠标事件，此控件的原理是画一个填充的透明度渐变矩形区域，透明度从矩形区域顶部到底部均匀渐变。

控件的属性包括：


属性名	类型	说明
color	颜色	矩形区域的颜色
begin-transparent	字体	矩形区域顶部的起始透明度
end-transparent	字符串	矩形区域底部的终止透明度

DuiVision Demo程序的很多界面都用到了area控件来实现渐变效果，例如，如下的登录对话框下面的渐变效果和分隔线，就是用4个area控件实现的：

对应的xml定义如下：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>

<dlg name="dlg_login" title="" width="420" height="270" appwin="0" resize="0"
frame="" bkimg="" crbk="000000"
img-shadow="skins\360\window_shadow.png" shadow-wlt="5" shadow-hlt="3" shadow-wrb="5" shadow-hrb="7" >

<base>
<imgbtn name="button.close" pos="-45,0,-0,29" skin="IDB_BT_CLOSE" show="1" shortcut="ESC" />
<imgbtn name="button.setup" pos="-74,0,-46,20" skin="IDB_BT_SETUP" show="1"/>
<text name="title" crtext="FFFFFF" crmark="800000" font="big"
pos="10,5,200,25" title="[APP_NAME]登录" mask="" response="0" show="1" />
</base>

<body>
<area name="area-1" pos="0,0,-0,140" begin-transparent="100" end-transparent="40" />
<area name="area-2" pos="0,140,-0,-0" begin-transparent="40" end-transparent="40" />
<area name="area-3" pos="0,-37,-0,-36" begin-transparent="70" end-transparent="70" />
<area name="area-4" pos="0,-36,-0,-0" begin-transparent="88" end-transparent="88" />

<img name="image" pos="16,109" width="87" height="87" skin="IDB_LOGIN_USER" mode="normal" framesize="1" show="1" />

<edit name="username" skin="IDB_EDIT" left-image="skin:IDB_COMPUTER"
pos="120,110" width="220" height="32" title="" tip="请输入用户名"
multiline="0" autohscroll="1" autovscroll="0" number="0" readonly="0" maxchar="50"
font="default" crtext="0,0,0" crtip="128,128,128,128" />

<linkbtn name="linkbtn" crtext="800000"
pos="350,116,-10,145" show="1" title="注册帐号" href="http://www.blueantstudio.net" />

<edit name="pwd" skin="IDB_EDIT" left-image="skin:IDB_EDIT_PWD"
pos="120,149" width="220" height="32" title="" password="1" tip="请输入密码"
multiline="0" autohscroll="1" autovscroll="0" number="0" readonly="0" maxchar="50"
font="default" crtext="0,0,0" crtip="128,128,128,128" />

<linkbtn name="linkbtn" crtext="800000"
pos="350,155,-10,180" show="1" title="找回密码" href="http://www.blueantstudio.net" />

<chkbtn name="checkbutton" skin="IDB_CHECK_BOX"
pos="120,190" width="100" height="22" show="1" title="记住密码" check="true" />

<chkbtn name="checkbutton" skin="IDB_CHECK_BOX"
pos="230,190" width="100" height="22" show="1" title="自动登录" check="false" />

<button name="button_1" skin="IDB_BT_DEFAULT" title="设置"
pos="20,-30,100,-6" show="1" shortcut="" />

<button name="button.ok" skin="IDB_BT_DEFAULT" title="[LOGIN]"
pos="-100,-30,-20,-6" show="1" shortcut="RETURN" />

</body>

</dlg>

下面的关于对话框的渐变效果和分隔线实现方式也是这样：

对应的xml定义：

<?xml version="1.0" encoding="utf-8"?>
<dlg name="dlg_about" title="MsgBox" width="450" height="230" appwin="1" resize="1"
translucent="245" frame="" bkimg="skin:SKIN_PIC_7" crbk="000000"
img-shadow="skins\default\winback_shadow.png" shadow-wlt="36" shadow-hlt="34" shadow-wrb="36" shadow-hrb="35">

<base>
<imgbtn name="button.close" pos="-45,0,-0,29" skin="IDB_BT_CLOSE" show="1"/>
<text name="title" crtext="FFFFFF" crmark="800000" font="big"
pos="10,5,200,25" title="关于[APP_NAME]" mask="[APP_NAME]" response="0" show="1" />
</base>

<body>
<area name="area-1" pos="0,0,-0,40" begin-transparent="100" end-transparent="30" />
<area name="area-2" pos="0,40,-0,-0" begin-transparent="30" end-transparent="30" />
<area name="area-3" pos="0,-37,-0,-36" begin-transparent="70" end-transparent="70" />
<area name="area-4" pos="0,-36,-0,-0" begin-transparent="88" end-transparent="88" />

<img name="icon" pos="25,45" width="128" height="128" image="skins\scriptnet.jpg" mode="normal" framesize="0" response="0" show="1" />

<text crtext="000000" pos="170,45,-25,65" title="[APP_NAME] [APP_VER]" />
<text crtext="000000" pos="170,65,-25,85" title="2013-2015" />

<linkbtn name="linkbtn1" crtext="800000"
pos="170,100,-25,130" show="1" title="http://www.blueantstudio.net" href="http://www.blueantstudio.net" />

<button name="button.ok" skin="IDB_BT_DEFAULT" title="[OK]" pos="-100,-30,-20,-6" show="1" />

</body>

</dlg>

以上两个对话框都是用area将界面从上到下分成4部分，第一部分是对话框顶部标题部分，透明度从全透明逐渐降低，使顶部可以更多的看到窗口背景图片，第二部分是标题向下的部分，有一个固定的透明度，因为这部分是窗口主体部分，需要能够看清窗口主体部分的内容，所以透明度不高，不至于被背景图片干扰到窗口内容的显示，第三部分是底部的分隔线，只有两个像素宽，第四部分是底部区域，为了能够区分出来，所以透明度提高了一些。

DuiVision开源代码下载地址（github）：https://github.com/blueantst/DuiVision

蓝蚂蚁工作室主页：http://www.blueantstudio.net

DuiVision QQ群：325880743

微信公众号：blueantstudio 或搜索蓝蚂蚁工作室

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航