实现类似Excel和Visual C 里文件夹式样的标签控制（一）

一起学习

实现类似Excel和Visual C 里文件夹式样的标签控制（一）
——实现基本功能

编译/NorthTibet

下载本文例子源代码


众所周知，Excel中一个工作簿可以有多个工作表单（worksheet），每个表单可以通过左下角的标签控制灵活切换（如图一），Visual C 也有类似的控制，如在Output窗口中设置有：Build，Debug，Find in Files和Results等标签控制（如图二）。


图一Excel中的标签控制



图二 Visual C 中的标签控制

我们将这种界面称为文件夹式样的标签控制，以下简称标签控制，而将MFC中的Tab Control称为标签控件。那么标签控制是如何实现的呢？MFC中有没有现成的控件可以利用？

论坛中有很多人提出过这个问题。看了本文以后，我想这个问题应该有一个圆满的答案。MFC固然给编程带来了极大的方便，但是它并不能代替程序员的编程，MFC只是提供了一个编程框架，应用的实质性代码还是必须由程序员自己来写。同时，MFC的问题也是显而易见的，那就是其GUI素材太丰富，以至于程序员们过分依赖MFC，当想要实现MFC中没有的GUI特性时便不知所措。
下面我们就来看看如何实现图一和图二所示的文件夹式样的标签控制界面。有人可能想到了从现成的标签控件（Tab Control）入手。但是经验证明：为了使用的方便性和更好的可重用性起见，还是不要采取这种方法。我是一个热衷于可重用性的家伙，但是这方面我们在自己的代码中做得还很不够。所以我宁愿自己创建一个窗口类，这样做还有一个好处是你能完全控制代码的修改，不必顾及因现有控件版本的变化而对自己的代码造成的巨大影响和麻烦。我想微软的家伙肯定也希望你这么做。如果你用Spy 查看一下Excel和Visual C 的界面就会发现其文件夹式样的标签控制并不是SysTabControl32s，而是另外创建的窗口类。为什么我们不也来创建一个呢？
请看图三所示的画面，这就是我编写的一个程序FldrTab，它实现了我们所要的界面功能。实现这个UI的C 类是我自己创建的，它叫CFolderTabCtrl。


图三 FldrTab 程序运行画面

有关CFolderTabCtrl的实现细节请参考源代码。其头文件为Ftab.h，实现文件为Ftab.cpp。在分析CFolderTabCtrl的实现原理之前，让我先来说明一下这个类的使用方法。当FldrTab程序的InitInstance函数获得控制权时，它创建一个主对话框的实例，并运行这个对话框：

BOOL CApp::InitInstance()

{

     CMyDialog dlg;

     m_pMainWnd = &dlg;

     dlg.DoModal();

     return FALSE;

}         

CMyDialog有两个控制：一个是m_wndStaticInfo，另一个是m_wndFolderTab。顾名思义，第一个控制为一个静态文本窗口，它显示选中的标签，第二个是标签控制本身，即CFolderTabCtrl实例。通过调用SubclassDlgItem，CMyDialog::OnInitDialog以常规方式子类化静态文本，遗憾的是它不能子类化标签控制，因为对话框中并没有实际的标签控制窗口。此外也没有办法借助COM技术将此标签控制实现为一个带运行时接口的定制控件。我的办法是在对话框想要放置标签控制的地方创建一个静态文本控件。如图五所示：


图五 用静态文本控件定位标签控制

在OnDialogInit中通过调用一个特殊的函数，在运行时将静态文本替换成标签控制。

 m_wndFolderTab.CreateFromStatic(IDC_FOLDERTAB, this);      

CFolderTabCtrl::CreateFromStatic 在静态文本控件的位置上创建一个标签控制，然后删除静态文本控件。这是我创建特殊对话框控制常用的绝招，我认为这个诀窍是超一流的。在调用Create之前，CreateFromStatic调用CFolderTab::GetDesiredHeight来获得控制的高度，而忽略静态文本控件的高度。在非对话框应用中不能调用CreateFromStatic；而是要直接调用CFolderTab::Create。创建了标签控制后，接下来你必须设置标签名字。这里是在CMyDialog中调用现成的Load函数。

 m_wndFolderTab.Load(IDR_FOLDERTABS);      

IDR_FOLDERTABS是串资源的ID，它是一个包含新行指示符（“\n”）分割的标签名（“在线杂志第一期\n在线杂志第二期\n……”），一旦创建了控制并调用Load，那么你的标签控制就完全happy了。它看起来就象图三所示的那样。
当然，这时它还不能做任何事情，你还必须处理它们的通知消息。当用户按下一个标签时，CFolderTab便用特殊代码FTN_TABCHANGED向对话框发送一个WM_NOTIFY消息。然后对话框处理这条消息，也就是在上面的静态文本控件中显示一条信息。

void CMyDialog::OnChangedTab(NMFOLDERTAB* nmtab,LRESULT* pRes)

{

   CString s;

   s.Format(_T("选中 %d: %s"),nmtab->iItem,nmtab->pItem->GetText());

   m_wndStaticInfo.SetWindowText(s);    

}      

NMFOLDERTAB 结构在FTab.h. 文件中定义。

struct NMFOLDERTAB : public NMHDR {

    int iItem;               // 项目索引

    const CFolderTab* pItem; // 标签

};      

这个结构除了NMHDR所包含的成员之外，还有项目索引和指向当前标签CFolderTab的指针，它与CFolderTabCtrl有所不同，从CFolderTab中你可以得到标签的文本。以上就是CFolderTabCtrl的使用方法。
下面我们就来揭示这个C 类的实现原理。前面已经对CreateFromStatic进行了描述，那么CFolderTabCtrl::Load是个什么样的函数呢，这个函数的功能是加载一个串标签名，这个串是用新行指示符（“\n”）分割的字符串，吸取其中的子串，并调用CFolderTabCtrl::AddItem将它添加到每一个标签上。

int CFolderTabCtrl::AddItem(LPCTSTR lpszText)

{

    m_lsTabs.AddTail(new CFolderTab(lpszText));

    return m_lsTabs.GetCount() - 1;

}      

就这么简单，创建一个新的CFolderTab对象并将它添加到一个列表中。与AddItem相对的是RemoveItem函数，它们的实现都在Ftab.cpp文件中，这两个函数分别负责动态添加和删除标签页，而不是存取资源串。然后是GetItem和GetItemCount函数，一看它们的名字你就应该明白它们的作用，前者用来获取CFolderTab标签的索引号（从0开始），后者则返回m_lsTabs.GetCount，即总共有多少标签。此外，你一定想需要有个函数来获取和设置标签文本，没问题，每一个CFolderTab对象都有一个m_sText成员变量来存储标签名，存取方法是GetText和SetText，我想你闭着眼睛都能写出这些代码！
接下来要做的事情很重要，首先是绘制标签。CFolderTabCtrl::OnPaint在循环中遍历所有标签，对每一个标签调用CFolderTab::Draw来进行绘制处理。这里有两个技巧：一个是必须在最后绘制当前选中的标签（m_iCurItem），以便它看起来重叠在最上面。另一个是要绘制其它标签，必须让其它标签知道自己的位置——也就是定义标签的梯形坐标。这是此标签控制的重点所在。下面就来看看实际代码是怎么做的。
CFolderTabCtrl有一个RecomputeLayout函数，它计算所有标签的位置。只要你改变控制的版面，则必须调用它，如添加或删除某个标签以及修改某个标签的名字（它会影响标签大小）。RecomputeLayout的关键代码如下：

int x = 0;

for (int i=0; iComputeRgn(dc, x) - CXOFFSET;

}      

RecomputeLayout为每一个标签调用CFolderTab的成员函数ComputeRgn。ComputeRgn计算出标签的梯形大小并返回算出的宽度，RecomputeLayout将它与当前x轴坐标相加，然后作为下一个标签的起始x轴坐标进行参数传递，最后减去形状修饰因子CXOFFSET，使得它们看起来有重叠的效果。之所以这么做是因为给定的标签只能决定其大小，不能决定其绝对位置，它需要更多的x轴信息。 一旦ComputeRgn有了x轴坐标，它就可以计算出一个足够大的梯形来容纳标签文本，注意要加一些边空，使文本的显示不会产生混乱。用DT_CALCRECT 调用CDC::DrawText计算文本所占的矩形，然后用结果计算梯形的大小。私有函数GetTrapezoid计算与文本矩形相配的梯形。用象素进行计算确实是一件麻烦和头疼的事情，我不想让你为此也痛苦一番。当CFolderTab::ComputeRgn计算出梯形的坐标，它调用CRgn::CreatePolygonRgn函数强行创建一个多边形区域。

int CFolderTab::ComputeRgn(CDC& dc, int x)

{

     CRect& rc = m_rect;

     dc.DrawText(m_sText, &rc, DT_CALCRECT);

     // tweak rc to add margins

     ……

     CPoint pts[4];

     GetTrapezoid(rc, pts);

     m_rgn.CreatePolygonRgn(pts, 4, WINDING); 

     return rc.Width(); 

}    

当标签的区域确定后，绘制这些标签的工作使你又陷入另一个艰难的象素处理环境。CFolderTab::Draw对选中标签（选中和未选中状态）要显示的颜色和字体进行处理。因为标签将梯形数据存储在CRgn中，因此只要调用CDC::FillRgn即可绘制标签。然后用MoveTos 和LineTos以适当的颜色绘制线条。最后调用DrawText绘制文本。


图六选中/未选中的标签状态

图六是程序运行时标签选中和未选中的状态示意图。注意线条有的是黑色，有的是灰色以便呈现3D效果（这不是我的设计，而是从Excel借用的）。选中标签为白色（COLOR_WINDOW）并且顶边没有黑色边线。这样做便于与上面的视窗融于一体。为了简单起见，例子程序没有创建这样的视窗，但是在实际应用中，一般都会象Excel和Visual Studio那样有一个甚至多个视窗与每个选中的标签对应，这在后续文章中会慢慢扩充。本文例子程序里选中标签的另外一个特点是使用了小字体，这是从Visual Studio借鉴过来。说到字体，到底应该使用哪一种呢？这里CFolderTabCtrl默认为Arial，你完全可以改用其它的字体，为此CFolderTabCtrl类中提供了一个改变字体的成员函数CFolderTabCtrl::SetFonts。以上讨论的都是标签的绘制问题， 下面来看看事件及行为。有关标签区域计算的重点和难点问题都已经解决，剩下的问题就简单多了。通过解决这些问题，我总结出一条经验，希望与大家分享：无论你是做控制设计还是系统设计，开始都要问一问自己，“我需要什么样的数据结构才能使问题更容易处理？”然后确定如何创建这些数据结构。通常应该只在一个地方进行难点和重点处理，其它的问题便会容易得多，至少你应该这样努力。 当CFolderTabCtrl获悉OnLButtonDown事件，它调用函数HitTest找出鼠标位于哪一个标签上。HitTest在每一个CFolderTab对象上循环，调用CFolderTab的同名函数CFolderTab::HitTest，这个函数再用已经计算好的的梯形坐标调用CRgn::PtInRegion。CRgn必须在这里做好自己的工作。如果HitTest有返回TRUE，则CFolderTabCtrl::HitTest返回标签的索引，此时OnLButtonDown调用的另一个函数是CFolderTabCtrl::SelectItem，以此选中标签。SelectItem没有什么玄机，它将新的值赋给m_iCurItem并使的值失效，选中新标签后重画。完成SelectItem的调用后，OnLButtonDown创建一个NMFOLDERTAB结构并将信息填写到结构，然后向父窗口发送WM_NOTIF消息。对话框和主应用就是这样把握着所发生的一切。
OK，大功告成，例子程序虽然粗糙，但所要的功能基本都实现了。有许多实用的特性我作了保留，例如，用键盘切换标签（这一点可以在主应用中以加速键的方式实现），以及标签的禁用——即防止用选中某个标签。如果你的程序需要这些特性，那就尽一切办法实现它们吧！重要的是实现你需要的功能，而不要画蛇添足。下一部分的内容我们将尝试把CFolderTabCtrl集成到一个实际的MFC程序当中，使得我们的CFolderTabCtrl不再只是一个纯粹的例子。（待续） 下载本文示例代码


实现类似Excel和Visual C 里文件夹式样的标签控制（一）实现类似Excel和Visual C 里文件夹式样的标签控制（一）实现类似Excel和Visual C 里文件夹式样的标签控制（一）实现类似Excel和Visual C 里文件夹式样的标签控制（一）实现类似Excel和Visual C 里文件夹式样的标签控制（一）实现类似Excel和Visual C 里文件夹式样的标签控制（一）实现类似Excel和Visual C 里文件夹式样的标签控制（一）实现类似Excel和Visual C 里文件夹式样的标签控制（一）实现类似Excel和Visual C 里文件夹式样的标签控制（一）实现类似Excel和Visual C 里文件夹式样的标签控制（一）实现类似Excel和Visual C 里文件夹式样的标签控制（一）实现类似Excel和Visual C 里文件夹式样的标签控制（一）