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

时间：2015-06-10 01:10:56 阅读：503 评论：0 收藏：0 [点我收藏+]

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 或搜索蓝蚂蚁工作室

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

标签：duivision 界面库

原文地址：http://blog.csdn.net/oceanheart/article/details/46434559

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行