VC/Wince 实现仿Win8 Metro风格界面2——页面滑动切换（附效果图）

前几天开始写仿Win8 Metro界面文章，部分网友以为不错，感谢各位的意见。原本今天一直在折腾Android VLC播放器，没时间写。不过明天休息，因此今天就抽时间先写一下。

言归正传，咱们都知道Win8的Metro界面只要手指一划，页面就跟着滑动（准确来讲是按钮跟着滑动，背景其实没动），这个操做目前的Android和iPhone都是这种操做，我的感受都是从iPhone借鉴来，滑动切换很早就有，不过按钮和壁纸分开滑动，这个仍是iPhone时代开始。

（这效果图是截了几张图弄的，因此看上去不流畅）

类逻辑关系图

一、界面逻辑层次

开始说滑动前，先要解析一下屏幕显示的原理。咱们都知道屏幕最后呈现出来的画面，其实都是显存的数据，这个只有一份。也就是说最后用户看到的都是只有一张画面。若是你只是单纯按钮滑动，而背景不滑动，给人感受是一个二维动画。

没错，逻辑上的确是二维的，咱们在显示逻辑上能够划分多个逻辑层，最后组合成一个显示画面。

例以下面的结构体：

 

 

 

 

 

 

 

 

 

 

 

 

 

我这里区分了三个逻辑层

一、背景层

二、按钮层

三、时间控件层

这三个层次在逻辑上是分开的，最后须要显示的时候，才须要把他们组合起来，把画面绘画到兼容DC上，兼容DC再拷贝到屏幕DC上。这样才完成一次画面输出。这个有点想PhotoShop的图层，一张图片，由多个图层叠加完成。用过PS的人，应该很容易理解。

为了实现两个页面滑动切换，我增长了一个Page类，（界面类之间关系，能够查看上一篇文章）用来管理每一个页面的按钮，下面列出Page类的类声明。

//只支持2行
#define ROW_NUM 2

//识别操做
#define DEL_BTN 0x10
#define ADD_BTN 0x11
#define SWITCH_BTN 0x12

class CDUIPage:public CDUIBase { public: CDUIPage(void); ~CDUIPage(void); public: //保存界面按钮的二维容器
    vector<vector<CDUIButton *> > m_pVUICtrlContent; //保存界面按钮位置二维容器
    vector<vector<CPoint> > m_pVUICtrlPos; //标记是否按钮滑动 //BOOL m_slideBtn; //标记是否滑动页面 //BOOL m_enterMouseMove; //点击了按钮
 BOOL m_ClickBtn; //按下点击点
 CPoint m_ClickDownPoint; //内存DC，保存滑动时候背景
 CDC m_BackDC;//记录有多少方块（目前只支持两行）
    int m_BlockNum[2]; //点击的是大按钮仍是小按钮,大按钮为True
 BOOL m_BigBlock; //点击第几行按钮
    int m_BlockLine; //点击第几个按钮
    int m_BlockClickNum; //删除区域
 CRect m_rcMainInterfaceDel;

　　　//...............

public:
//初始化一个页面
    void InitPage(CDC * pDC, HWND MainWnd); //画图
    void Draw(CDC * pDC); //响应窗口OnLButtonDown
 BOOL OnLButtonDown(POINT point); //响应窗口OnLButtonUp
    void OnLButtonUp(POINT point); //响应窗口OnMouseMove
    int OnMouseMove(POINT point, CDC * pDC, CDC * pBackDC); //处理按钮移动交换
    int OnLButtonUpDeal(int Page, POINT point); //添加新的按钮
    void AddItem(CDUIButton * btn, int lineNum); //从新计算按钮位置
    void ReloadBtnPos(); //设置偏移量
    void SetOffsetPoint(int point);//插入项
    void InsertItem(CDUIButton * btn, int lineNum, int Pos);//按钮排序//删除释放空按钮
    void ReleaseBtn(int Line, int index);  　　 //............... };

 从上面定义能够看出，这个Page类，其实主要做用就是管理Button类的，定义了一个二维向量容易，对应界面的二维布局，由于我那里界面屏幕分辨率相对比较固定。因此最多只能放两排按钮，因此最上面我定义了多少行如今。不过二维向量理论上没有限制多少行多少列。也就是说建立的全部CDUIButton对象都会被添加到二维向量里面，下面是添加的操做：

void CDUIPage::AddItem(CDUIButton * btn, int lineNum) { ASSERT(btn != NULL); m_pVUICtrlContent.at(lineNum).push_back(btn); //从新计算按钮位置
 ReloadBtnPos(); }

lineNum表示是第几行的按钮，添加傲二维向量容器后，会根据按钮大小，计算出这个按钮的位置。按钮的位置都是动态排布的，因此没有按钮滑动的时候显示区域是动态变化的。其实这个就是把屏幕划分为一个二维格子，有点像棋盘，每一个按钮就是一个棋子，放到对应的格子上面。只是Metro界面棋子大小不同，须要作些特殊处理，其中一种棋子占用了两个格子。其实这种设计思惟在如今的Android界面上也一样如此，Android的Launcher就是按照一个个格子来放按钮和widget。至于iPhone，没看过源码，不敢肯定。不敢按照它界面排布，多半也是相似的思想。

二、按钮绘画
按钮绘画的时候，是调用的Page的Draw函数，来绘画。咱们看看Draw函数内容：

void CDUIPage::Draw(CDC * pDC) { //把原来的背景DC拷贝到控件内部DC
    m_BackDC.BitBlt(0,0,ScreenWidth,ScreenHeight, pDC, 0, 0, SRCCOPY); for (int outer=0; outer<ROW_NUM; outer++) { int vectorNum = m_pVUICtrlContent.at(outer).size(); for (int k=0; k<vectorNum; k++) { m_pVUICtrlContent.at(outer).at(k)->Draw(pDC); } } }

Draw的代码其实很简单，就是调用了Page里面每一个DUIButton的Draw函数，也就是说Page自己并无提供绘画的功能，真正绘画显示按钮，是DUIButton类的功能。

DUIButton类绘画的功能也很简单，就是显示一张按钮的PNG图片。Draw(CDC * pDC)里面的DC指针其实就是指向内存兼容DC的指针。。目前能够理解为把全部按钮绘画到内存兼容DC上，而这个内容兼容DC其实已经绘画好了背景（这是我在上一层Container实现的内，这个后面会讲）。

 

三、界面滑动实现

 界面滑动，就是两个Page对象之间的切换。下面是onMouseMove的执行代码：

int CDUIPage::OnMouseMove(POINT point, CDC * pDC, CDC * pBackDC) { for (int outer=0; outer<ROW_NUM; outer++) { int vectorNum = m_pVUICtrlContent.at(outer).size(); for (int k=0; k<vectorNum; k++) { m_pVUICtrlContent.at(outer).at(k)->OnMouseMove(point, pDC, pBackDC); } } return TRUE; }

同上面onDraw函数同样，MouseMove也是调用了DUIButton自身的MouseMove函数。具体代码能够查看上一篇文章。

所以Page类的做用只是用来管理Button，统一全部界面的操做。为上层提供统一的处理接口。对于最上层的Dialog来讲，

是不须要知道下面的按钮是如何工做的。

今天就讲到这里，下一次会把Container和上层对接说明。有问题的朋友能够留意！

 

新建的讨论群，有兴趣能够加入

VC/Wince群：87053214 

 

Edited by mythou

原创博文，转载请标明出处：http://www.cnblogs.com/mythou/p/3161754.html

 

系列文章连接：

VC/Wince 实现仿Win8 Metro风格界面1——设计概述和自绘Button(附效果图)