给大家介绍一下我写的界面库SkinUI，求推荐

最新推荐文章于 2020-12-11 16:28:56 发布
最新推荐文章于 2020-12-11 16:28:56 发布
阅读量1.7k 收藏
点赞数 1
分类专栏： Windows 文章标签： SkinUI 界面库 DirectUI duilib qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuzhongliang/article/details/102893645
版权

给大家介绍一下我写的界面库SkinUI，个人认为是现阶段Windows平台下最好用的c++界面库。

  • 基于Win32，不依赖其他界面库；
  • 使用简单，会C++但是没写过界面的同学也可以很快上手；
  • 性能不错，首次加载速度快，基本可以秒开。

组件化开发

通常情况下，如果项目比较大，各个模块需要解耦，组件化开发是必然的选择。

SkinUI支持组件化开发，参考下面的例子：

<Dialog DefaultWidth="1000" DefaultHeight="670" MinWidth="1000" MinHeight="670" ThemeHeight="60" AllowResize="true" Icon="128">
	<RadioGroup Id="20110" AlignParentHorzCenter="0" Width="400" Height="60" AlignParentTop="0">
		<RadioButton Id="20110" Width="100" Height="MatchParent" AlignParentLeft="0" BindView="20000" Layout="MainTabButton.xml" Background="MainTabButton.png" ChildText11="IDS_TODO" Checked="true"/>
		<RadioButton Id="20111" Width="100" Height="MatchParent" AlignParentLeft="100" BindView="21000" Layout="MainTabButton.xml" Background="MainTabButton.png" ChildText11="IDS_CONVERSATION"/>
		<RadioButton Id="20112" Width="100" Height="MatchParent" AlignParentLeft="200" BindView="22000" Layout="MainTabButton.xml" Background="MainTabButton.png" ChildText11="IDS_ADDRESSBOOK"/>
		<RadioButton Id="20113" Width="100" Height="MatchParent" AlignParentLeft="300" BindView="23000" Layout="MainTabButton.xml" Background="MainTabButton.png" ChildText11="IDS_APP_BOX"/>
	</RadioGroup>
	<SwitchLayout Width="MatchParent" AlignParentTop="60" AlignParentBottom="0" Background="MainBkg.png">
		<ToDoLayout Id="20000" Width="MatchParent" Height="MatchParent" LazyLoad="true" Layout="ToDoLayout.xml" Background="247,247,247"/>
		<ConvLayout Id="21000" Width="MatchParent" Height="MatchParent" LazyLoad="true" Layout="ConvLayout.xml" Visible="false"/>
		<AddressBookLayout Id="22000" Width="MatchParent" Height="MatchParent" LazyLoad="true" Layout="AddressBookLayout.xml" Visible="false"/>
		<AppBoxLayout Id="23000" Width="MatchParent" Height="MatchParent" LazyLoad="true" Layout="AppBoxLayout.xml" Visible="false"/>
	</SwitchLayout>
</Dialog>

以上的布局文件，定义了四个自定义组件ToDoLayout、ConvLayout、AddressBookLayout、AppBoxLayout，用来表示四个Tab页。

各组件可以有自己的布局文件，例如：

<AppBoxLayout Id="23000" Width="MatchParent" Height="MatchParent" LazyLoad="true" Layout="AppBoxLayout.xml" Visible="false"/>

表示自定义组件AppBoxLayout的布局文件为AppBoxLayout.xml

定义一个自定义组件也很简单，参考下面的代码：

#pragma once
class CAppBoxLayout : public CRelativeLayout
{
public:
	CAppBoxLayout(CView* pParent);
	SKINUI_DECLARE_DYNCREATE(CAppBoxLayout, CRelativeLayout)
};

通过下面的宏，定义了一个自定义组件，基类为CRelativeLayout。

SKINUI_DECLARE_DYNCREATE(CAppBoxLayout, CRelativeLayout)

这样定义之后，不仅可以在布局文件直接通过AppBoxLayout引用组件，开发工具的自定义组件列表里面也会出现该组件。

消息映射

消息映射参考MFC，提供了一系列消息映射宏。参考下面的代码：

class CAppBoxLayout : public CRelativeLayout
{
public:
	enum
	{
		IDC_LISTVIEW_GROUP = 30200,
		IDC_LISTVIEW_APP = 30300,
		IDC_BUTTON_APP = 30310,
	};

public:
	CAppBoxLayout(CView* pParent);

protected:
	void OnBtnClickedApp(UINT uNotifyCode, int nID, CView* pView);
	void OnListViewCheckedChange(LONG nId, CListView* pListView, BOOL& bHandle);
	SKINUI_DECLARE_MESSAGE_MAP()
};

SKINUI_BEGIN_MESSAGE_MAP(CAppBoxLayout, CRelativeLayout)
	ON_SKINUI_COMMAND(IDC_BUTTON_APP, OnBtnClickedApp)
	ON_SKINUI_WM_LISTVIEW_CHECKED_CHANGE()
SKINUI_END_MESSAGE_MAP()

CAppBoxLayout::CAppBoxLayout(CView* pParent)
: CRelativeLayout(pParent)
{

}

void CAppBoxLayout::OnBtnClickedApp(UINT uNotifyCode, int nID, CView* pView)
{
	//to do
}

void CAppBoxLayout::OnListViewCheckedChange(LONG nId, CListView* pListView, BOOL& bHandle)
{
	//to do
}

命令消息和内置消息的消息处理函数，可以写在任一级父组件的实现文件里，上面的例子表示：

//响应按钮点击消息
ON_SKINUI_COMMAND(IDC_BUTTON_APP, OnBtnClickedApp)

//响应列表Item选中变更消息
ON_SKINUI_WM_LISTVIEW_CHECKED_CHANGE()

布局方式

SkinUI提供的相对布局和弹性布局可以很方便的实现百分比布局、自适应布局，语义简单明确、合乎自然。

组件宽度

组件的宽度设置为下面几种情况：

//宽度跟父组件同宽
Width="MatchParent"

//宽度适应内容大小
Width="WrapContent"

//宽度为绝对值300像素
Width="300"

//宽度为父组件宽度的50%
Width="50%"

组件宽度

组件的高度可以设置为下面几种情况：

//高度跟父组件同高
Hight="MatchParent"

//高度适应内容大小
Hight="WrapContent"

//高度为绝对值300像素
Hight="300"

//高度为父组件高度的50%
Hight="50%"

相对布局

参考Android，提供了相对布局。可以相对父组件定位，也可以相对兄弟组件定位。共有下面几种设置相对位置的属性：

相对父组件
水平方向
//定位左边，左边边距父组件左边10像素
AlignParentLeft="10"

//定位右边，右边边距父组件右边10像素
AlignParentRight="10"

//定位中心，水平中心距父组件水平中心偏移10像素
AlignParentHorzCenter="10"
垂直方向
//定位上边，上边边距父组件上边10像素
AlignParentTop="10"

//定位下边，下边边距父组件下边10像素
AlignParentBottom="10"

//定位中边，垂直中心距父组件垂直中心偏移10像素
AlignParentVertCenter="10"
相对兄弟组件
水平方向
//定位右边，在Id为1000的兄弟组件的左边10像素
ToLeftOf="1000,10"

//定位左边，在Id为1000的兄弟组件的右边10像素
ToRightOf="1000,10"

//定位左边，左边跟Id为1000的兄弟组件的左边对齐，偏移10像素
AlignLeftOf="1000,10"

//定位右边，右边跟Id为1000的兄弟组件的右边对齐，偏移10像素
AlignRightOf="1000,10"
垂直方向
//定位下边，在Id为1000的兄弟组件的上边10像素
ToTopOf="1000,10"

//定位上边，在Id为1000的兄弟组件的下边10像素
ToBottomOf="1000,10"

//定位上边，上边跟Id为1000的兄弟组件的上边对齐，偏移10像素
AlignTopOf="1000,10"

//定位下边，下边跟Id为1000的兄弟组件的下边对齐，偏移10像素
AlignBottomOf="1000,10"

参考下面的例子：

//ListView宽高都跟父组件保持一致
<RelativeLayout>
	<ListView Width="MatchParent" Height="MatchParent"/>
</RelativeLayout>

//宽度跟父组件保持一致，高度为父组件50%，上边距父组件上边40像素
<RelativeLayout>
	<ListView Width="MatchParent" Height="50%" AlignParentTop="40"/>
</RelativeLayout>

//宽度为父组件50%，高度为父组件50%，水平居中，垂直居中
<RelativeLayout>
	<ListView Width="50%" Height="50%" AlignParentHorzCenter="0" AlignParentVertCenter="0"/>
</RelativeLayout>

//宽度为父组件80%，高度为父组件50%，左边距父组件左边10像素，上边距父组件上边40像素
<RelativeLayout>
	<ListView Width="80%" Height="50%" AlignParentLeft="10" AlignParentTop="40"/>
</RelativeLayout>

//左边距Id为1001的兄弟组件右边10像素，上边跟Id为1001的兄弟组件上边对齐，右边距父组件右边10像素，下边距父组件下边40像素
<RelativeLayout>
	<TextView Id="1001" Width="WrapContent" Height="WrapContent" AlignParentLeft="10" AlignParentTop="40"/>
	<ListView Id="1002" ToRightOf="1001,10" AlignTopOf="1001,0" AlignParentRight="10" AlignParentBottom="40"/>
</RelativeLayout>

实际应用中，定位组件的水平位置，有下面十七种方法：

指定宽度

指定宽度的情况下，只需要再指定任意一个定位左边、定位右边或定位中心的属性即可，共有下面八种情况：

// 特殊情况，不需要其他定位属性
Width="MatchParent"

Width="50%" AlignParentLeft="10"

Width="50%" AlignParentRight="10"

Width="50%" AlignParentHorzCenter="10"

Width="50%" ToLeftOf="1000,10"

Width="50%" ToRightOf="1000,10"

Width="50%" AlignLeftOf="1000,10"

Width="50%" AlignRightOf="1000,10"

不指定宽度

不指定宽度的情况下，需要同时指定一个定位左边的属性和一个定位右边或定位中心的属性，共有下面九种情况：

AlignParentLeft="10" AlignParentRight="10"

AlignParentLeft="10" ToLeftOf="1000,10"

AlignParentLeft="10" AlignRightOf="1000,10"

ToRightOf="1000,10" AlignParentRight="10"

ToRightOf="1000,10" ToLeftOf="1000,10"

ToRightOf="1000,10" AlignRightOf="1000,10"

AlignLeftOf="1000,10" AlignParentRight="10"

AlignLeftOf="1000,10" ToLeftOf="1000,10"

AlignLeftOf="1000,10" AlignRightOf="1000,10"

定位组件的垂直位置，同样有下面十七种方法：

指定高度

指定高度的情况下，只需要再指定任意一个定位上边、定位下边或定位中心的属性即可，共有下面八种情况：

// 特殊情况，不需要其他定位属性
Width="MatchParent"

Width="50%" AlignParentTop="10"

Width="50%" AlignParentBottom="10"

Width="50%" AlignParentHorzCenter="10"

Width="50%" ToTopOf="1000,10"

Width="50%" ToBottomOf="1000,10"

Width="50%" AlignTopOf="1000,10"

Width="50%" AlignBottomOf="1000,10"

不指定高度

不指定高度的情况下，需要同时指定一个定位上边的属性和一个定位下边或定位中心的属性，共有下面九种情况：

AlignParentTop="10" AlignParentBottom="10"

AlignParentTop="10" ToTopOf="1000,10"

AlignParentTop="10" AlignBottomOf="1000,10"

ToBottomOf="1000,10" AlignParentBottom="10"

ToBottomOf="1000,10" ToTopOf="1000,10"

ToBottomOf="1000,10" AlignBottomOf="1000,10"

AlignTopOf="1000,10" AlignParentBottom="10"

AlignTopOf="1000,10" ToTopOf="1000,10"

AlignTopOf="1000,10" AlignBottomOf="1000,10"

弹性布局

关于弹性布局，请参考阮一峰老师的文章Flex 布局教程。SkinUI只是在属性名上作了适当简化。

其他

更多特性，包括控件、动画、渲染引擎、国际化等请访问官方网站

吴忠亮
关注
专栏目录
入门SkinUI（0）：导读
吴忠亮的专栏
11-29 338
Windows客户端开发的一项重要工作就是用户界面的开发。 不管客户端应用实际包含的逻辑多么复杂、多么优秀，如果这个应用没有提供友好的图形用户界面，也将很难吸引最终用户。相反，如果为应用程序提供了友好的图形用户界面，最终用户通过鼠标点点就可以操作整个应用，这个应用程序就会受欢迎得多。 作为一个程序开发者，必须优先考虑用户的感受，一定要让用户感到爽，我们的程序才会被需要、被使用，这样的程序才有价值。...
入门SkinUI（9）：资源（4）：皮肤
吴忠亮的专栏
11-29 392
存放路径 bin\res\UIDemo\value\skin.xml 文件格式如下： <SkinTable> <Skin Name="default" Color="2072EC" StartColor="0079F2" EndColor="3964E6" HorzGradient="true"/> <Skin Name="1" Color="255,...
SkinUI界面库
09-14
SkinUI界面库是个人自主研发的界面开发框架,提供快速、轻巧、一键换肤的界面引擎,为个人和企业提供桌面软件开发的一站式服务 具体文档参考： https://www.showdoc.cc/skinui?page_id=135243
SkinUI界面库写的批量重命名源码
07-20
VS2013环境下用SkinUI界面库写的小程序，支持换皮肤，算是SkinUI应用的一个小实例吧
界面库skin#集合
09-14
界面库skin#全集合(各语言破解+皮肤制作工具+Demo+教程) 包含vc++,vb,.net,易语言,c#等各种语言的破解版,还有制作皮肤工具,使用帮助,详细到每一个接口都有源代码示例，算是比较全的skinsharp资源
SKINUI开发包
12-19
C++界面开发包SKINUI，可实现XML配置界面
SkinUI界面库开发
04-17
【SkinUI界面库开发】是针对用户界面设计的一项技术，主要目标是提供美观且自定义丰富的界面元素。在软件开发中，用户界面的外观和交互性对于提升用户体验至关重要，而SkinUI界面库就是为了帮助开发者实现这一目标。...
免费新版界面库分享
鑫界面库
12-11 221
一款免费新版界面库链接:https://pan.baidu.com/s/1lyfADbYr005r_tS68DEEIQ 提取码:9in4 支持调用C函数的所有语言使用。
入门SkinUI（1）：开发工具
吴忠亮的专栏
11-29 1070
UIDevTools是SkinUI官方提供的开发工具，点击此处下载安装包。提供以下功能： ####自动生成ID 菜单ID <Menu> <MenuItem Id="Cut" Text="IDS_CUT"/> <MenuItem Id="Copy" Text="IDS_COPY"/> <MenuItem Id="Paste" Text="IDS_P...
入门SkinUI（10）：布局（3）：滚动布局
吴忠亮的专栏
12-02 198
滚动布局CScrollLayout，继承于CFlexLayout，支持CFlexLayout的所有属性和方法。 相关属性和方法 设置滚动条 通过XML属性控制如下： //设置滚动条（不设置该属性，则使用默认值"ScrollBar.png"） ScrollBar="ScrollBar.png" //强制不显示滚动条 ScrollBar="" 通过C++程序代码调用方法控制如下： void...
DSkin界面库源码 C#的UI类库
07-29
Dskin的界面库代码。纯C#编写的，用于winform界面开发的美化界面库，提供了很多美化控件。可以用来开发QQ，360等好看的软件界面。此为历史版本的源码，可以窥见一些技术。
【SkinUI实例】仿QQ界面设计第三十二课-附件资源
03-05
【SkinUI实例】仿QQ界面设计第三十二课-附件资源
【SkinUI实例】仿QQ界面设计第三十二课
11-07
【SkinUI实例】仿QQ界面设计第三十二课，通过MFC搭建QQ2013皮肤，关于更多程序开发设计，请继续关注郭延明个人博客，本代码讲解地址http://www.gymsaga.com/project/607.html
开源一套DirectUI界面库
05-24
最近改玩WinRT和Metro了，看到有些朋友还在玩基于GDI的DirectUI，正好自己以前也尝试写过的，反正放着也没用，开源吧。 这个DirectUI界面库主要参考一个老外的程序, 支持各种Layout模式,实现了各种基本控件(SplitBar, PictureBox, Button, Radio, CheckBox, Label, HyperLink, ProgressBar, trackBar, ListBox, Edit, ComboBox, Tab Control, Toolbar, Menu, tree)，控件基本全部支持键盘操作，支持键盘导航，支持Tooltip，支持多语言，支持换肤，支持异形窗口，支持Layered Window, 支持插件2次开发，支持Alpha通道，支持各种图像处理。
入门SkinUI（10）：布局（1）：相对布局
吴忠亮的专栏
12-02 245
相对布局CRelativeLayout，继承于CLayout，支持CLayout的所有属性和方法。 确定相对布局子视图的左右坐标有以下两种方法： 设置视图宽度、视图左边坐标、视图右边坐标三个中任意两个 设置视图宽度和视图中心到父视图中心水平方向的距离 确定相对布局子视图的上下坐标也有以下两种方法： 设置视图高度、视图上边坐标、视图下边坐标三个中任意两个 设置视图高度和视图中心到父视图中心垂直...
重构SkinUI代码更新啦！
u011473714的专栏
05-27 3401
本次抽了一点时间简单重构了一下SkinUI 先简单概述一下SkinUI，SkinUI是基于重绘MFC控件而开发的一套简单的MFC界面库，而非现在主流的DriectUI库，因为基于Windows的标准控件，所以限制性还是比较大的！因为库中不可能把每个控件做到面面俱到，只是实现目前大多数的功能而已，当遇到更新复杂的控件还是需要用户自己进行重绘！ 上一版本的SkinUI，因为逻辑代码和界面没有分离，
入门SkinUI（7）：消息映射
吴忠亮的专栏
11-29 147
SkinUI通过消息映射宏组成一张消息映射表，并跟基类的消息映射表联合起来。 一个对话框类如果要自己处理某些消息，需要在头文件和源文件分别加上消息映射宏，如下所示： 头文件 void OnCommandWebsite(UINT uNotifyCode, int nID, CView* pView); void OnCommandAbout(UINT uNotifyCode, int nID...
VC UI界面库大集合
weixin_34029680的博客
05-08 470
http://hwljj.blog.hexun.com/59157281_d.htmlhttp://blog.sina.com.cn/s/blog_6c3beecc0100lqqe.html 
入门SkinUI（4）：布局
吴忠亮的专栏
11-29 258
CLayout是所有布局类的基类，包含的XML属性和方法所有布局都可以使用。 下面是CLayout类常用的XML属性和相关方法： 1 设置子视图文本 通过XML属性控制如下： ChildText11="IDS_TEXT" 通过C++程序代码调用方法控制如下： virtual void SetChildText(LONG nId, const String& strText); ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值