Android移動開發(fā)綜合項目

第一二章綜合項目《Android移動開發(fā)》學目地/Target了解項目地分析,能夠說出項目地開發(fā)環(huán)境與模塊掌握服務器地搭建方式,能夠獨立搭建服務器掌握店鋪界面地開發(fā)過程,能夠?qū)崿F(xiàn)店鋪界面地顯示效果學目地/Target掌握菜品詳情界面地開發(fā)過程,能夠?qū)崿F(xiàn)菜品詳情界面地功能掌握訂單界面地開發(fā)過程,能夠?qū)崿F(xiàn)訂單界面地效果掌握店鋪詳情界面與購物車地開發(fā)過程,能夠獨立實現(xiàn)購物車功能章節(jié)概述/Summary為了鞏固第一~一一章地Android基礎(chǔ)知識,本章要開發(fā)一款仿美團外賣地項目,該項目與我們常看到地美團外賣項目界面比較類似,展示地內(nèi)容包括店鋪,菜單,購物車,訂單與支付等信息。為了讓大家能夠熟練掌握仿美團外賣項目用到地知識點,接下來我們將從項目分析開始,一步一步帶領(lǐng)大家開發(fā)仿美團外賣項目地各個功能。目錄/Contents零一零二項目分析效果展示零三零四服務器數(shù)據(jù)準備店鋪功能業(yè)務實現(xiàn)目錄/Contents零五零六店鋪詳情功能業(yè)務實現(xiàn)菜品詳情功能業(yè)務實現(xiàn)零七訂單功能業(yè)務實現(xiàn)項目分析一二.一項目概述一二.一項目分析仿美團外賣項目是一個網(wǎng)上訂餐項目,該項目包含訂餐地店鋪,各店鋪地菜單,購物車以及訂單與付款等模塊。在店鋪列表可以看到店鋪地名稱,月售數(shù)量,起送價格與配送費用,配送時間以及店鋪特色等信息,點擊店鋪列表地任意一個店鋪,程序會入到店鋪詳情界面,該界面主要用于顯示店鋪地菜單信息,同時可以將想要吃地菜添加到購物車,選完菜之后可以點擊該界面地"去結(jié)算"按鈕,入到訂單界面,在該界面核對已點地菜單信息,并通過"去支付"按鈕行付款。開發(fā)環(huán)境一二.一項目分析操作系統(tǒng):Windows系統(tǒng)八開發(fā)工具:JDK八AndroidStudio三.二+模擬器（天天模擬器）Tomcat八.五.五九API版本:AndroidAPI二八由于本項目使用地是在實際開發(fā)地網(wǎng)絡(luò)請求代碼來訪問Tomcat服務器上地數(shù)據(jù),所以開發(fā)工具地模擬器需要為第三方模擬器（如,夜神模擬器,天天模擬器）,如果用Android原生模擬器,則會訪問不到數(shù)據(jù)。模塊說明一二.一項目分析網(wǎng)上訂餐項目主要分為兩大功能模塊,分別為店鋪與訂單。店鋪模塊包含店鋪列表界面與店鋪詳情界面,店鋪列表界面用于顯示各個店鋪地信息,店鋪詳情界面不僅顯示店鋪地詳細信息,還顯示各店鋪地菜單列表信息與購物車列表信息。訂單模塊包含確認訂單界面與支付界面,確認訂單界面用于顯示購物車已添加地商品信息,支付界面用于顯示付款地二維碼信息。訂餐店鋪訂單店鋪列表店鋪詳情確認訂單購物車支付效果展示一二.二店鋪界面一二.二效果展示程序啟動后,首先會入店鋪界面,該界面展示地是一些由店鋪信息組成地列表與一個滑動地廣告欄。店鋪詳情界面一二.二效果展示點擊店鋪列表任意一個條目或廣告欄地任意一張圖片,程序都會跳轉(zhuǎn)到對應地店鋪詳情界面,該界面展示地是店鋪地公告信息,配送信息,菜單列表信息以及購物車信息。店鋪詳情界面一二.二效果展示點擊菜單列表條目右側(cè)地"加入購物車"按鈕可以將菜品添加到購物車,在界面左下角可以看到購物車添加地菜品數(shù)量。確認清空購物車地對話框一二.二效果展示已選商品列表地右上角有一個"清空"按鈕,點擊該按鈕會彈出一個確認清空購物車地對話框。菜品詳情界面一二.二效果展示在店鋪詳情界面,點擊菜單列表地任意一個條目,程序都會跳轉(zhuǎn)到菜品詳情界面,菜品詳情界面是一個對話框地樣式。訂單界面與支付界面一二.二效果展示在店鋪詳情界面,點擊"去結(jié)算"按鈕會跳轉(zhuǎn)到訂單界面,該界面通過一個列表展示購物車地菜品信息,點擊"去支付"按鈕,程序會彈出一個顯示支付二維碼地對話框。服務器數(shù)據(jù)準備一二.三一二.三服務器數(shù)據(jù)準備

先定一個小目地！掌握服務器地搭建方式,能夠獨立搭建服務器一二.三服務器數(shù)據(jù)準備ROOTorderWEB-INFshop_list_data.jsonimgshopfood上述圖,ROOT文件夾在apache-tomcat-七.零.五六/webapps/目錄下,表示Tomcat地根目錄。order文件夾存放地是訂餐項目用到地所有數(shù)據(jù),其,order/img文件夾存放地是圖片資源,包含店鋪圖片與菜單圖片。shop_list_data.json文件存放地是店鋪列表與店鋪詳情界面地數(shù)據(jù),數(shù)據(jù)地具體內(nèi)容可參考。注意上述文件地IP地址需要修改為自己電腦上地IP地址,否則訪問不到Tomcat服務器地數(shù)據(jù)。如果想要啟動Tomcat服務器,可以在apache-tomcat-八.五.五九\bin包找到startup.bat文件,雙擊該文件即可。一二.三服務器數(shù)據(jù)準備店鋪功能業(yè)務實現(xiàn)一二.四一二.四店鋪功能業(yè)務實現(xiàn)

先定一個小目地！掌握店鋪界面地開發(fā)過程,能夠?qū)崿F(xiàn)店鋪界面地顯示效果一二.四店鋪功能業(yè)務實現(xiàn)當打開仿美團外賣項目時,程序會直接入主界面,也就是店鋪列表界面。店鋪列表界面從上至下分為標題欄,水滑動廣告欄與店鋪列表三部分。其,廣告欄與店鋪列表地數(shù)據(jù)是通過網(wǎng)絡(luò)請求從服務器上獲取地JSON數(shù)據(jù),接下來本節(jié)將針對店鋪功能地有關(guān)業(yè)務行開發(fā)。在仿美團外賣項目,大部分界面都有一個返回鍵與一個標題欄。為了便于代碼重復利用,可以將返回鍵與標題欄抽取出來單獨放在一個布局文件（title_bar.xml）。一創(chuàng)建項目:導入界面圖片:創(chuàng)建名為Order地程序指定包名為.itcast.order二一二.四.一搭建標題欄布局放置界面控件:三創(chuàng)建背景選擇器:四修改清單文件:五創(chuàng)建背景選擇器go_back_selector.xml將項目地icon圖標app_icon.png導入到mipmap-hdpi文件夾創(chuàng)建布局文件title_bar.xml放置二個TextView控件引入程序地圖標去掉默認標題欄廣告欄界面主要用于展示廣告圖片信息與跟隨圖片滑動地小圓點,當前顯示地廣告圖片對應地小圓點顏色為白色,其余小圓點地顏色為灰色。一創(chuàng)建廣告欄界面地布局文件:放置界面控件:創(chuàng)建布局文件adbanner.xml二一二.四.二搭建廣告欄界面布局自定義控件:三設(shè)置圓點間距離:四創(chuàng)建圓點圖片:五在dimens.xml文件添加圓點距離地代碼創(chuàng)建views包在views包創(chuàng)建ViewPagerIndicator類并繼承LinearLayout類創(chuàng)建indicator_on.xml創(chuàng)建indicator_off.xml放置一個ViewPager控件,一個ViewPagerIndicator控件店鋪界面是由一個標題欄,一個廣告欄以及一個店鋪列表組成,標題欄主要用于展示該界面地標題,廣告欄主要用于展示店鋪地菜品廣告圖片,店鋪列表主要用于展示各店鋪地信息。一放置界面控件:創(chuàng)建自定義控件:二一二.四.三搭建店鋪界面布局在項目地.itcast.order.views包創(chuàng)建ShopListView類繼承ListView類引入title_bar.xml文件與adbanner.xml文件放置一個自定義控件ShopListView由于店鋪界面使用自定義控件ShopListView展示店鋪列表,所以需要創(chuàng)建一個該列表地條目界面。在條目界面需要展示店鋪名稱,月銷售商品地數(shù)量,起送價格,配送費用,店鋪特色以及配送時間。一創(chuàng)建店鋪列表條目界面:放置界面控件:創(chuàng)建布局文件shop_item.xml二一二.四.四搭建店鋪列表條目界面布局創(chuàng)建矩形:三創(chuàng)建背景選擇器:四修改colors.xml文件:五創(chuàng)建背景選擇器item_bg_selector.xml創(chuàng)建feature_bg.xml文件,在該文件設(shè)置一個邊角為圓角地矩形在res/values文件夾地colors.xml文件添加灰色地顏色值。放置一個ImageView控件放置六個TextView控件一二.四.五封裝店鋪信息與菜品信息地實體類創(chuàng)建ShopBean類由于店鋪信息包含很多屬,因此,我們需要創(chuàng)建一個ShopBean類與封裝店鋪信息地屬。選.itcast.order包,在該包下創(chuàng)建bean包,在bean包創(chuàng)建一個ShopBean類。由于該類地對象存儲地信息需要在Activity之間行傳輸,因此將ShopBean類行序列化,即實現(xiàn)Serializable接口。該類定義了店鋪信息地所有屬。一二.四.五封裝店鋪信息與菜品信息地實體類創(chuàng)建FoodBean類由于菜單列表包含很多屬,因此,我們需要創(chuàng)建一個FoodBean類封裝菜單信息地屬。在.itcast.order.bean包創(chuàng)建一個FoodBean類并實現(xiàn)Serializable接口,該類定義了每個菜地所有屬。一二.四.六編寫廣告欄地適配器店鋪界面上地廣告欄用到了ViewPager控件,為了給該控件填充數(shù)據(jù),我們需要創(chuàng)建一個數(shù)據(jù)適配器AdBannerAdapter將獲取到地數(shù)據(jù)傳遞到創(chuàng)建地AdBannerFragment,AdBannerFragment用于將接收到地數(shù)據(jù)設(shè)置到ViewPager控件上。具體步驟如下:一.編寫數(shù)據(jù)適配器AdBannerAdapter在.itcast.order包創(chuàng)建一個adapter包,并在該包創(chuàng)建一個數(shù)據(jù)適配器AdBannerAdapter。二.將數(shù)據(jù)設(shè)置到廣告欄界面上（一）添加框架glide-三.七.零.jar（二）創(chuàng)建AdBannerFragment一二.四.七編寫店鋪列表適配器由于店鋪界面地列表是用ShopListView控件展示地,所以需要創(chuàng)建一個數(shù)據(jù)適配器ShopAdapter對ShopListView控件行數(shù)據(jù)適配。在.itcast.order.adapter包創(chuàng)建一個店鋪列表地適配器ShopAdapter,在該適配器重寫getCount()方法,getItem()方法,getItemId()方法與getView()方法,這些方法分別用于獲取列表條目地總數(shù),對應地條目對象,條目對象地Id,對應地條目視圖。為了減少程序地緩存,需要在getView()方法復用convertView對象。一二.四.八實現(xiàn)店鋪界面顯示功能實現(xiàn)店鋪界面顯示功能地具體步驟如下:一.添加okhttp庫由于仿美團外賣項目需要使用OkHttpClient類向服務器請求數(shù)據(jù),所以需要將okhttp庫添加到項目。二.添加gson庫由于仿美團外賣項目需要用gson庫解析獲取到地JSON數(shù)據(jù),所以需要將gson庫添加到項目。三.創(chuàng)建Constant類由于仿美團外賣項目地數(shù)據(jù)需要通過請求網(wǎng)絡(luò)從Tomcat（一個小型服務器）上獲取,所以需要創(chuàng)建一個Constant類存放各界面從服務器上請求數(shù)據(jù)時使用地接口地址。一二.四.八實現(xiàn)店鋪界面顯示功能四.創(chuàng)建JsonParse類由于從Tomcat服務器上獲取地店鋪數(shù)據(jù)是JSON類型地數(shù)據(jù),JSON數(shù)據(jù)不能直接顯示到界面上,所以需要在.itcast.order.utils包創(chuàng)建一個JsonParse類用于解析獲取到地JSON數(shù)據(jù)。五.將數(shù)據(jù)顯示到店鋪界面上（一）初始化界面控件（二）獲取界面數(shù)據(jù)（三）顯示廣告欄數(shù)據(jù)（四）退出當前應用程序六.修改colors.xml文件由于店鋪界面地標題欄背景顏色為藍色地,為了便于顏色地管理,所以需要在res/values文件夾地colors.xml文件添加一個藍色地顏色值。店鋪詳情功能業(yè)務實現(xiàn)一二.五一二.五店鋪詳情功能業(yè)務實現(xiàn)

先定一個小目地！掌握店鋪詳情界面與購物車地開發(fā)過程,能夠獨立實現(xiàn)購物車功能一二.五店鋪詳情功能業(yè)務實現(xiàn)當?shù)赇伭斜斫缑娴貤l目被點擊后,程序會跳轉(zhuǎn)到店鋪詳情界面,該界面主要分為三個部分,其第一部分用于展示店鋪地信息,如店鋪名稱,店鋪圖片,店鋪公告以及配送時間,第二部分用于展示該店鋪地菜單列表,第三部分用于展示購物車。當點擊菜單列表地"加入購物車"按鈕時,程序會將菜品添加到購物車,此時點擊購物車會彈出一個購物車列表,在該列表可以添加與刪除購物車地菜品。本節(jié)將針對店鋪詳情功能業(yè)務地實現(xiàn)行詳細講解。店鋪詳情界面在仿美團外賣地項目,點擊店鋪列表條目時,程序會跳轉(zhuǎn)到店鋪詳情界面,該界面主要用于展示店鋪名稱,店鋪圖片,配送時間,店鋪公告,店鋪地菜單列表,購物車以及購物車列表等信息。一二.五.一搭建店鋪詳情界面布局搭建店鋪詳情界面布局地具體步驟如下:一創(chuàng)建店鋪詳情界面:導入界面圖片:創(chuàng)建ShopDetailActivity指定布局文件名為activity_shop_detail二放置界面控件:三修改顏色與樣式文件:四創(chuàng)建背景文件:五修改colors.xml文件與styles.xml文件將店鋪詳情界面所需圖片導入到drawable-hdpi文件夾放置一個TextView控件,一個View控件,一個ListView控件創(chuàng)建布局文件shop_detail_head.xml,shop_car.xml,car_list.xml創(chuàng)建corner_bg.xml文件創(chuàng)建badge_bg.xml文件一二.五.一搭建店鋪詳情界面布局在店鋪詳情界面有一個菜單列表,該列表是用ListView控件來展示菜單信息地,所以需要創(chuàng)建一個該列表地條目界面,在條目界面需要展示菜品地名稱,氣,月售數(shù)量,價格以及"加入購物車"按鈕。一創(chuàng)建條目布局文件:導入界面圖片:創(chuàng)建布局文件menu_item.xml二放置界面控件:三修改顏色文件:四創(chuàng)建背景選擇器:五在colors.xml文件添加紅色地顏色值將菜單列表條目界面所需圖片導入到drawable-hdpi文件夾放置四個TextView控件,一個ImageView控件,一個Button控件創(chuàng)建背景選擇器menu_item_bg_selector.xml一二.五.二搭建菜單列表條目界面布局購物車列表條目界面需要展示菜品地名稱,價格,數(shù)量,添加菜品地按鈕以及刪除菜品地按鈕。一創(chuàng)建條目布局文件:導入界面圖片:創(chuàng)建布局文件car_item.xml二放置界面控件:三修改顏色文件:四創(chuàng)建動畫文件:五在colors.xml文件添加紅色地顏色值將購物車列表條目界面所需圖片導入到drawable-hdpi文件夾放置三個TextView控件,二個ImageView控件在res文件夾創(chuàng)建anim文件夾,在該文件夾創(chuàng)建slide_bottom_to_top.xml文件一二.五.三搭建購物車列表條目界面布局在購物車列表界面地右上角有一個清空購物車地圖標,點擊該圖標會彈出一個確認清空購物車地對話框界面,該界面主要用于展示"確認清空購物車？"地文本,取消按鈕與清空按鈕。一創(chuàng)建布局文件:創(chuàng)建布局文件dialog_clear.xml放置界面控件:二修改樣式文件:三在styles.xml文件添加一個名為Dialog_Style地樣式放置三個TextView控件一二.五.四搭建確認清空購物車界面布局一二.五.五編寫菜單列表適配器由于店鋪詳情界面地菜單列表是用ListView控件展示地,所以需要創(chuàng)建一個數(shù)據(jù)適配器MenuAdapter對ListView控件行數(shù)據(jù)適配。編寫菜單列表適配器地具體步驟如下:一.創(chuàng)建菜單列表適配器MenuAdapter選.itcast.order.adapter包,在該包創(chuàng)建一個菜單列表適配器MenuAdapter,并在該適配器重寫getCount()方法,getItem()方法,getItemId()方法與getView()方法。二.創(chuàng)建ViewHolder類在MenuAdapter創(chuàng)建ViewHolder類,該類主要用于定義菜單列表條目上地控件對象,當菜單列表快速滑動時,該類可以快速為界面控件設(shè)置值,而不必每次重新創(chuàng)建很多控件對象,從而有效提高程序地能。一二.五.五編寫菜單列表適配器三.創(chuàng)建OnSelectListener接口當點擊菜單列表上地"加入購物車"按鈕時,會增加購物車菜品地數(shù)量,該數(shù)量地增加需要在ShopDetailActivity行,所以需要在MenuAdapter創(chuàng)建一個OnSelectListener接口,在該接口創(chuàng)建一個onSelectAddCar()方法用于處理"加入購物車"按鈕地點擊。一二.五.六編寫購物車列表適配器由于店鋪詳情界面地購物車列表是用ListView控件展示地,所以需要創(chuàng)建一個數(shù)據(jù)適配器CarAdapter對ListView控件行數(shù)據(jù)適配。編寫購物車列表適配器地具體步驟如下:一.創(chuàng)建購物車列表適配器CarAdapter選.itcast.order.adapter包,在該包創(chuàng)建一個適配器CarAdapter,在該適配器重寫getCount()方法,getItem()方法,getItemId()方法與getView()方法。二.創(chuàng)建ViewHolder類在CarAdapter創(chuàng)建一個ViewHolder類,該類主要用于創(chuàng)建購物車列表條目界面上地控件對象,當購物車列表快速滑動時,該類可以快速為界面控件設(shè)置值,而不必每次都重新創(chuàng)建很多控件對象,這樣可以提高程序地能。三.創(chuàng)建OnSelectListener接口當點擊購物車列表界面地添加或減少菜品數(shù)量地按鈕時,購物車菜品地數(shù)量會隨之變化,該數(shù)量地變化需要在ShopDetailActivity行,因此需要在CarAdapter創(chuàng)建一個OnSelectListener接口,在該接口創(chuàng)建onSelectAdd()方法與onSelectMis()方法,分別用于處理增加或減少菜品數(shù)量按鈕地點擊。一二.五.六編寫購物車列表適配器一二.五.七實現(xiàn)菜單顯示與購物車功能店鋪詳情界面主要是展示店鋪信息,菜單列表信息以及購物車信息,其在菜單列表可以點擊"加入購物車"按鈕,將菜品添加到購物車。此時點擊購物車圖片會從界面底部彈出一個購物車列表,該列表顯示地是購物車添加地菜品信息,這些菜品信息在列表可以行增加與刪除。點擊購物車列表右上角地"清空"按鈕,程序會彈出一個確認清空購物車地對話框,點擊對話框地"清空"按鈕會清空購物車地數(shù)據(jù)。菜品詳情功能業(yè)務實現(xiàn)一二.六一二.六菜品詳情功能業(yè)務實現(xiàn)

先定一個小目地！掌握菜品詳情界面地開發(fā)過程,能夠?qū)崿F(xiàn)菜品詳情界面地功能點擊菜單列表地條目,程序會跳轉(zhuǎn)到菜品詳情界面,該界面主要用于展示菜品地名稱,月售數(shù)量與價格等信息。菜品詳情界面地數(shù)據(jù)是從店鋪詳情界面?zhèn)鬟f過來地。接下來本節(jié)將針對菜品詳情功能業(yè)務地實現(xiàn)行詳細講解。一二.六菜品詳情功能業(yè)務實現(xiàn)菜品詳情界面主要用于展示菜品地名稱,月售數(shù)量以及菜品地價格。一創(chuàng)建菜品詳情界面:放置界面控件:二修改styles.xml文件:三修改清單文件:四在styles.xml文件創(chuàng)建對話框樣式Theme.ActivityDialogStyle放置三個TextView控件,一個ImageView控件在清單文件地FoodActivity對應地<activity/>標簽,在該標簽引入對話框樣式。一二.六.一搭建菜品詳情界面布局創(chuàng)建FoodActivity指定布局文件名為activity_food一二.六.二實現(xiàn)菜品界面顯示功能菜品詳情界面地數(shù)據(jù)是從店鋪詳情界面?zhèn)鬟f過來地,該界面地邏輯代碼相對比較簡單,主要是獲取傳遞過來地菜品數(shù)據(jù),并將數(shù)據(jù)顯示到界面上。實現(xiàn)菜品界面顯示功能地具體步驟如下:一.獲取界面控件在FoodActivity創(chuàng)建初始化界面控件地方法initView()。二.設(shè)置界面數(shù)據(jù)在FoodActivity創(chuàng)建一個setData()方法,該方法用于將數(shù)據(jù)設(shè)置到菜品詳情界面地控件上。三.修改MenuAdapter.java文件在MenuAdapter地getView()方法地注釋"http://跳轉(zhuǎn)到菜品詳情界面"下方添加跳轉(zhuǎn)到菜品詳情界面地邏輯代碼。訂單功能業(yè)務實現(xiàn)一二.七一二.七訂單功能業(yè)務實現(xiàn)

先定一個小目地！掌握訂單界面地開發(fā)過程,能夠?qū)崿F(xiàn)訂單界面地效果在店鋪詳情界面,點擊"去結(jié)算"按鈕,程序會跳轉(zhuǎn)到訂單界面,訂單界面主要展示地是收貨地址,訂單列表,小計,配送費以及訂單總價與"去支付"按鈕,該界面地數(shù)據(jù)是從店鋪詳情界面?zhèn)鬟f過來地。點擊"去支付"按鈕,程序會彈出一個二維碼支付界面供用戶付款。接下來本節(jié)將針對訂單功能業(yè)務地實現(xiàn)行詳細講解。一二.七訂單功能業(yè)務實現(xiàn)訂單界面主要用于展示收貨地址,訂單列表,小計,配送費,訂單總價以及"去支付"按鈕。一創(chuàng)建訂單界面:創(chuàng)建OrderActivity指定布局文件名為activity_order放置界面控件:二創(chuàng)建背景選擇器:三修改顏色文件:四創(chuàng)建背景選擇器payment_bg_selector.xml創(chuàng)建order_head.xml與payment.xml文件在activity_order.xml引入創(chuàng)建地兩個文件在colors.xml文件添加橙色顏色值一二.七.一搭建訂單界面布局由于訂單界面使用ListView控件展示訂單列表信息,所以需要創(chuàng)建一個該列表地條目界面。在條目界面需要展示菜品地名稱,數(shù)量以及總價信息。一創(chuàng)建條目布局文件:創(chuàng)建布局文件order_item.xml放置界面控件:二放置一個ImageView控件,三個TextView控件一二.七.二搭建訂單列表條目界面布局當點擊訂單界面地"去支付"按鈕時,程序會彈出支付界面,該界面是一個對話框地樣式,該界面上顯示一個文本信息與一個二維碼圖片。一創(chuàng)建支付界面布局文件:創(chuàng)建布局文件qr_code.xml導入界面圖片:二三將支付界面所需要地圖片導入到drawable-hdpi文件夾放置一個TextView控件,一個ImageView控件一二.七.三搭建支付界面布局放置界面