App制作实例之餐馆点餐App.doc

App制作实例之餐馆点餐App 前段时间有不少用户表示想做一个餐馆订餐的App，这里小编就来教大家做一个吧，虽然实现不了数据库记录自动下单这种牛逼的大型客户端效果（那需要很长时间去专业定制哈），但可以让客户通过手机浏览你所有的菜单、菜式介绍以及价格等，并可直接拨打你的电话订餐哦~而且只需半小时左右即可完成，建议所有的快餐店都普及制作一下，哈哈~ 另外，这里面使用了宫格控件、列表控件，图片控件排版以及画廊控件进行演示，大家顺便学学这些控件的用法，大胆去举一反三的创作吧~ 先看看App客户端的效果： 开始制作： 1、 ?新建App，上传图标、启动页，不赘述，自己搞定哈~ 2、 ?进入操作界面，先在左边新建一个页面“主菜单”，归入默认组，作为总的菜单页。（图2-1） （图2-1）  3、 ?建好之后点击它，在右边控件栏中拖拽一个宫格控件到模拟器中，拉伸铺满整个屏幕。然后在右侧控件属性栏中，添加4个宫格，设置参数（列数2，列间距20，行间距50，外边距20），并勾选“高度自适应”选项。如图3-1所示；然后分别点击已添加的每个宫格，分别为它们上传图标，这里我们不填写宫格名称，直接在图片上展示即可。最后设置宫格的总背景，此时效果就如图3-2所示了； （图3-1） （图3-2）  4、 ?菜单页搞定，一定记得要保存哦！接下来就开始做菜单中包含的四大块内容了~在左边新建4个组，分别命名为这四大板块的名字，方便管理。（图4-1） （图4-1） 5、 ?建好之后，进入第一个组“精品点菜”，新建页面“精品点菜”，归入该组；点击这个页面，先拖一个历史导航控件到模拟器，在属性栏设置“左边导航按钮”链接至“主菜单”页面。（如图5-1）这样，浏览到本页时，便可点击返回按钮回到主菜单。这个历史导航再配置所有下级页面都会用到哦~如果不配置历史导航条，将无法返回，只能直接退出（尤其是iphone）。 （图5-1） 6、 ?然后拖动宫格控件到模拟器，添加9个宫格，3*3布局，拉伸铺满模拟器，在最下方留出一条位置，然后为每个宫格上传图片，编辑名字，在留出位置使用一个按钮控件，在属性栏中命名为“点菜”，设置点击后“调用功能—打电话”，并在下方输入订餐的电话这样，客户点击即可直接拨打电话订餐了~（图6-1）。保存后，效果如图6-2所示。 （图6-1）  （图6-2） 7、 ?接着在本组再新建9个页面，作为这9个宫格的下一页，分别介绍这些精品菜式和价格~（图7-1） （图7-1）  8、 ?点击第一个页面，同样先使用一个历史导航控件，注意，这里设置左侧按钮是链接到上一页，即刚做好的“精品炒菜”宫格页（图8-1）。然后如图所示，使用一个图片控件上传一张菜式的图片。往下使用一个富文本页面，输入菜式的价格和介绍排版好（名称和价格加粗标红），并在旁边添加一个按钮控件，同样命名为“点菜”，和设置“调用功能—打电话”。（图8-2） （图8-1） （图8-2） 9、 ?余下的页面也一一照此配置好，接着，回到“精品点菜”页面，分别点击9个宫格，在属性栏中设置链接到对应的下一页。如第一个宫格“招牌东坡肉”设置链接到“招牌东坡肉”页面（图9-1）。 9-1） 10、第一大块就做好了，继续第二块。在“快餐系列”组内新建页面，同样先使用历史导航，左侧按钮链接到“主菜单”，然后拖拽一个列表控件到模拟器，按需添加列表栏，这里添加了7个。然后设置标题文字为“加粗，绿色”，内容文字属性默认即可，接着逐栏编辑列表的标题、内容，左侧图片框中编辑该快餐的图片（50*50大小），右侧图片框使用一个小的圆形订餐图标做装饰（PNG格式，25*25），并设置每栏的链接都为调用电话功能，这样，用户点击每一栏都可直接拨号订餐。（图10-1） 10-1） 11、此时列表栏已做好，还可以继续对列表的行高、间隔、行背景等作出编辑调整，获得更美观的效果。（图11-1） 11-1） 12、在第三大块“可口点心”组新建页面，先使用历史导航，设置链接到主菜单。然后拖动几个图片控件和单行文本控件到模拟器排列成如图所示，然后分别上传点心的图片，在文本属性中输入点心名字；最后，再添加一个按钮，命名“点餐”，设置链接到调用电话功能，让用户可在本页订餐。 12-1） 13、接着，我们来为这些点心图片设置一个点击放大的效果：在每个图片控件属性中，选择“点击事件—显示大图”，并上传一张该点心的大图片，保存。这样，用户在手机中点击该图片时，将会弹出一张大图，并可缩放和拖动，看得更加清晰。（图13-1） 13-1） 14、最后的“沁爽饮品”组，新建页面，历史导航链接到“主菜单”。拖