資源描述：
《app制作實例之餐館點餐app》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫。
1、App制作實例之餐館點餐App前段時間有不少用戶表示想做一個餐館訂餐的App，這里小編就來教大家做一個吧，雖然實現(xiàn)不了數(shù)據(jù)庫記錄自動下單這種牛逼的大型客戶端效果（那需要很長時間去專業(yè)定制哈），但可以讓客戶通過手機瀏覽你所有的菜單、菜式介紹以及價格等，并可直接撥打你的電話訂餐哦~而且只需半小時左右即可完成，建議所有的快餐店都普及制作一下，哈哈~另外，這里面使用了宮格控件、列表控件，圖片控件排版以及畫廊控件進(jìn)行演示，大家順便學(xué)學(xué)這些控件的用法，大膽去舉一反三的創(chuàng)作吧~先看看App客戶端的效果：開始制作：1、?新建App，上傳圖標(biāo)、啟動頁，不贅述，自己搞定哈~2、?進(jìn)入操作界面，先在
2、左邊新建一個頁面“主菜單”，歸入默認(rèn)組，作為總的菜單頁。（圖2-1）（圖2-1）3、?建好之后點擊它，在右邊控件欄中拖拽一個宮格控件到模擬器中，拉伸鋪滿整個屏幕。然后在右側(cè)控件屬性欄中，添加4個宮格，設(shè)置參數(shù)（列數(shù)2，列間距20，行間距50，外邊距20），并勾選“高度自適應(yīng)”選項。如圖3-1所示；然后分別點擊已添加的每個宮格，分別為它們上傳圖標(biāo)，這里我們不填寫宮格名稱，直接在圖片上展示即可。最后設(shè)置宮格的總背景，此時效果就如圖3-2所示了；（圖3-1）（圖3-2）4、?菜單頁搞定，一定記得要保存哦！接下來就開始做菜單中包含的四大塊內(nèi)容了~在左邊新建4個組，分別命名為這四大板塊的
3、名字，方便管理。（圖4-1）（圖4-1）5、?建好之后，進(jìn)入第一個組“精品點菜”，新建頁面“精品點菜”，歸入該組；點擊這個頁面，先拖一個歷史導(dǎo)航控件到模擬器，在屬性欄設(shè)置“左邊導(dǎo)航按鈕”鏈接至“主菜單”頁面。（如圖5-1）這樣，瀏覽到本頁時，便可點擊返回按鈕回到主菜單。這個歷史導(dǎo)航再配置所有下級頁面都會用到哦~如果不配置歷史導(dǎo)航條，將無法返回，只能直接退出（尤其是iphone）。（圖5-1）6、?然后拖動宮格控件到模擬器，添加9個宮格，3*3布局，拉伸鋪滿模擬器，在最下方留出一條位置，然后為每個宮格上傳圖片，編輯名字，在留出位置使用一個按鈕控件，在屬性欄中命名為“點菜”，設(shè)置點
4、擊后“調(diào)用功能—打電話”，并在下方輸入訂餐的電話這樣，客戶點擊即可直接撥打電話訂餐了~（圖6-1）。保存后，效果如圖6-2所示。（圖6-1）（圖6-2）7、?接著在本組再新建9個頁面，作為這9個宮格的下一頁，分別介紹這些精品菜式和價格~（圖7-1）（圖7-1）8、?點擊第一個頁面，同樣先使用一個歷史導(dǎo)航控件，注意，這里設(shè)置左側(cè)按鈕是鏈接到上一頁，即剛做好的“精品炒菜”宮格頁（圖8-1）。然后如圖所示，使用一個圖片控件上傳一張菜式的圖片。往下使用一個富文本頁面，輸入菜式的價格和介紹排版好（名稱和價格加粗標(biāo)紅），并在旁邊添加一個按鈕控件，同樣命名為“點菜”，和設(shè)置“調(diào)用功能—打電話
5、”。（圖8-2）（圖8-1）（圖8-2）9、?余下的頁面也一一照此配置好，接著，回到“精品點菜”頁面，分別點擊9個宮格，在屬性欄中設(shè)置鏈接到對應(yīng)的下一頁。如第一個宮格“招牌東坡肉”設(shè)置鏈接到“招牌東坡肉”頁面（圖9-1）。（圖9-1）10、第一大塊就做好了，繼續(xù)第二塊。在“快餐系列”組內(nèi)新建頁面，同樣先使用歷史導(dǎo)航，左側(cè)按鈕鏈接到“主菜單”，然后拖拽一個列表控件到模擬器，按需添加列表欄，這里添加了7個。然后設(shè)置標(biāo)題文字為“加粗，綠色”，內(nèi)容文字屬性默認(rèn)即可，接著逐欄編輯列表的標(biāo)題、內(nèi)容，左側(cè)圖片框中編輯該快餐的圖片（50*50大?。?，右側(cè)圖片框使用一個小的圓形訂餐圖標(biāo)做裝飾（P
6、NG格式，25*25），并設(shè)置每欄的鏈接都為調(diào)用電話功能，這樣，用戶點擊每一欄都可直接撥號訂餐。（圖10-1）（圖10-1）11、此時列表欄已做好，還可以繼續(xù)對列表的行高、間隔、行背景等作出編輯調(diào)整，獲得更美觀的效果。（圖11-1）（圖11-1）12、在第三大塊“可口點心”組新建頁面，先使用歷史導(dǎo)航，設(shè)置鏈接到主菜單。然后拖動幾個圖片控件和單行文本控件到模擬器排列成如圖所示，然后分別上傳點心的圖片，在文本屬性中輸入點心名字；最后，再添加一個按鈕，命名“點餐”，設(shè)置鏈接到調(diào)用電話功能，讓用戶可在本頁訂餐。（圖12-1）13、接著，我們來為這些點心圖片設(shè)置一個點擊放大的效果：在每個
7、圖片控件屬性中，選擇“點擊事件—顯示大圖”，并上傳一張該點心的大圖片，保存。這樣，用戶在手機中點擊該圖片時，將會彈出一張大圖，并可縮放和拖動，看得更加清晰。（圖13-1）（圖13-1）14、最后的“沁爽飲品”組，新建頁面，歷史導(dǎo)航鏈接到“主菜單”。拖拽一個畫廊控件到模擬器，拉伸鋪滿。在屬性欄中點擊“上傳圖片”，上傳一組圖片，將出現(xiàn)在下面的框中，可自由調(diào)整播放順序。然后設(shè)置是否自動播放和播放速度（此處設(shè)置自動播放，速度為5000毫秒，即5秒播完一輪），最后在底部添加一個按鈕控件，命名“點餐”，
