nim_duilib(20)之即刻(1)
note
一个基于nim_duilib仿wechat的IM。
主界面
样式
美工差了。
布局
整体为水平布局,左边的深灰色区域(frame_left),右侧的light white区域(frame_right)。
右侧的区域(frame_right)分为垂直布局,其中,左侧红色用于显示好友列表,右侧绿色用于显示聊天对话框
global xml中定义
定义了一些控件的样式
<!--左侧窗口控件-->
<Class name="left_btn_portrait" tooltiptext="头像" height="36" width="36" margin="10,20,10,10" bkcolor="color_light_white1" normalimage="file='../left_frame/portrait_32X32.png'" />
<Class name="left_opt_msg" tooltiptext="消息" text="消息" height="36" width="36" margin="10,20,10,10" bkcolor="color_light_white1"
selectednormalimage="file='../public/button/btn_global_red_80x30_normal.png'"
selecteddisabledimage="file='../public/button/btn_global_red_80x30_normal.png' fade='30'"/>
<Class name="left_opt_contact" tooltiptext="联系人" text="联系人" height="36" width="36" margin="10,20,10,10" bkcolor="color_light_white1"
selectednormalimage="file='../public/button/btn_global_red_80x30_normal.png'"
selecteddisabledimage="file='../public/button/btn_global_red_80x30_normal.png' fade='30'"/>
<Class name="left_opt_file" tooltiptext="文件" text="文件" height="36" width="36" margin="10,20,10,10" bkcolor="color_light_white1"
selectednormalimage="file='../public/button/btn_global_red_80x30_normal.png'"
selecteddisabledimage="file='../public/button/btn_global_red_80x30_normal.png' fade='30'"/>
<Class name="left_btn_setting" tooltiptext="设置" height="36" width="36" margin="10,20,10,10" bkcolor="color_light_white1" normalimage="file='../left_frame/setting.png'" />
<!--中间窗体控件-->
<TextColor name="edit_tip" value="#ffa8a8a8"/>
<TextColor name="edit_bk_color" value="#ffd7d9d8"/>
<Class name="middle_rich_edit_search" bkcolor="edit_bk_color" font="system_14" multiline="false" promptmode="true" prompttext="搜索" promptcolor="edit_tip"/>
<Class name="middle_btn_add" font="system_16" bkcolor="color_light_white1"/>
frame_left
frame_left为垂直布局。 xml文件如下
<!--左侧的frame-->
<VBox class="frame_left" height ="stretch" width="60" >
<!--头像-->
<Button class="left_btn_portrait" />
<!--消息-->
<Option class = "left_opt_msg" group = "left_frame" />
<!--通讯录-->
<Option class = "left_opt_contact" group = "left_frame" />
<!--文件-->
<Option class = "left_opt_file" group = "left_frame" />
<Control />
<!--设置-->
<Button class = "left_btn_setting" />
</VBox>
frame_right
xml内容
<!--右侧的frame-->
<VBox class="frame_middle_vbox" height="stretch" width="stretch">
<!---->
<HBox width="stretch" height="55" >
<!--搜索-->
<HBox width="250" height="30" margin="0,20,0,20">
<Control name="search_icon" width="auto" height="auto" valign="center" margin="10,0,0,0" alpha="192"
bkimage="file='../frame_middle/icon_search_gray.png' "/>
<RichEdit class="middle_rich_edit_search" name="search_edit" height="auto" margin="8,0,10,0" valign="center" font="system_12" />
<Button class="middle_btn_top_del" name="clear_input" visible="false" valign="center" margin="0,0,10,0" />
<Button class="middle_btn_top_add" text="+" height="25" width="30" margin="0,0,10,10"/>
</HBox>
<!--标题-->
<Label text="1234567890abcdefghijklmpqrstuvwxyz" font="system_16" margin="10,20,0,0"/>
<Control />
<!--右上角3个按钮-->
<Button class="btn_wnd_min" name="minbtn" margin="4,6,0,0" />
<Box width="21" margin="4,6,0,0">
<Button class="btn_wnd_max" name="maxbtn" />
<Button class="btn_wnd_restore" name="restorebtn" visible="false"/>
</Box>
<Button class="btn_wnd_close" name="closebtn" margin="4,6,8,0"/>
</HBox>
<!--右侧:联系人列表和聊天框-->
<HBox>
<!--联系人列表-->
<VBox bkcolor="red" width="250" height="stretch">
</VBox>
<!--聊天对话框-->
<VBox bkcolor="green" width="stretch" height="stretch">
</VBox>
</HBox>
</VBox>
xml完整
<?xml version="1.0" encoding="UTF-8"?>
<Window mininfo="700, 500" size="700,500" caption="0,0,0,500" shadowattached="true" sizebox="4,5,5,5" >
<HBox bkcolor="color_light_white1" height="stretch" width="stretch">
<!--左侧的frame-->
<VBox class="frame_left_vbox" height ="stretch" width="60" >
<!--头像-->
<Button class="left_btn_portrait" />
<!--消息-->
<Option class="left_opt_msg" group = "left_frame" />
<!--通讯录-->
<Option class="left_opt_contact" group = "left_frame" />
<!--文件-->
<Option class="left_opt_file" group = "left_frame" />
<Control />
<!--设置-->
<Button class="left_btn_setting" />
</VBox>
<!--右侧的frame-->
<VBox class="frame_middle_vbox" height="stretch" width="stretch">
<!---->
<HBox width="stretch" height="55" >
<!--搜索-->
<HBox width="250" height="30" margin="0,20,0,20">
<Control name="search_icon" width="auto" height="auto" valign="center" margin="10,0,0,0" alpha="192"
bkimage="file='../frame_middle/icon_search_gray.png' "/>
<RichEdit class="middle_rich_edit_search" name="search_edit" height="auto" margin="8,0,10,0" valign="center" font="system_12" />
<Button class="middle_btn_top_del" name="clear_input" visible="false" valign="center" margin="0,0,10,0" />
<Button class="middle_btn_top_add" text="+" height="25" width="30" margin="0,0,10,10"/>
</HBox>
<!--标题-->
<Label text="1234567890abcdefghijklmpqrstuvwxyz" font="system_16" margin="10,20,0,0"/>
<Control />
<!--右上角3个按钮-->
<Button class="btn_wnd_min" name="minbtn" margin="4,6,0,0" />
<Box width="21" margin="4,6,0,0">
<Button class="btn_wnd_max" name="maxbtn" />
<Button class="btn_wnd_restore" name="restorebtn" visible="false"/>
</Box>
<Button class="btn_wnd_close" name="closebtn" margin="4,6,8,0"/>
</HBox>
<!--右侧:联系人列表和聊天框-->
<HBox>
<!--联系人列表-->
<VBox bkcolor="red" width="250" height="stretch">
</VBox>
<!--聊天对话框-->
<VBox bkcolor="green" width="stretch" height="stretch">
</VBox>
</HBox>
</VBox>
</HBox>
</Window>
nim_duilib(20)之即刻(1)的更多相关文章
- IntelliJ IDEA 的 20 个代码自动完成的特性
http://www.oschina.net/question/12_70799 在这篇文章中,我想向您展示 IntelliJ IDEA 中最棒的 20 个代码自动完成的特性,可让 Java 编码变得 ...
- 总结swift语言常见的20个问题和回答
1.假设我是个刚入门的iOS开发人员,选swift学习呢,还是选objective-c学习,还是两个都学? 这个能够依据两种情况来决定:1.我想进入公司担任iOS开发的职位 2.我仅仅想做个独立 ...
- 【IDEA&&Eclipse】3、IntelliJ IDEA 的 20 个代码自动完成的特性
在这篇文章中,我想向您展示 IntelliJ IDEA 中最棒的 20 个代码自动完成的特性,可让 Java 编码变得更加高效.对任何集成开发环境来说,代码的自动完成都是最最重要的一项功能,它根据你输 ...
- 20个实用的javascript技巧及实践(一)
在本篇文章中,我们将会向大家分享JavaScript开发中的小技巧.最佳实践和实用内容,不管你是前端开发者还是服务端开发者,都应该来看看这些编程的技巧总结,绝对会让你受益匪浅的. 文中所提供的代码片段 ...
- 仿即刻app"猜你喜欢"切换控件
最近在即刻里看到即刻的"猜你喜欢"的板块,觉得效果很赞. 当点击"换一换"时,上面三个条目程序切换效果,并且三个条目的切换以不同的速度进行. 于是开始想办法撸出 ...
- C++代码优化之nim_duilib控件关联
前言 使用nim_duilib关联控件,优化后.的确减少了代码量,那么,执行效率呢? 时间执行的长短与硬件.软件有关,以下内容仅为参考. 测试代码 下面的代码,分为两部分, 循环使用for,非循环则直 ...
- nim_duilib(13)之添加fmt库
introduction 习惯使用fmt库做字符串的格式化操作.尽管nim_duilib提供了类似的函数. 故项目demo_xml引入了外部库fmt framework.h中添加下面的以便使用fmt库 ...
- nim_duilib(1)之第一个dui executable(including configure setting in vs2017)
before starting clone nim_duilib: https://github.com/netease-im/NIM_Duilib_Framework 迁出github的源码即可. ...
- CSharpGL(20)用unProject和Project实现鼠标拖拽图元
CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...
随机推荐
- 基于 芯片 nordic 52832 rtt 调试(Mac 电脑)
代码配置 // <e> NRF_LOG_BACKEND_SERIAL_USES_UART - If enabled data is printed over UART //======== ...
- spl_autoload_register的作用
spl_autoload_register的作用 当php实例化一个类的时候,这个类如果在另外的文件,那么不用include或require的时候就会报错,为了解决这个问题,可以用spl_autolo ...
- 宏GENERATED_BODY做了什么?
Version:4.26.2 UE4 C++工程名:MyProject \ 一般语境下,我们说c++源码的编译大体分为:预处理.编译.链接; cppreference-translation_phas ...
- javaSE高级篇4 — 反射机制( 含类加载器 ) — 更新完毕
反射机制 1.反射机制是什么?----英文单词是:reflect.在java.lang包下---这才是java最牛逼的技术 首先提前知道一句话----在java中,有了对象,于是有了类,那么有了类之后 ...
- javaWeb - 2 — ajax、json — 最后附:后台获取前端中的input type = "file"中的信息 — 更新完毕
1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...
- 零基础学习java------39---------json格式交互,Restful(不懂),静态资源映射,SSM整合(ssm整合思想,application.xml文件详解(声明式事务管理),)
一. json格式交互(知道) 1 . 回顾ajax基本语法 $.ajax({ url:"", // 请求的后台路径 data:{"":"" ...
- Angular @Input讲解及用法
1.什么是@input @input的作用是定义模块输入,是用来让父级组件向子组件传递内容. 2.@input用法 首先在子组件中将需要传递给父组件的变量用@input()修饰 需要在子组件ts文件i ...
- Set、Map、WeakSet 和 WeakMap 的区别
先总结: Set1. 成员不能重复2. 只有健值,没有健名,有点类似数组.3. 可以遍历,方法有add, delete,hasweakSet 1. 成员都是对象 2. 成员都是弱引用,随时可以消失. ...
- STM32代码常见的坑
1 混淆换行符\和除号/造成的坑 入坑代码: GPIO_InitStructure.GPIO_Pin = GPIO_Pin_0 | GPIO_Pin_1 | GPIO_Pin_2 | GPIO_Pin ...
- 字节数与字符数mysql_mysql里一个中文汉字占多少字节数?
在mysql中,如果是latin1字符集下,一个中文汉字占2个字节数:如果是utf8字符集下,一个中文汉字占3个字节数:如果是gbk字符集下,一个中文汉字占2个字节数. mysql各字符集下汉字和字母 ...