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

本文链接：https://blog.youkuaiyun.com/lvxb_tiger/article/details/38038809

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文件：

运行效果：

下面添加标题栏图标：

ui.xml文件格式：

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

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

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

<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>