自由模式 餐馆点餐App制作实例( 二 )




7接着在本组再新建9个页面 , 作为这9个宫格的下一页 , 别离介绍这些精品菜式和价钱

自由模式 餐馆点餐App制作实例



8 点击第一个页面 , 同样先利用一个汗青导航控件 , 注重 , 这里设置左侧按钮是链接到上一页 , 即刚做好的“精品炒菜”宫格页(图8-1) 。 然后如图所示 , 利用一个图片控件上传一张菜式的图片 。 往下利用一个富文本页面 , 输入菜式的价钱和介绍排版好(名称和价钱加粗标红) , 并在旁边添加一个按钮控件 , 同样定名为“点菜” , 和设置“挪用功能—打德律风” 。 (图8-2)

自由模式 餐馆点餐App制作实例



自由模式 餐馆点餐App制作实例



9余下的页面也一一照此设置装备摆设好 , 接着 , 回到“精品点菜”页面 , 别离点击9个宫格 , 在属性栏中设置链接到对应的下一页 。 如第一个宫格“招牌东坡肉”设置链接到“招牌东坡肉”页面

自由模式 餐馆点餐App制作实例



10第一年夜块就做好了 , 继续第二块 。 在“快餐系列”组内新建页面 , 同样先利用汗青导航 , 左侧按钮链接到“本家儿菜单” , 然后拖拽一个列表控件到模拟器 , 按需添加列表栏 , 这里添加了7个 。 然后设置题目文字为“加粗 , 绿色” , 内容文字属性默认即可 , 接着逐栏编纂列表的题目、内容 , 左侧图片框中编纂该快餐的图片(50*50大小) , 右侧图片框利用一个小的圆形订餐图标做装饰(PNG格局 , 25*25) , 并设置每栏的链接都为挪用德律风功能 , 如许 , 用户点击每一栏都可直接拨号订餐 。

自由模式 餐馆点餐App制作实例



11此时列表栏已做好 , 还可以继续对列表的行高、距离、行布景等作出编纂调整 , 获得更美不雅的结果 。

自由模式 餐馆点餐App制作实例



12在第三年夜块“可口点心”组新建页面 , 先利用汗青导航 , 设置链接到本家儿菜单 。 然后拖动几个图片控件和单行文本控件到模拟器摆列当作如图所示 , 然后别离上传点心的图片 , 在文本属性中输入点心名字;最后 , 再添加一个按钮 , 定名“点餐” , 设置链接到挪用德律风功能 , 让用户可在本页订餐 。

自由模式 餐馆点餐App制作实例



13接着 , 我们来为这些点心图片设置一个点击放年夜的结果:在每个图片控件属性中 , 选择“点击事务—显示年夜图” , 并上传一张该点心的年夜图片 , 保留 。 如许 , 用户在手机中点击该图片时 , 将会弹出一张年夜图 , 并可缩放和拖动 , 看得加倍清楚 。

自由模式 餐馆点餐App制作实例

猜你喜欢