UIPro实例讲解之QQ2014 UI模仿系列一

UIPro的宗旨是：让Windows UI开发像写小网页一样简单!

从高中时代开始，QQ一直伴随着我，一直觉得QQ的UI都是那么的漂亮，说实话，细节处理的真好。QQ自然成了我模仿的对象。

一直想模仿，但手上缺少一个强大灵活的UI库，直到现在,UIPro的出现，才让我又拾起那个想法，编写这个QQCopy的demo。

在该系列的最后一讲，会附上源码哦！

UIPro的配置文件分为两个，一个是resource.xml，描述资源的类型（图片，字体，颜色），一个ui.xml文件，描述容器、控件、布局。换肤的话，一般重新加载resource.xml文件即可。如果涉及的控件的变形和移动，还需要加载新的ui.xml。

下面开始讲解QQ主面板的开发：

咱们把QQ主面板分为下图紫色方框示意的三个容器：



主窗口类（这里不再贴这几行代码，可以在源码中看到）创建完毕，加载资源和ui.xml。开始在ui.xml中配置控件；

1. 背景和阴影边框

对应的资源文件：

<?xml version="1.0" encoding="utf-8"?>

<resource>

<img_extent>

<item id="uipro.window.frame" margin="670,170,0,0" type="stretch" name="main.png"/>

<item id="uipro.window.shadow" margin="7,7,7,7" type="frame" name="shadow.png"/>

</img_extent>

</resource>

对应的ui.xml文件：

<?xml version="1.0" encoding="utf-8"?>

<!--跟ui-->

<canvas id="root" layout="relative" layout_width="match_parent" layout_height="match_parent">

<!--icon绘制阴影-->

<icon id="mainpanel.shadow" resid='uipro.window.shadow' mode='stretch' layout_width="match_parent" layout_height="match_parent"/>

<!--跟ui的一个子容器-->

<stackpanel id="panel.controls" layout="relative" layout_width="match_parent" layout_height="match_parent" layout_marginLeft="7" layout_marginTop="7" layout_marginRight="7" layout_marginBottom="7">

<!--主面板的背景图片-->

<icon id="mainpanel.background" resid='uipro.window.frame' mode='stretch' layout_width="match_parent" layout_height="match_parent"/>

</stackpanel>

</canvas>

运行效果：



下面添加标题栏图标：

ui.xml文件格式：

<?xml version="1.0" encoding="utf-8"?>

<!--跟ui-->

<canvas id="root" layout="relative" layout_width="match_parent" layout_height="match_parent">

<!--icon绘制阴影-->

<icon id="mainpanel.shadow" resid='uipro.window.shadow' mode='stretch' layout_width="match_parent" layout_height="match_parent"/>

<!--跟ui的一个子容器-->

<stackpanel id="panel.controls" layout="relative" layout_width="match_parent" layout_height="match_parent" layout_marginLeft="7" layout_marginTop="7" layout_marginRight="7" layout_marginBottom="7">

<!--主面板的背景图片-->

<icon id="mainpanel.background" resid='uipro.window.frame' mode='stretch' layout_width="match_parent" layout_height="match_parent"/>

<stackpanel id="panel.top.controls" layout="relative" layout_width="match_parent" layout_height="wrap_content" layout_alignCenterHorizontal="mainpanel.background">

<icon id="panel.logo" resid='caption.logo' layout_marginLeft="8" layout_marginTop="3" layout_marginBottom="20"/>

<button id="uipro.window.close" resid="uipro.caption.button.close" background="0" layout_alignParentRight="true"/>

<button id="uipro.window.minimize" resid="uipro.caption.button.minimize" background="0" layout_toLeftOf="uipro.window.close"/>

<button id="panel.skin" resid="caption.button.skin" background="0" layout_toLeftOf="uipro.window.minimize"/>

<icon id="skin.new" resid="yuanred.0" layout_alignTop="panel.skin" layout_alignRight="panel.skin" layout_marginTop="5" layout_marginRight="5"/>

<simplestatic id="uipro.window.caption" font='uipro.caption.text.font' color='uipro.caption.text.color' content='' layout_width="match_parent" layout_height="match_parent" layout_toLeftOf="panel.skin" layout_alignTop="panel.logo" layout_alignBottom="panel.logo"/>

</stackpanel>

</stackpanel>

</canvas>

运行效果：



添加上部的按钮和edit，菜单等：





添加下部的按钮：





添加tab，好友列表：





至此：一个QQ主面板大体已经成形

本讲解demo下载（可以修改里面的xml修改UI哦）：

商业合作方式：

优视工作室

QQ：305108678

email：305108678@qq.com