EVC WINCE5.0仿Iphone滑动界面（参考+原创）

WINCE5.0仿Iphone滑动界面，用EVC编译器编写，具体设计过程如下：

一、实现一个简单的功能：

1.添加绘图函数

检查一下EVC IDE有没有OnPaint这个函数，如果没有这个函数，添加OnPaint方法如下：

打开ClassWizard对话框，在类中添加消息WM_PAINT的消息响应函数OnPaint().

  

                                                             图1.1 添加OnPaint前

                                                           图1.2添加OnPaint后

添加成功后，会自动生成如下代码：

void CIphoneDlg::OnPaint() 

{

CPaintDC dc(this); // device context for painting

// TODO: Add your message handler code here

// Do not call CDialog::OnPaint() for painting messages

}

参考资料：http://hi.baidu.com/126_/blog/item/be06808fd4d550edf11f3639.html

2.实现绘图功能

在OnPaint函数中添加如下代码：

HDC hdc = ::GetDC(m_hWnd);  

HDC hdcMem = CreateCompatibleDC(hdc);  

HBITMAP hBitmap = CreateCompatibleBitmap(hdc, 640, 240);    /*两张320x240的bmp图片*/

 HBITMAP hOldMemBmp = (HBITMAP)SelectObject(hdcMem, hBitmap);  

HDC hdcBmp = CreateCompatibleDC(hdc);  

HANDLE hBmpDis = LoadImage(AfxGetInstanceHandle(), MAKEINTRESOURCE(IDB_BITMAP1),IMAGE_BITMAP,0,0,0);  

HBITMAP hOldBmp = (HBITMAP)SelectObject(hdcBmp,hBmpDis);  

BitBlt(hdcMem,0,0,320,240,hdcBmp,0,0,SRCCOPY);  

hBmpDis = LoadImage(AfxGetInstanceHandle(), MAKEINTRESOURCE(IDB_BITMAP2),IMAGE_BITMAP,0,0,0);  

SelectObject(hdcBmp,hBmpDis);  

BitBlt(hdcMem,320,0,640,240,hdcBmp,0,0,SRCCOPY);

其中IDB_BITMAP1和IDB_BITMAP1是我在的图对应的ID ，由我刚刚加入的位图资源 ，具体如何把图片加入位图资源，这里不具体介绍，方法网上找。我用的图片都是320x240的图片。

其中，BitBlt函数很重要，可以参考：http://baike.baidu.com/view/1080366.htm   进行理解。

以上代码是参考网上资料，代码原理很简单，可以很容易理解。

3.实现图片滑动模拟功能

// 缓慢的左出右入  

     DWORD dwPos;  

    for( dwPos = 0; dwPos <= 320; )     

    {     

        //将缓存HDC绘制到源HDC中，以实现平滑滚动的效果    

        BitBlt(hdc, 0, 0, 320, 240, hdcMem, dwPos, 0, SRCCOPY);     

        dwPos = dwPos + 1;  

    } 

以上简单的代码实现一个简单的模拟效果：两站图片缓慢的左出右入。

自此，你对如何模拟IPHONE切换界面已经有了初步的了解，接下就是具体设计了。

以上内容部分参考以下网站：

http://blog.csdn.net/joyzml/article/details/5736229

http://blog.csdn.net/joyzml/article/details/5738789

二、具体设计

1.重新编写OnPaint代码：

在OnPaint函数中，修改代码如下：

hdc = ::GetDC(m_hWnd);  

     hdcMem = CreateCompatibleDC(hdc);  

HBITMAP hBitmap = CreateCompatibleBitmap(hdc, 640, 240);  

    HBITMAP hOldMemBmp = (HBITMAP)SelectObject(hdcMem, hBitmap);  

   hdcBmp = CreateCompatibleDC(hdc);  

HANDLE hBmpDis = LoadImage(AfxGetInstanceHandle(), MAKEINTRESOURCE(IDB_BITMAP1),IMAGE_BITMAP,0,0,0);  

HBITMAP hOldBmp = (HBITMAP)SelectObject(hdcBmp,hBmpDis);  

BitBlt(hdcMem,0,0,320,240,hdcBmp,0,0,SRCCOPY);  

hBmpDis = LoadImage(AfxGetInstanceHandle(), MAKEINTRESOURCE(IDB_BITMAP2),IMAGE_BITMAP,0,0,0);  

SelectObject(hdcBmp,hBmpDis);  

BitBlt(hdcMem,320,0,640,240,hdcBmp,0,0,SRCCOPY);

BitBlt(hdc, 0, 0, 320, 240, hdcMem,0 , 0, SRCCOPY);  

以上代码和第一步骤的代码区别在于：

（1）将以下变量修改为全局变量：HDC hdcMem;

HDC hdcBmp;

HDC hdc ;

方便下面鼠标事件调用。

（2）添加代码 BitBlt(hdc, 0, 0, 320, 240, hdcMem,0 , 0, SRCCOPY);  实现显示背景图片的功能。

2.添加鼠标事件：

打开ClassWizard对话框，在类中添加消息WM_LBUTTONUP和WM_LBUTTONDOWN的消息响应函数

void OnLButtonDown(UINT nFlags, CPoint point) ().和void OnLButtonUp(UINT nFlags, CPoint point) 。

                                                             图2.1 添加鼠标事件

3.编写鼠标事件代码

void CIphoneDlg::OnLButtonDown(UINT nFlags, CPoint point) 

{

// TODO: Add your message handler code here and/or call default

first_x = point.x;

CDialog::OnLButtonDown(nFlags, point);

}

 

void CIphoneDlg::OnLButtonUp(UINT nFlags, CPoint point) 

{

// TODO: Add your message handler code here and/or call default

int dwPos;

move_x = point.x;

if(move_x > first_x){

    //快速的右出左入  

for( dwPos = 320; dwPos >= 0; ) {     

    //将缓存HDC绘制到源HDC中，以实现平滑滚动的效果    

      BitBlt(hdc, 0, 0, 320, 240, hdcMem, dwPos, 0, SRCCOPY);     

     dwPos = dwPos - 1;   

}  

}

else if (move_x < first_x){

for( dwPos = 0; dwPos <= 320; )     

    {     

        //将缓存HDC绘制到源HDC中，以实现平滑滚动的效果       

        BitBlt(hdc, 0, 0, 320, 240, hdcMem, dwPos, 0, SRCCOPY);     

        dwPos = dwPos + 1;  

    } 

}

CDialog::OnLButtonUp(nFlags, point);

}

其中，move_x 为鼠标弹起时的X坐标，first_x为鼠标按下时的X坐标。

添加全局变量：

static int first_x = 0;

static int move_x = 0;

3.总结：

以上的代码就能实现WINCE5.0仿IPHONE界面切换功能。

在模拟器下实现的效果图如下：

                                                   图4.1效果图

说明：本文为在网上资料基础上进行的原创，转载请说明，谢谢。具体代码可以发邮件向我要，[e-mail]