云信DUILIB 常用控件 小实例


云信duilib在原duilib基础上扩展而来,包含了常用的控件。

下面是自己学习过程中,经常用到的一些小知识点。


1 Label标签

1.1 一般用法

比如:MFC 中常用的文件对话框


使用duilib可以这么写

              

1.2 

使得标签位于盒子中间显示


可以这么写

            
                

1.3

使用textid  好处是在不修改XML的情况下,可以方便修改文字

而这个textid是保存在bin\\lang\\zh_CN目录下的gdstrings.ini文件中的。

此文件中定义了id所对应的文本



云信DUILIB 常用控件 小实例_第1张图片



云信DUILIB 常用控件 小实例_第2张图片


1.4 Label标签的width默认是auto,根据文字确定宽度

将其居中对齐,可用如下方式

//将其设置为 stretch  可拉伸方式,这样其宽度由父容器决定,然后再将其 文字对齐方式设置为center 居中对齐

2 分割线

分割线也是经常用到的。

2.1 横向分割线


or
 

2.2 纵向分割线

分割线的颜色是在global.xml中定义的

  
    
    
    
    
     
 
    
    
    
    
     

2.3 子控件间隔

 布局中的 childmargin="20" 表示 子控件间的额外距离。这个有时候也是分割线效果,只不过分割线颜色为背景色,这是因为它本质上是子控件的间隙。

比如VListBox设置childmargin  可以让列表项之间有空隙,进而起到分割线作用

                

3图像

3.1 盒子里有一个图片,圆形居中,图片中间部分显示label名字

云信DUILIB 常用控件 小实例_第3张图片


   
   

3.2 图片按钮

云信DUILIB 常用控件 小实例_第4张图片

不过,这种图片按钮,规整成圆形后,边界很粗糙,所以可以加边界遮罩,即除边界外全透明的同等图片来缓和处理。

上图所示,是加遮罩后的效果。


    

云信DUILIB 常用控件 小实例_第5张图片

3.3  小图标 配合按钮、EDIT等控件使用


       
        
            
            
            

4 Option选项卡与Tab 展示页  结合使用

云信DUILIB 常用控件 小实例_第6张图片

点击某一选项卡后,展示这一选项卡对应的页面,点击另一个选项卡后,则展示另一个选项卡对应的页面。由此构成了多页面展示效果。

实现逻辑如下:

逻辑如下:
            
                
                
                
            
                
                    
                    
                    
                    
                    
                    
                

实例1: 使用option控件

                
            
                    
                    
                       
              
 
 
        
            
                
            
                
            
                
        


实例2:使用OptionBox布局,这样功能更强大。

            
                
                    
                    
                    
 
                    
                        
                                 
                        
                        
                                        
                        
                    
                    
                
                    
                    
                    
                    
                        
                                 
                        
                        
                                        
                        
                    
                    
                
                    
                    
                    
                     
                        
                                 
                        
                        
                                        
                        
                    
                    
            
 
 
        
            
                
            
                
            
                
        
 


效果如下:

云信DUILIB 常用控件 小实例_第7张图片


4 最大化按钮

默认情况下,在界面上添加后,你会发现,虽然最大化了窗口,但是再次点击时并没有起作用,因为这需要自己添加代码,在响应单击事件时确定最大化,和从最大化返回。


实现由两种方式,第一种如下:

XML中语句

        
        
            
            

相应窗口的代码,比如CMyForm窗口

1)定义按钮

ui::Button		*btn_max_restore_;


2)响应OnClicked( ui::EventArgs* arg )消息

     如果最大化,点击的时候则返回原状态,如果是原状态,点击后则最大化。

	else if(name == L"btn_max_restore")
	{
		DWORD style = GetWindowLong(m_hWnd, GWL_STYLE);
		if (style & WS_MAXIMIZE)
			::ShowWindow(m_hWnd, SW_RESTORE);
		else
			::ShowWindow(m_hWnd, SW_MAXIMIZE);
	}

3)定义函数,用于设置此按钮的类别,比如设置为最大化类、设置为restore类,每种类云信duilib提供了对应的界面展现形式。

void OnWndSizeMax(bool max);
void OnWndSizeMax(bool max)
{
	if (btn_max_restore_)
		btn_max_restore_->SetClass(max ? L"btn_wnd_restore" : L"btn_wnd_max"); 
}
而什么时候改变状态呢,是在消息处理中,判断是否窗口改变大小消息
HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
{
	if (uMsg == WM_SIZE)
	{
		if (wParam == SIZE_RESTORED)
			OnWndSizeMax(false);
		else if (wParam == SIZE_MAXIMIZED)
			OnWndSizeMax(true);
	}
	return __super::HandleMessage(uMsg, wParam, lParam);
}





这样设置后,最大化及还原功能就正常了。


第二种如下:

                    
                        

窗口中新增一改变窗口大小时响应的函数

void OnWndSizeMax(bool max);
void CMyForm::OnWndSizeMax(bool max)
{
	if (!m_pRoot)
		return;

	FindControl(L"maxbtn")->SetVisible(!max);
	FindControl(L"restorebtn")->SetVisible(max);
}

窗口大小改变时,响应此函数 

LRESULT CMyForm::HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
{
	if (uMsg == WM_SIZE)
	{
		if (wParam == SIZE_RESTORED)
			OnWndSizeMax(false);
		else if (wParam == SIZE_MAXIMIZED)
			OnWndSizeMax(true);
	}

这个相对来说,简单些,设置的不多。


暂时,这些,未完待续。。。

有同样使用这个不开源的网易云信的,可以加Q群331506725

你可能感兴趣的:(网易云信开发)