如何优雅的写UI——（4）选项卡美化

现在做出来的选项卡实在太丑的，咱们怎么把他弄得好看一点呢

tabctrl是可以添加icon图标的，那派生与tabctrl的mfctabctrl肯定也能添加图标，他们两个添加图标的原理一样，但是还是有点不同

首先给项目添加三个图标

然后在成员变量中添加ImageList对象，必须要添加在成员变量中，否则加载不出来图片。

    CImageList m_imglist;

之后在初始化中创建CImageList，他的声明为

BOOL Create(int cx, int cy, UINT nFlags, int nInitial, int nGrow);

其中各项参数的含义为：

cx定义图像的宽度，单位为象素；

cy定义图象的高度，单位为象素；

nFlags确定建立图像列表的类型，

可以是以下值的组合：ILC_COLOR、ILC_COLOR4（图像为24色）、ILC_COLOR8（图像为28色）、ILC_COLOR16（图像为216色）、ILC_COLOR24、ILC_COLOR32、ILC_COLORDDB和ILC_MASK；

nInitial用来确定图像列表包含的图像数量；

nGrow用来确定图像列表可控制的图像数量。

图像控制的属性类包括返回m_hImageList.控制句柄GetSafeHandle、取得图像列表中的图像数量GetImageCount、设置图像列表的背景颜色SetBkColor、取得图像列表的背景颜色SetBkColor和取得图像的有关信息SetBkColor。

图像控制的操作方法包括将一个图像列表绑定到一个对象上Attach、将对象上的图像列表解除绑定并返回句柄Detach、删除一个图像列表DeleteImageList、将一个图像增加到图像列表中Add和将一个图像从图像列表中删除Remove等。

我们来添加三个图标

m_imglist.Create(32, 32, ILC_COLOR32 | ILC_MASK, 3, 1);
    m_imglist.Add(AfxGetApp()->LoadIcon(IDI_ICON1));
    m_imglist.Add(AfxGetApp()->LoadIcon(IDI_ICON2));
    m_imglist.Add(AfxGetApp()->LoadIcon(IDI_ICON3));
    m_tab.SetImageList(m_imglist);//将ImageList绑定到tab上

要注意的是SetImageList这个方法，根据MSDN上的描述，当你创建tabctrl为平面样式，例如 STYLE_FLAT 时，你的图标加载是失败的，平面样式不支持图标的绑定，这个一定要注意了。

例如这样

我们将图标写进了队列，也绑定上了选项卡，但是如何让页面知道我是用到了哪个图标呢，这得回到添加标签页的地方，我们来看AddTab的方法定义

virtual void AddTab(
   CWnd* pTabWnd,
   UINT uiResTabLabel,
   UINT uiImageId = (UINT)-1,
   BOOL bDetachable = TRUE
);

这里给出一个uiImageId 的参数，这个是图标的索引，你第几个页面要用到哪个图标，你就要填这个图标在CImageList 队列里的索引值。例如我第二个画面m_dlg2要用到第一个图标，第一个图标的索引值为0；就应该为

m_tab.AddTab(m_dlg2,L"还没想好些什么控件",0,FALSE);

做好的图标就是这个样子

CSDN上还有很多样式定义，但是也有很多不能用，我不知道为什么，下面来举几个例子

标签在顶部/底部

    m_tab.SetLocation (CMFCTabCtrl::LOCATION_BOTTOM);//Tab标签在底部
    m_tab.SetLocation (CMFCTabCtrl::LOCATION_TOP);//Tab标签在顶部

添加关闭页面按钮

m_tab.EnableActiveTabCloseButton();//是否添加关闭选项卡按钮

把某一页选项置顶

m_tab.SetActiveTab(1); //激活选项卡,以当前选项卡为第一页。

设置选项卡样式

    m_tab.ModifyTabStyle (style);//设置CMFCTabCtrl的样式

参数：STYLE_3D 三维样式。
STYLE_3D_ONENOTE Microsoft OneNote样式。
STYLE_3D_VS2005 Microsoft Visual Studio 2005样式。
STYLE_3D_SCROLLED 三维与矩形选项卡标签的样式。
STYLE_FLAT_SHARED_HORZ_SCROLL 有共享水平滚动条的平面样式。
STYLE_3D_ROUNDED_SCROLL 三维与设置选项卡标签的样式。
 

标签拖拽

m_tab.EnableTabSwap (TRUE);//可以拖拽
m_tab.EnableTabSwap (FALSE);//不可拖拽

选项卡标签和边框颜色

    CArray<COLORREF, COLORREF> arColors;
    arColors.Add (RGB (121, 210, 231));
    arColors.Add (RGB (190, 218, 153));
    arColors.Add (RGB (255, 170, 100));

    m_tab.EnableAutoColor (TRUE);
    m_tab.SetAutoColors (arColors);

整个选项卡初始化代码

void CtabView::OnInitialUpdate()
{
    CFormView::OnInitialUpdate();
    GetParentFrame()->RecalcLayout();
    ResizeParentToFit();

    CRect rc;
    GetClientRect(rc);

    if (!m_tab.Create(CMFCTabCtrl::STYLE_3D_ONENOTE, rc, this, 3000, CMFCTabCtrl::LOCATION_TOP,0))
    {
        return ;
    }

    m_dlg1=new CDialog1;
    m_dlg2=new CDialog2;
    m_dlg3=new CDialog3;

    m_dlg1->Create(IDD_DIALOG1,&m_tab);
    m_dlg1->SetFont(&afxGlobalData.fontRegular);
    m_dlg1->SetWindowTextW(L"Listctrl控件");

    m_dlg2->Create(IDD_DIALOG2,&m_tab);
    m_dlg2->SetFont(&afxGlobalData.fontBold);
    m_dlg2->SetWindowTextW(L"还没想好些什么控件");

    m_dlg3->Create(IDD_DIALOG3,&m_tab);
    m_dlg3->SetFont(&afxGlobalData.fontDefaultGUIBold);
    m_dlg3->SetWindowTextW(L"还有什么控件比较难写吗");

    m_imglist.Create(32, 32, ILC_COLOR32 | ILC_MASK, 3, 1);
    m_imglist.Add(AfxGetApp()->LoadIcon(IDI_ICON1));
    m_imglist.Add(AfxGetApp()->LoadIcon(IDI_ICON2));
    m_imglist.Add(AfxGetApp()->LoadIcon(IDI_ICON4));
    m_tab.SetImageList(m_imglist);

    m_tab.AddTab(m_dlg1,L"Listctrl控件",0,TRUE);
    m_tab.AddTab(m_dlg2,L"还没想好些什么控件",1,FALSE);
    m_tab.AddTab(m_dlg3,L"还有什么控件比较难写吗",2,FALSE);

    //m_tab.SetLocation (CMFCTabCtrl::LOCATION_BOTTOM);//Tab标签在底部
    m_tab.SetLocation (CMFCTabCtrl::LOCATION_TOP);//Tab标签在顶部

    m_tab.EnableActiveTabCloseButton();//是否添加关闭选项卡按钮

    m_tab.SetActiveTab(1); //激活选项卡,以当前选项卡为第一页。

    //m_tab.ModifyTabStyle (style);//设置CMFCTabCtrl的样式

    CArray<COLORREF, COLORREF> arColors;
    arColors.Add (RGB (121, 210, 231));
    arColors.Add (RGB (190, 218, 153));
    arColors.Add (RGB (255, 170, 100));

    m_tab.EnableAutoColor (TRUE);
    m_tab.SetAutoColors (arColors);

    m_tab.EnableTabSwap (TRUE);//可以拖拽
    //m_tab.EnableTabSwap (FALSE);//不可拖拽
}

阶段效果

到现在还是觉得这个选项卡难看，咱们继续美化

首先每个窗口背景色太难看了，我们来把背景色换成白的

改变背景色有很多种方法，有OnCtlColor、OnPaint、 OnEraseBkgnd都可以改变背景色，这个现在不用太纠结选哪种，随便用一个就行，但是他们的添加方法都相同。

在每一个子窗口中添加消息函数WM_CTLCOLOR。实现方法返回一个系统自定义的白色画刷WHITE_BRUSH。

HBRUSH CDialog1::OnCtlColor(CDC* pDC, CWnd* pWnd, UINT nCtlColor)
{
    HBRUSH hbr = CDialogEx::OnCtlColor(pDC, pWnd, nCtlColor);

    // TODO:  在此更改 DC 的任何特性

    // TODO:  如果默认的不是所需画笔，则返回另一个画笔
     return (HBRUSH)::GetStockObject(WHITE_BRUSH);
}

那么美化暂时先到这，要想画出更好看的选项卡，就需要涉及到控件重绘了，也就是自定义控件，这篇帖子我会持续更新的。马上我就要开下一篇功能实现的帖子。

代码：选项卡美化.zip

原文地址：https://www.cnblogs.com/ye-ming/p/9276997.html

时间： 2024-10-09 06:21:39

如何优雅的写UI——（4）选项卡美化的相关文章

如何优雅的写UI——（3）添加MFC选项卡

窗体创建完成,接下来我们讲讲控件的使用 首先在CFormView窗体下选项卡的成员变量,这里我选择MFC下的选项卡类库:CMFCTabCtrl class CtabView : public CFormView { ...... ...... public: CMFCTabCtrl m_tab; } 在初始化中动态创建选项卡并设置选项卡的样式,这里我们使用了Creat函数,他的原型是 BOOL Create(Style style, const RECT& rect, CWnd* pParent

如何优雅的写UI——（5）选项卡功能实现

先在我们的选项卡可以说能用了,每个标签页都能点进去,但是这还远远没到能用的地步,比如说你把窗口最大化后. 立马就露出马脚了,所以这篇我们要先讲讲tabctrl的最基本的功能实现 改变选项卡大小 上图的原因就是主窗口在改变的大小的时候没有通知选项卡让他跟着主窗口一起变,所以我们现在通知选项卡一下 添加ON_WM_SIZE消息,实现函数 void CtabView::OnSize(UINT nType, int cx, int cy) { //CFormView::OnSize(nType, cx,

基于jQuery UI的tabs选项卡美化

很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习来解决此问题,但对于后台程序员或者只是简单使用的人员来说,这个就会很影响开发效率了! 其实jQuery团队已经为大家解决了这个问题,只是很多同学没发布而已,jQuery团队基于jQuery打造了一套功能强大的UI框架--jQuery UI.经过长期的改进完善,jQuery UI已经拥有了很多常用和实

关于代码手写UI，xib和StoryBoard

代码手写UI 这种方法经常被学院派的极客或者依赖多人合作的大型项目大规模使用.Geek们喜欢用代码构建UI,是因为代码是键盘敲出来的,这样可以做到不开IB,手不离开键盘就完成工作,可以专注于编码环境,看起来很cool很高效,而且不到运行时大家都不知道会是什么样子,也显出了程序员这一职业的高大上及神秘气息(这个真的不是在黑..想想大家一起在设计师背后指点江山的场景吧).大型多人合作项目使用代码构建UI,主要是看中纯代码在版本管理时的优势,检查追踪改动以及进行代码合并相对容易一些. 另外,代码UI可

IOS基础UI之(三)手写UI和storyboard方式实现图片移动和缩放

手写UI是最早进行UI界面布局的方法,优点是灵活自由,缺点是使代码看起来比较长.平时学习的时候可以多尝试手写ui,这样会更深入熟悉控件.storyboard开发效率相对比较高.实际开发中看情况而定!! 下面用这两种方式分别实现图片移动和缩放. 功能描述: 1. 界面布局 2.点击相应的按钮,对显示的图片移动.缩放. 效果如下:    掌握点: 一:熟悉代码的描述UIButton属性 1.UIButton状态 UIControlStateNormal          // 正常状态 UICont

代码手写UI，xib和StoryBoard间的博弈，以及Interface Builder的一些小技巧

代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧 最近接触了几个刚入门的iOS学习者,他们之中存在一个普遍和困惑和疑问,就是应该如何制作UI界面.iOS应用是非常重视用户体验的,可以说绝大多数的应用成功与否与交互设计以及UI是否漂亮易用有着非常大的关系.而随着iOS开发发展至今,可以说在UI制作上大家逐渐分化为了三种主要流派:使用代码手写UI及布局:使用单个xib文件组织viewController或者view:使用StoryBoard来通过

停止使用循环 教你用underscore优雅的写代码

你一天(一周)内写了多少个循环了? var i; for(i = 0; i < someArray.length; i++) {   var someThing = someArray[i];   doSomeWorkOn(someThing); } 这当然无害,但这种写法非常丑而且奇怪,这也不是真正需要抱怨的.但这种写法太平庸了. var i,   j; for(i = 0; i < someArray.length; i++) {   var someThing = someArray[i

如何优雅的写一篇安利文-以Sugar ORM为例

前言 我最近喜欢把写的十分优美的技术文章叫做安利文.首先,文章必须是原创而非软广:其次,阅读之后不仅能快速吸纳技术要点并入门开发,还能感同身受的体会作者热情洋溢的赞美和急于分享心得体验的心情,让人感觉相见恨晚,醍醐灌顶. 安利文基于技术文章但又高于技术文章,同是经验总结,但却因为作者认真的揣摩每一个标点.断句而变得优雅.一篇满是主观感受的文章却不嚼之乏味,作者用心的指出每一个需要注意的技术亮点在文字中如蛟龙戏水,让阅读者大呼过瘾.因此,我觉得能原创分享一篇技术文章精神已经难能可贵,但若能锦上添花

用C++写UI库最本质的思想就是不用C++写UI（如何用 C++ 从零编写 GUI？内含多个开源UI作者的回复，非常精彩）

作者:Bingo链接:https://www.zhihu.com/question/24462113/answer/83371803来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 用C++写UI库最本质的思想就是不用C++「写」UI. 不管是开放C++底层库到XML+Json+Lua的实现,或是单一使用XML完成布局管理,或是现前流行的使用Electron(http://electron.atom.io/)也就是HTML+CSS+JS完成UI实现的,本质上都不希望