EVC WINCE5.0仿Iphone滑动界面(参考+原创)
2012-04-30 22:28
239 查看
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效果图
说明:本文为在网上资料基础上进行的原创,转载请说明,谢谢。具体代码可以发邮件向我要,zhuanghaoren@126.com
一、实现一个简单的功能:
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效果图
说明:本文为在网上资料基础上进行的原创,转载请说明,谢谢。具体代码可以发邮件向我要,zhuanghaoren@126.com
相关文章推荐
- iOS之iPhone解锁界面的"滑动来解锁"闪烁动画效果,好奇的赶紧进来取走,别看了,说的就是你0.0
- iPhone新颖华丽解锁界面:滑动折叠
- 苹果获iOS滑动解锁界面及第一代iPhone设计专利
- 『原创』+『参考』使用C#在PPC的Today界面上的任务栏加入应用程序图标
- ipad/iphone启动界面Default.png
- 将一个view 的背景设为透明 但view上的图标 不透明 实现类似iphone ipad 主页的滑动效果
- iPad和iPhone App界面设计的30个案例
- 关于界面随着手指滑动的实现
- iPhone界面跳转
- 白乔原创:VC之美化界面篇
- iphone开发参考网址
- [设计理论] 开发iPhone软件界面流程
- Android 界面滑动实现---Scroller类 从源码和开发文档中学习(让你的布局动起来)
- android 界面滑动切换
- 笔记本上的FreeBSD进不了loader界面[原创 已解决]
- iOS:界面适配(三)--iPhone不同机型适配 6/6plus 前
- Ionic2:创建App启动页滑动欢迎界面
- [原创] 客户端同学正在辛苦做战斗,加油加油!show下其他界面
- Html5实现iPhone开机界面
- 编写最简单的 iPhone 界面切换应用