前言
在這里制作一個9宮格的小程序，如果超過9個，那么就自動翻頁。翻頁采用劃動實(shí)現(xiàn)，并且有慣性作用。
原理
mobile手機(jī)里滑動效果主要是原理是支持屏幕的觸摸，當(dāng)我們按下、松開時系統(tǒng)分別可以捕捉到相應(yīng)的坐標(biāo)位置，然后動態(tài)的改變布局，從而達(dá)到劃動的效果。
圖型button
由于mobile還沒有支持圖片button，所以我們做出一個輔佐類，當(dāng)按下、彈開時分別使用鋼筆繪制不同的圖片到屏幕。
Code
using System;
using System.Collections.Generic;
using System.Text;
using System.Drawing;
using System.Windows.Forms;
using System.Drawing.Imaging;
namespace iPhoneUI
{
public class ImageButton
{
internal Rectangle clientArea;
internal Form owner;
internal Bitmap image;
internal Bitmap imageDown;
internal bool pushed = false;
internal Point location;
internal Point start;
internal int h=30,w=30;
internal bool Enable = false;
private double pressTime = Environment.TickCount;
internal bool pushedOneTime = false;
public string Name {get;set;}
public bool IsPressedOneTime
{
get { return pushedOneTime; }
set { pushedOneTime = value; }
}
public event System.EventHandler Click;
public event System.EventHandler DoubleClick;
public ImageButton(Form owner,int w,int h)
{
this.w = w;
this.h = h;
this.owner = owner;
Attach(owner);
}
public ImageButton(Form owner,Point location)
{
this.owner = owner;
Attach(owner);
this.location = location;
this.clientArea = new Rectangle(location.X, location.Y, h, w);
}
public Point Location
{
set
{
this.location = value;
this.clientArea = new Rectangle(location.X, location.Y, w, h);
}
get { return location; }
}
public Bitmap Image
{
get { return image;}
set
{
image = value;
if (image != null)
{
clientArea = new Rectangle(location.X, location.Y, image.Width, image.Height);
}
}
}
public Bitmap ImageDown
{
get { return imageDown;}
set { imageDown = value; }
}
public bool HitTest(int x, int y)
{
return clientArea.Contains(x, y);
}
private void Attach(Form owner)
{
owner.MouseDown += new MouseEventHandler(owner_MouseDown);
owner.MouseUp += new MouseEventHandler(owner_MouseUp);
owner.DoubleClick += new EventHandler(owner_DoubleClick);
}
void owner_DoubleClick(object sender, EventArgs e)
{
}
public virtual void owner_MouseUp(object sender, MouseEventArgs e)
{
if (!Enable)
return;
if (pushed)
{
using (Graphics gx = owner.CreateGraphics())
{
this.pushed = false;
this.Paint(gx);
owner.Invalidate();
}
pushed = false;
if ((Environment.TickCount - pressTime) < 100)
{
if (Click != null)
Click(this, e);
}
}
// SendMessage(ButtonCode, "Button Pressed");
}
public virtual void owner_MouseDown(object sender, MouseEventArgs e)
{
if (!Enable)
return;
if (this.HitTest(e.X, e.Y))
{
using (Graphics gx = owner.CreateGraphics())
{
this.pushed = true;
IsPressedOneTime = true;
this.Paint(gx);
if ((Environment.TickCount - pressTime) < 300)
{
if (DoubleClick != null)
DoubleClick(this, e);
}
pressTime = Environment.TickCount;
}
start = new Point(e.X, e.Y);
}
}
public void Paint(Graphics gx)
{
if (!Enable)
return;
//gx.Clear(Color.White);
ImageAttributes attrib = new ImageAttributes();
Color color = GetTransparentColor(image);
attrib.SetColorKey(color, color);
if (!pushed || imageDown == null)
gx.DrawImage(image, clientArea, 0, 0, clientArea.Width, clientArea.Height, GraphicsUnit.Pixel, attrib);
else
{
gx.DrawImage(imageDown, clientArea, 0, 0, clientArea.Width, clientArea.Height, GraphicsUnit.Pixel, attrib);
}
Brush b = new SolidBrush(Color.Black);
int txtX=clientArea.Location.X;
if(Name.Length<5)//右移5個PIX
txtX+=5;
gx.DrawString(this.Name, owner.Font, b, txtX, clientArea.Bottom);
}
internal Color GetTransparentColor(Bitmap image)
{
return image.GetPixel(0, 0);
}
}
}
當(dāng)mouse按下時，判斷是否在圖像所在的區(qū)域內(nèi)，就執(zhí)行按下時繪制圖像。并且判斷兩次按下時間小于300毫秒，就認(rèn)為是雙擊，發(fā)出注冊雙擊事件。當(dāng)mouse彈起時，恢復(fù)按前的圖像，并且如果按下時間間隔不超過100毫秒，認(rèn)為是單擊。
初使化按扭
Code
1<?xml version="1.0" standal?>
2<DocumentElement>
3 <menu>
4 <Name>測試1</Name>
5
6 <path>Chat 46x46.bmp</path>
7 <pressPath>Chat 46x46.bmp</pressPath>
8 </menu>
9 <menu>
10 <Name>測試1a</Name>
11
12 <path>Chat 46x46.bmp</path>
13 <pressPath>Chat 46x46.bmp</pressPath>
14 </menu>
15 <menu>
16 <Name>測試1b</Name>
17
18 <path>lock 46x46.bmp</path>
19 <pressPath>lock 46x46_pressed.bmp</pressPath>
20 </menu>
21 <menu>
22 <Name>測試1c</Name>
23
24 <path>Internet Explorer 46x46.bmp</path>
25 <pressPath>Internet Explorer 46x46_pressed.bmp</pressPath>
26 </menu>
27 <menu>
28 <Name>測試1d</Name>
29
30 <path>Close 46x46.bmp</path>
31 <pressPath>Close 46x46_pressed.bmp</pressPath>
32 </menu>
33 <menu>
34 <Name>測試1e</Name>
35
36 <path>Chat 46x46.bmp</path>
37 <pressPath>Chat 46x46_pressed.bmp</pressPath>
38 </menu>
39 <menu>
40 <Name>測試1f</Name>
41
42 <path>Camera 46x46.bmp</path>
43 <pressPath>Camera 46x46_pressed.bmp</pressPath>
44 </menu>
45 <menu>
46 <Name>測試1g</Name>
47
48 <path>Camera 46x46.bmp</path>
49 <pressPath>Camera 46x46_pressed.bmp</pressPath>
50 </menu>
51 <menu>
52 <Name>
53 測試1h
54 </Name>
55
56 <path>Camera 46x46.bmp</path>
57 <pressPath>Camera 46x46_pressed.bmp</pressPath>
58 </menu>