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

猫猫1

　　前几天开始写仿Win8 Metro界面文章，部分网友觉得不错，感谢各位的意见。本来今天一直在折腾Android VLC播放器，没时间写。不过明天休息，所以今天就抽时间先写一下。
　　言归正传，我们都知道Win8的Metro界面只要手指一划，页面就跟着滑动（准确来说是按钮跟着滑动，背景其实没动），这个操作目前的Android和iPhone都是这种操作，个人感觉都是从iPhone借鉴来，滑动切换很早就有，不过按钮和壁纸分开滑动，这个还是iPhone时代开始。
　　
　　（这效果图是截了几张图弄的，所以看上去不流畅）
　　类逻辑关系图
　　
　　1、界面逻辑层次
　　开始说滑动前，先要解析一下屏幕显示的原理。我们都知道屏幕最后呈现出来的画面，其实都是显存的数据，这个只有一份。也就是说最后用户看到的都是只有一张画面。如果你只是单纯按钮滑动，而背景不滑动，给人感觉是一个二维动画。
　　没错，逻辑上的确是二维的，我们在显示逻辑上可以划分多个逻辑层，最后组合成一个显示画面。
　　例如下面的结构体：
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　我这里区分了三个逻辑层
　　1、背景层
　　2、按钮层
　　3、时间控件层
　　这三个层次在逻辑上是分开的，最后需要显示的时候，才需要把他们组合起来，把画面绘画到兼容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 m_pVUICtrlContent;
//保存界面按钮位置二维容器
vector 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，没看过源码，不敢确定。不敢按照它界面排布，多半也是类似的思想。
2、按钮绘画
按钮绘画的时候，是调用的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