第12章綜合項(xiàng)目——仿美團(tuán)外賣《Android移動(dòng)開發(fā)基礎(chǔ)案例教程（第3版）》

了解仿美團(tuán)外賣項(xiàng)目概述，能夠描述項(xiàng)目的開發(fā)環(huán)境、模塊結(jié)構(gòu)

掌握服務(wù)器的搭建方法，能夠獨(dú)立搭建服務(wù)器

了解仿美團(tuán)外賣項(xiàng)目各界面，能夠描述各界面顯示的信息學(xué)習(xí)目標(biāo)/Target

掌握店鋪列表界面的開發(fā)方法，能夠?qū)崿F(xiàn)店鋪列表界面的顯示功能

掌握店鋪詳情界面的開發(fā)方法，能夠獨(dú)立實(shí)現(xiàn)購物車功能

掌握訂單界面的開發(fā)方法，能夠?qū)崿F(xiàn)訂單界面

掌握菜品詳情界面的開發(fā)方法，能夠?qū)崿F(xiàn)菜品詳情界面的顯示功能學(xué)習(xí)目標(biāo)/Target章節(jié)概述/Summary為了幫助讀者鞏固第1～11章講解的Android知識(shí)，本章要開發(fā)一款仿美團(tuán)外賣的項(xiàng)目，該項(xiàng)目界面與我們平?？吹降拿缊F(tuán)外賣界面比較類似，展示的內(nèi)容包括店鋪、菜單、購物車、訂單與支付等信息。為了讓讀者能夠熟練掌握仿美團(tuán)外賣項(xiàng)目中用到的知識(shí)點(diǎn)，接下來我們將從項(xiàng)目分析開始，一步一步帶領(lǐng)讀者開發(fā)仿美團(tuán)外賣項(xiàng)目的各個(gè)功能。目錄/Contents0102項(xiàng)目分析效果展示03服務(wù)器數(shù)據(jù)準(zhǔn)備04店鋪功能業(yè)務(wù)實(shí)現(xiàn)目錄/Contents0506店鋪詳情功能業(yè)務(wù)實(shí)現(xiàn)菜品詳情功能業(yè)務(wù)實(shí)現(xiàn)07訂單功能業(yè)務(wù)實(shí)現(xiàn)項(xiàng)目分析12.1

先定一個(gè)小目標(biāo)！了解仿美團(tuán)外賣項(xiàng)目概述，能夠描述項(xiàng)目的開發(fā)背景12.1.1項(xiàng)目概述仿美團(tuán)外賣項(xiàng)目是一個(gè)網(wǎng)上訂餐項(xiàng)目，該項(xiàng)目中包含訂餐的店鋪、各店鋪的菜單、購物車及訂單與支付等內(nèi)容。12.1.1項(xiàng)目概述用戶操作流程12.1.1項(xiàng)目概述店鋪列表展示所有商家點(diǎn)擊店鋪店鋪詳情與菜單瀏覽并添加購物車點(diǎn)擊“去結(jié)算”訂單確認(rèn)界面核對菜品信息點(diǎn)擊“去支付”完成付款支付流程

先定一個(gè)小目標(biāo)！了解仿美團(tuán)外賣的開發(fā)環(huán)境，能夠描述項(xiàng)目的開發(fā)環(huán)境12.1.2開發(fā)環(huán)境類別工具與技術(shù)版本/說明開發(fā)工具AndroidStudioJellyfish|2023.3.1Java環(huán)境JDK17(LTS)服務(wù)器Tomcat10.1.26目標(biāo)平臺(tái)AndroidAPI35(Android15)開發(fā)環(huán)境相關(guān)12.1.2開發(fā)環(huán)境

先定一個(gè)小目標(biāo)！了解仿美團(tuán)外賣的模塊，能夠描述模塊的結(jié)構(gòu)12.1.3模塊說明仿美團(tuán)外賣項(xiàng)目主要包含兩大模塊，分別為店鋪和訂單。12.1.3模塊說明項(xiàng)目模塊結(jié)構(gòu)12.1.3模塊說明店鋪模塊：包含店鋪列表界面與店鋪詳情界面，店鋪列表界面用于顯示各個(gè)店鋪的信息，店鋪詳情界面中展示店鋪的公告信息、配送信息、菜單列表信息及購物車列表信息。訂單模塊：包含訂單界面與支付界面，訂單界面用于顯示購物車中已添加的菜品信息，支付界面用于顯示付款的二維碼信息。效果展示12.2

先定一個(gè)小目標(biāo)！了解店鋪列表界面，能夠描述店鋪列表界面顯示的信息12.2.1店鋪列表界面程序啟動(dòng)后，首先會(huì)進(jìn)入店鋪列表界面，該界面展示的是一個(gè)由店鋪信息組成的列表與一個(gè)水平滑動(dòng)的廣告欄。12.2.1店鋪列表界面界面功能概述：店鋪列表界面

先定一個(gè)小目標(biāo)！了解店鋪詳情界面，能夠描述店鋪詳情界面顯示的信息12.2.2店鋪詳情界面點(diǎn)擊店鋪列表中任意一個(gè)條目或廣告欄中的任意一張圖片，程序都會(huì)跳轉(zhuǎn)到對應(yīng)的店鋪詳情界面。界面功能概述：12.2.2店鋪詳情界面點(diǎn)擊菜單列表中任意一個(gè)條目右側(cè)的“加入購物車”按鈕可以將相應(yīng)菜品添加到購物車中，在界面左下角可以看到購物車中添加的菜品數(shù)量。界面功能概述：12.2.2店鋪詳情界面12.2.2店鋪詳情界面點(diǎn)擊購物車圖片會(huì)彈出一個(gè)列表，該列表展示的是已點(diǎn)的菜品信息，點(diǎn)擊購物車列表中每個(gè)條目右側(cè)的“+”或“-”按鈕，可增加或減少對應(yīng)的菜品數(shù)量。如果加入購物車的菜品總價(jià)達(dá)不到起送價(jià)格，界面右下角的按鈕上會(huì)顯示還差多少錢起送，否則顯示一個(gè)黃色的“去結(jié)算”按鈕。界面功能概述：12.2.2店鋪詳情界面在購物車列表的右上角有一個(gè)“清空”按鈕，點(diǎn)擊該按鈕會(huì)彈出一個(gè)確認(rèn)清空購物車的界面，界面為對話框樣式。界面功能概述：

先定一個(gè)小目標(biāo)！了解菜品詳情界面，能夠描述菜品詳情界面顯示的信息12.2.3菜品詳情界面12.2.3菜品詳情界面在店鋪詳情界面中，點(diǎn)擊菜單列表的任意一個(gè)條目，程序都會(huì)跳轉(zhuǎn)到菜品詳情界面。菜品詳情界面是一個(gè)對話框。界面功能概述：菜品詳情界面

先定一個(gè)小目標(biāo)！了解訂單界面，能夠描述訂單界面顯示的信息12.2.4訂單界面在店鋪詳情界面中，點(diǎn)擊“去結(jié)算”按鈕會(huì)跳轉(zhuǎn)到訂單界面，該界面通過一個(gè)列表展示購物車中的菜品信息，點(diǎn)擊“去支付”按鈕，程序會(huì)彈出支付界面，該界面是一個(gè)顯示支付二維碼的對話框。12.2.4訂單界面界面功能概述：訂單界面和支付界面服務(wù)器數(shù)據(jù)準(zhǔn)備12.3

先定一個(gè)小目標(biāo)！掌握服務(wù)器的搭建方法，能夠獨(dú)立完成服務(wù)器的搭建12.3服務(wù)器數(shù)據(jù)準(zhǔn)備仿美團(tuán)外賣項(xiàng)目涉及的數(shù)據(jù)存放在一個(gè)小型、簡易的服務(wù)器（這里以Tomcat10.1.26為例）中，服務(wù)器中存放數(shù)據(jù)的目錄結(jié)構(gòu)如下圖。12.3服務(wù)器數(shù)據(jù)準(zhǔn)備存放數(shù)據(jù)的目錄結(jié)構(gòu)12.3服務(wù)器數(shù)據(jù)準(zhǔn)備存放數(shù)據(jù)的目錄結(jié)構(gòu)介紹：ROOT文件夾在apache-tomcat-10.1.26\webapps\目錄下，表示Tomcat服務(wù)器的根目錄。order文件夾存放的是仿美團(tuán)外賣項(xiàng)目用到的所有數(shù)據(jù)。img文件夾存放的是圖片資源，包含店鋪圖片和菜單圖片。shop_list_data.json文件中存放的是店鋪列表界面與店鋪詳情界面的數(shù)據(jù)。12.3服務(wù)器數(shù)據(jù)準(zhǔn)備示例{

"id":1,

"shopName":"快樂檸檬",

"saleNum":1023,

"offerPrice":20,

"distributionCost":5,

"feature":"廣外大街飲品回頭率第5名",

"time":"配送約30分鐘",

"banner":"6:8080/order/img/banner/banner1.png",

"shopPic":"6:8080/order/img/shop/shop1.png",

"shopNotice":"公告：奶茶味道很棒喲！",

……}shop_list_data.json文件部分內(nèi)容。12.3服務(wù)器數(shù)據(jù)準(zhǔn)備需要將shop_list_data.json文件的IP地址修改為自己的計(jì)算機(jī)的IP地址，否則訪問不到Tomcat服務(wù)器中的數(shù)據(jù)。如果想要啟動(dòng)Tomcat服務(wù)器，可以在apache-tomcat-10.1.26\bin包中找到startup.bat文件，雙擊該文件即可。注意店鋪功能業(yè)務(wù)實(shí)現(xiàn)12.4

先定一個(gè)小目標(biāo)！掌握標(biāo)題欄界面布局的搭建方法，能夠獨(dú)立完成訂單界面的布局設(shè)計(jì)12.4.1搭建標(biāo)題欄界面布局12.4.1搭建標(biāo)題欄界面布局為了便于實(shí)現(xiàn)代碼重復(fù)利用，將返回鍵和標(biāo)題欄抽取出來單獨(dú)放在一個(gè)布局文件（title_bar.xml）中。下面講解如何搭建標(biāo)題欄界面布局。12.4.1搭建標(biāo)題欄界面布局標(biāo)題欄界面搭建標(biāo)題欄界面布局創(chuàng)建一個(gè)工程，將其命名為Order，指定包名為cn.itcast.order，添加一個(gè)Activity，將其命名為ShopActivity，指定布局文件名為activity_shop。步驟1步驟2步驟3放置界面控件。放置2個(gè)TextView控件，分別用于顯示返回鍵和界面標(biāo)題。12.4.1搭建標(biāo)題欄界面布局導(dǎo)入界面圖片。將界面所需要的圖片導(dǎo)入drawable-hdpi文件夾中，將項(xiàng)目的圖標(biāo)app_icon.png導(dǎo)入mipmap-hdpi文件夾。步驟4創(chuàng)建背景選擇器。創(chuàng)建一個(gè)背景選擇器go_back_selector.xml，根據(jù)按鈕按下和彈起的狀態(tài)來切換它的背景圖片。go_back_selector.xml文件核心代碼：搭建標(biāo)題欄界面布局步驟5<selectorxmlns:android="/apk/res/android">

//設(shè)置按鈕按下時(shí)顯示灰色圖片<itemandroid:drawable="@drawable/iv_back_selected"android:state_pressed="true"/>

//按鈕彈起時(shí)顯示白色圖片<itemandroid:drawable="@drawable/iv_back"/></selector>12.4.1搭建標(biāo)題欄界面布局修改AndroidManifest.xml文件。引入程序的圖標(biāo)。android:icon="@mipmap/app_icon"android:roundIcon="@mipmap/app_icon"搭建標(biāo)題欄界面布局12.4.1搭建標(biāo)題欄界面布局去掉默認(rèn)標(biāo)題欄。在AndroidManifest.xml文件的<application>標(biāo)簽中修改android:theme屬性，刪除默認(rèn)標(biāo)題欄。android:theme="@style/Theme.AppCompat.NoActionBar"

先定一個(gè)小目標(biāo)！掌握廣告欄界面布局的搭建方法，能夠獨(dú)立完成廣告欄界面的布局設(shè)計(jì)12.4.2搭建廣告欄界面布局廣告欄界面主要用于展示廣告圖片信息與跟隨圖片滑動(dòng)的小圓點(diǎn)，當(dāng)前顯示的廣告圖片對應(yīng)的小圓點(diǎn)顏色為白色，其余小圓點(diǎn)的顏色為灰色。下面講解如何搭建廣告欄界面布局。12.4.2搭建廣告欄界面布局廣告欄界面12.4.2搭建廣告欄界面布局搭建廣告欄界面布局創(chuàng)建廣告欄界面的布局文件。在res/layout文件夾中，創(chuàng)建一個(gè)布局文件adbanner.xml。步驟1步驟2步驟3自定義控件ViewPagerIndicator。創(chuàng)建views包，在views包中創(chuàng)建ViewPagerIndicator類并繼承LinearLayout類。放置界面控件。放置1個(gè)ViewPager控件用于顯示水平滑動(dòng)的廣告圖片，自定義1個(gè)控件ViewPagerIndicator來顯示界面上的小圓點(diǎn)。步驟4修改dimens.xml文件。在dimens.xml文件中添加圓點(diǎn)距離的代碼。dimens.xml文件核心代碼：12.4.2搭建廣告欄界面布局步驟5<dimenname="view_indicator_padding">5dp</dimen>創(chuàng)建indicator_on.xml和indicator_off.xml文件。indicator_on.xml文件核心代碼：<shapexmlns:android="/apk/res/android"android:shape="oval"><sizeandroid:height="6dp"android:width="6dp"/><solidandroid:color="@android:color/white"/></shape>12.4.2搭建廣告欄界面布局搭建廣告欄界面布局indicator_off.xml文件核心代碼：<shapexmlns:android="/apk/res/android"android:shape="oval"><sizeandroid:height="6dp"android:width="6dp"/><solidandroid:color="#BCBCBC"/></shape>12.4.2搭建廣告欄界面布局搭建廣告欄界面布局

先定一個(gè)小目標(biāo)！掌握店鋪列表界面布局的搭建方法，能夠獨(dú)立完成店鋪列表界面的布局設(shè)計(jì)12.4.3搭建店鋪列表界面布局店鋪列表界面由一個(gè)標(biāo)題欄、一個(gè)廣告欄及一個(gè)店鋪列表組成，標(biāo)題欄主要用于展示該界面的標(biāo)題，廣告欄主要用于展示店鋪中的菜品廣告圖片，店鋪列表主要用于展示各店鋪的信息。下面講解如何搭建店鋪列表界面布局。12.4.3搭建店鋪列表界面布局12.4.3搭建店鋪列表界面布局店鋪列表界面搭建店鋪列表界面布局放置界面控件。引入title_bar.xml文件與adbanner.xml文件，放置1個(gè)自定義控件ShopListView。步驟1步驟2創(chuàng)建自定義控件ShopListView。在項(xiàng)目的cn.itcast.order.views包中創(chuàng)建ShopListView類繼承ListView類。ShopListView.java文件核心代碼：12.4.3搭建店鋪列表界面布局publicclassShopListViewextendsListView{publicShopListView(Contextcontext){super(context);}publicShopListView(Contextcontext,AttributeSetattrs){super(context,attrs);

}搭建店鋪列表界面布局12.4.3搭建店鋪列表界面布局publicShopListView(Contextcontext,AttributeSetattrs,intdefStyle){super(context,attrs,defStyle);}@OverrideprotectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){intexpandSpec=MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE>>2,MeasureSpec.AT_MOST);super.onMeasure(widthMeasureSpec,expandSpec);}}

先定一個(gè)小目標(biāo)！掌握店鋪列表?xiàng)l目界面布局的搭建方法，能夠獨(dú)立完成店鋪列表?xiàng)l目界面的布局設(shè)計(jì)12.4.4搭建店鋪列表?xiàng)l目界面布局在條目界面中需要展示店鋪圖片、店鋪名稱、月售數(shù)量、起送價(jià)格、配送費(fèi)、店鋪特色及配送時(shí)間。下面講解如何搭建店鋪列表?xiàng)l目界面布局。12.4.4搭建店鋪列表?xiàng)l目界面布局店鋪列表?xiàng)l目界面12.4.4搭建店鋪列表?xiàng)l目界面布局搭建店鋪列表?xiàng)l目界面布局創(chuàng)建店鋪列表?xiàng)l目界面的布局文件。在res/layout文件夾中，創(chuàng)建一個(gè)布局文件shop_item.xml。步驟1步驟2放置界面控件。包括放置1個(gè)ImageView控件、6個(gè)TextView控件。<shapexmlns:android="/apk/res/android"><solidandroid:color="@color/feature_bg_color"/><cornersandroid:radius="3dp"/></shape>12.4.4搭建店鋪列表?xiàng)l目界面布局步驟3創(chuàng)建feature_bg.xml文件。在該文件中設(shè)置一個(gè)4個(gè)角為圓角的矩形。feature_bg.xml文件核心代碼：搭建店鋪列表?xiàng)l目界面布局<itemandroid:state_pressed="true"><shapeandroid:shape="rectangle"><cornersandroid:radius="8dp"/><solidandroid:color="@color/item_bg_color"/></shape></item>12.4.4搭建店鋪列表?xiàng)l目界面布局創(chuàng)建條目界面的背景選擇器。創(chuàng)建背景選擇器item_bg_selector.xml，根據(jù)條目按下和彈起的狀態(tài)來變換它的背景顏色。item_bg_selector.xml文件核心代碼：步驟4當(dāng)條目按下時(shí)背景顯示為灰色搭建店鋪列表?xiàng)l目界面布局<itemandroid:state_pressed="false"><shapeandroid:shape="rectangle"><cornersandroid:radius="8dp"/><solidandroid:color="#ffffff"/></shape></item>12.4.4搭建店鋪列表?xiàng)l目界面布局當(dāng)條目彈起時(shí)背景顯示為白色步驟5修改colors.xml文件。在res/values文件夾的colors.xml文件中添加灰色與橙色的顏色值。<colorname="color_gray">#7e7e7e</color><colorname="feature_bg_color">#fff8e1</color><colorname="feature_text_color">#ff7d00</color><colorname="item_bg_color">#d4d4d4</color>

先定一個(gè)小目標(biāo)！掌握店鋪信息與菜品信息實(shí)體類的封裝方法，能夠獨(dú)立完成這兩個(gè)實(shí)體類的設(shè)計(jì)與實(shí)現(xiàn)12.4.5封裝店鋪信息與菜品信息的實(shí)體類為什么封裝店鋪信息和菜品信息的實(shí)體類？12.4.5封裝店鋪信息與菜品信息的實(shí)體類12.4.5封裝店鋪信息與菜品信息的實(shí)體類由于店鋪信息和菜品信息都包含很多屬性，所以我們需要?jiǎng)?chuàng)建ShopBean類與FoodBean類分別封裝店鋪信息和菜品信息的屬性。1.創(chuàng)建ShopBean類封裝店鋪信息的屬性12.4.5封裝店鋪信息與菜品信息的實(shí)體類選中cn.itcast.order包，在該包下創(chuàng)建bean包，在bean包中創(chuàng)建一個(gè)ShopBean類。由于該類的對象中存儲(chǔ)的信息需要在Activity之間進(jìn)行傳輸，所以將ShopBean類進(jìn)行序列化，即實(shí)現(xiàn)Serializable接口。12.4.5封裝店鋪信息與菜品信息的實(shí)體類publicclassShopBeanimplementsSerializable{privatestaticfinallongserialVersionUID=1L;//序列化時(shí)保持ShopBean類版本的兼容性

privateintid; //店鋪idprivateStringshopName;//店鋪名稱

privateintsaleNum; //月售數(shù)量

privateBigDecimalofferPrice;//起送價(jià)格

privateBigDecimaldistributionCost;//配送費(fèi)

privateStringfeature; //店鋪特色

privateStringtime; //配送時(shí)間

privateStringbanner; //廣告圖片

privateStringshopPic; //店鋪圖片

privateStringshopNotice;//店鋪公告

privateList<FoodBean>foodList;//菜單列表

}示例ShopBean.java文件部分代碼。2.創(chuàng)建FoodBean類封裝菜品信息的屬性12.4.5封裝店鋪信息與菜品信息的實(shí)體類在cn.itcast.order.bean包中創(chuàng)建一個(gè)FoodBean類并實(shí)現(xiàn)Serializable接口，該類中定義了菜品信息的所有屬性。12.4.5封裝店鋪信息與菜品信息的實(shí)體類publicclassFoodBeanimplementsSerializable{privatestaticfinallongserialVersionUID=1L; //序列化時(shí)保持FoodBean類版本的兼容性

privateintfoodId; //菜品idprivateStringfoodName; //菜品名稱

privateStringpopularity; //人氣

privateStringsaleNum; //月售數(shù)量

privateBigDecimalprice; //價(jià)格

privateintcount; //添加到購物車中的數(shù)量

privateStringfoodPic; //菜品圖片

publicintgetFoodId(){returnfoodId;

}

}示例FoodBean.java文件部分代碼。

先定一個(gè)小目標(biāo)！掌握廣告欄數(shù)據(jù)適配器的編寫方法，能夠獨(dú)立完成廣告欄數(shù)據(jù)適配器的開發(fā)12.4.6編寫廣告欄的數(shù)據(jù)適配器為什么需要編寫廣告欄的數(shù)據(jù)適配器？12.4.6編寫廣告欄的數(shù)據(jù)適配器店鋪列表界面上的廣告欄用到了ViewPager控件，為了給該控件填充數(shù)據(jù)，我們需要?jiǎng)?chuàng)建一個(gè)數(shù)據(jù)適配器AdBannerAdapter將獲取到的數(shù)據(jù)傳遞到創(chuàng)建的AdBannerFragment中，AdBannerFragment用于將接收到的數(shù)據(jù)設(shè)置到ViewPager控件上。12.4.6編寫廣告欄的數(shù)據(jù)適配器1.編寫數(shù)據(jù)適配器AdBannerAdapter在cn.itcast.order包中創(chuàng)建一個(gè)adapter包，并在該包中創(chuàng)建一個(gè)數(shù)據(jù)適配器AdBannerAdapter。12.4.6編寫廣告欄的數(shù)據(jù)適配器12.4.6編寫廣告欄的數(shù)據(jù)適配器publicvoidsetData(List<ShopBean>sbl){this.sbl=sbl;notifyDataSetChanged();}@NonNull@OverridepublicFragmentcreateFragment(intposition){Bundleargs=newBundle();if(sbl.size()>0)args.putSerializable("ad",sbl.get(position%sbl.size()));returnAdBannerFragment.newInstance(args);}@OverridepublicintgetItemCount(){returnInteger.MAX_VALUE;}示例AdBannerAdapter.java文件部分代碼。獲取數(shù)據(jù)并更新界面2.將數(shù)據(jù)設(shè)置到廣告欄界面上由于廣告欄界面上的ViewPager控件中需要顯示滑動(dòng)的廣告圖片，這些圖片可以使用Fragment來顯示，所以我們需要在項(xiàng)目中創(chuàng)建一個(gè)AdBannerFragment。同時(shí)廣告欄界面上顯示圖片需要用到Glide類，因此需要將glide庫添加到Order程序中。12.4.6編寫廣告欄的數(shù)據(jù)適配器在程序中加載廣告圖片時(shí)，由于這些圖片是網(wǎng)絡(luò)圖片，所以需要借助Glide類將網(wǎng)絡(luò)圖片顯示到界面上。由于Glide類存在于glide庫中，因此需要在項(xiàng)目中添加glide庫。在添加glide庫時(shí)，搜索內(nèi)容為com.github.bumptech.glide:glide，AndroidStudio會(huì)提供最新版本的glide庫，將其添加即可。12.4.6編寫廣告欄的數(shù)據(jù)適配器將數(shù)據(jù)設(shè)置到廣告欄界面上的具體步驟：（1）添加glide庫在項(xiàng)目的cn.itcast.order包中創(chuàng)建一個(gè)fragment包，在該包中創(chuàng)建一個(gè)AdBannerFragment，該Fragment用于將數(shù)據(jù)設(shè)置到廣告欄界面上。12.4.6編寫廣告欄的數(shù)據(jù)適配器（2）創(chuàng)建AdBannerFragment

先定一個(gè)小目標(biāo)！掌握店鋪列表數(shù)據(jù)適配器的編寫方法，能夠獨(dú)立完成店鋪列表數(shù)據(jù)適配器的開發(fā)12.4.7編寫店鋪列表的數(shù)據(jù)適配器為什么需要編寫店鋪列表的數(shù)據(jù)適配器？12.4.7編寫店鋪列表的數(shù)據(jù)適配器由于店鋪列表界面的列表是用ShopListView控件展示的，所以需要?jiǎng)?chuàng)建一個(gè)數(shù)據(jù)適配器ShopAdapter對ShopListView控件進(jìn)行數(shù)據(jù)適配。12.4.7編寫店鋪列表的數(shù)據(jù)適配器在cn.itcast.order.adapter包中創(chuàng)建一個(gè)店鋪列表的數(shù)據(jù)適配器ShopAdapter，在該數(shù)據(jù)適配器中重寫getCount()方法、getItem()方法、getItemId()方法和getView()方法，這些方法分別用于獲取列表中條目的總數(shù)、對應(yīng)的條目對象、條目對象的id、對應(yīng)的條目視圖。為了減少程序的緩存，需要在getView()方法中復(fù)用convertView。12.4.7編寫店鋪列表的數(shù)據(jù)適配器編寫店鋪列表的數(shù)據(jù)適配器的基本步驟：店鋪列表數(shù)據(jù)適配器的部分代碼。12.4.7編寫店鋪列表的數(shù)據(jù)適配器publicViewgetView(intposition,ViewconvertView,ViewGroupparent){finalViewHoldervh;//復(fù)用convertViewif(convertView==null){vh=newViewHolder();convertView=LayoutInflater.from(mContext).inflate(R.layout.shop_item,null);vh.tv_shop_name=convertView.findViewById(R.id.tv_shop_name);vh.tv_sale_num=convertView.findViewById(R.id.tv_sale_num);vh.tv_cost=convertView.findViewById(R.id.tv_cost);vh.tv_feature=convertView.findViewById(R.id.tv_feature);vh.tv_time=convertView.findViewById(R.id.tv_time);vh.iv_shop_pic=convertView.findViewById(R.id.iv_shop_pic);convertView.setTag(vh);}else{vh=(ViewHolder)convertView.getTag();}

先定一個(gè)小目標(biāo)！掌握店鋪列表界面顯示功能的實(shí)現(xiàn)方法，能夠獨(dú)立完成店鋪列表界面顯示功能的開發(fā)12.4.8實(shí)現(xiàn)店鋪列表界面顯示功能12.4.8實(shí)現(xiàn)店鋪列表界面顯示功能店鋪列表界面展示的數(shù)據(jù)都是從Tomcat服務(wù)器上獲取的，所以需要使用OkHttpClient類向服務(wù)器請求數(shù)據(jù)，獲取到數(shù)據(jù)之后需要通過Gson庫解析獲取到的JSON數(shù)據(jù)并顯示到界面上。下面講解如何實(shí)現(xiàn)店鋪列表界面顯示功能。12.4.8實(shí)現(xiàn)店鋪列表界面顯示功能實(shí)現(xiàn)店鋪列表界面顯示功能的具體步驟：（1）添加okhttp庫項(xiàng)目中需要使用OkHttpClient類向服務(wù)器請求數(shù)據(jù)，所以需要將okhttp庫添加到項(xiàng)目中。（2）添加Gson庫（3）創(chuàng)建Constant類項(xiàng)目中的數(shù)據(jù)需要通過網(wǎng)絡(luò)請求從Tomcat服務(wù)器上獲取，所以需要?jiǎng)?chuàng)建一個(gè)Constant類存放各界面在服務(wù)器上請求數(shù)據(jù)時(shí)使用的接口地址。首先選中cn.itcast.order包，在該包中創(chuàng)建utils包，在utils包中創(chuàng)建一個(gè)Constant類，在該類中創(chuàng)建店鋪列表的接口地址。項(xiàng)目中需要用Gson庫解析獲取到的JSON數(shù)據(jù)，所以需要將Gson庫添加到項(xiàng)目中。packagecn.itcast.order.utils;publicclassConstant{

//內(nèi)網(wǎng)接口地址publicstaticfinalStringWEB_SITE="http://:8080/order";//店鋪列表的接口地址

publicstaticfinalStringREQUEST_SHOP_URL="/shop_list_data.json";}示例創(chuàng)建Constant類存放各界面在服務(wù)器上請求數(shù)據(jù)時(shí)使用的接口地址。12.4.8實(shí)現(xiàn)店鋪列表界面顯示功能

Constant.java文件代碼：12.4.8實(shí)現(xiàn)店鋪列表界面顯示功能（4）創(chuàng)建JsonParse類從Tomcat服務(wù)器上獲取的店鋪數(shù)據(jù)是JSON數(shù)據(jù)，JSON數(shù)據(jù)不能直接顯示到界面上，所以需要在cn.itcast.order.utils包中創(chuàng)建一個(gè)JsonParse類用于解析獲取到的JSON數(shù)據(jù)。示例創(chuàng)建Constant類存放各界面在服務(wù)器上請求數(shù)據(jù)時(shí)使用的接口地址。JsonParse.java文件核心代碼：publicList<ShopBean>getShopList(Stringjson){

Gsongson=newGson();//使用Gson庫解析JSON數(shù)據(jù)

//創(chuàng)建一個(gè)TypeToken的匿名子類對象，并調(diào)用對象的getType()方法

TypelistType=newTypeToken<List<ShopBean>>(){

}.getType();

List<ShopBean>shopList=gson.fromJson(json,listType);//把獲取到的數(shù)據(jù)集合存到shopList中

returnshopList;}12.4.8實(shí)現(xiàn)店鋪列表界面顯示功能（5）將數(shù)據(jù)顯示到店鋪列表界面上由于需要將數(shù)據(jù)顯示到店鋪列表界面上，所以需要在ShopActivity中創(chuàng)建2個(gè)方法，分別是init()方法與initData()方法。這2個(gè)方法分別用于初始化界面控件與獲取并顯示界面數(shù)據(jù)。①初始化界面控件。②獲取并顯示界面數(shù)據(jù)。③顯示廣告欄數(shù)據(jù)。④退出當(dāng)前應(yīng)用程序。12.4.8實(shí)現(xiàn)店鋪列表界面顯示功能（6）修改colors.xml文件由于店鋪列表界面的標(biāo)題欄背景顏色為藍(lán)色，為了便于顏色的管理，我們需要在res/values文件夾的colors.xml文件中添加一個(gè)藍(lán)色的顏色值。<colorname="blue_color">#2e8de9</color>店鋪詳情功能業(yè)務(wù)實(shí)現(xiàn)12.5

先定一個(gè)小目標(biāo)！掌握店鋪詳情界面布局的搭建方法，能夠獨(dú)立完成店鋪詳情界面的布局設(shè)計(jì)12.5.1搭建店鋪詳情界面布局在仿美團(tuán)外賣的項(xiàng)目中，點(diǎn)擊店鋪列表?xiàng)l目時(shí)，程序會(huì)跳轉(zhuǎn)到店鋪詳情界面，該界面主要用于展示店鋪名稱、店鋪圖片、店鋪公告、配送時(shí)間、店鋪的菜單列表、購物車及購物車列表等信息。下面講解如何搭建店鋪詳情界面布局。12.5.1搭建店鋪詳情界面布局店鋪詳情界面（1）店鋪詳情界面（2）12.5.1搭建店鋪詳情界面布局搭建店鋪詳情界面布局創(chuàng)建店鋪詳情界面。創(chuàng)建ShopDetailActivity，指定布局文件名為activity_shop_detail。步驟1步驟2步驟3放置界面控件。包括放置1個(gè)TextView控件、1個(gè)View控件、1個(gè)ListView控件。導(dǎo)入界面圖片。將店鋪詳情界面所需圖片導(dǎo)入到drawable-hdpi文件夾中。步驟4創(chuàng)建shop_detail_head.xml文件。在res/layout文件夾中創(chuàng)建shop_detail_head.xml，包括放置3個(gè)TextView控件、2個(gè)ImageView控件。12.5.1搭建店鋪詳情界面布局搭建店鋪詳情界面布局創(chuàng)建shop_car.xml文件。在res/layout文件夾中創(chuàng)建shop_car.xml，放置4個(gè)TextView，并引入car.xml布局文件。創(chuàng)建car.xml，在該文件中放置1個(gè)ImageView控件、1個(gè)TextView控件。步驟5步驟6步驟7修改colors.xml文件。在該文件中設(shè)置控件的背景顏色或文本顏色。colors.xml文件核心代碼：創(chuàng)建car_list.xml文件。包括放置2個(gè)TextView控件、1個(gè)ListView控件。12.5.1搭建店鋪詳情界面布局<colorname="light_gray">#d9d9d9</color><colorname="car_gray_color">#454545</color><colorname="account_color">#ff9500</color><colorname="account_gray_color">#535353</color>搭建店鋪詳情界面布局創(chuàng)建corner_bg.xml文件。在該文件中設(shè)置一個(gè)4個(gè)角為圓角的矩形。corner_bg.xml文件核心代碼：步驟812.5.1搭建店鋪詳情界面布局<shapexmlns:android="/apk/res/android"android:shape="rectangle"><solidandroid:color="#FFFFFF"/><cornersandroid:radius="3dp"/><strokeandroid:width="1dp"android:color="@color/light_gray"/></shape>搭建店鋪詳情界面布局創(chuàng)建badge_bg.xml文件。在該文件中定義一個(gè)紅色的圓形。badge_bg.xml文件核心代碼：步驟912.5.1搭建店鋪詳情界面布局<shapexmlns:android="/apk/res/android"android:shape="rectangle"><gradientandroid:endColor="#fe451d"android:startColor="#fe957f"android:type="linear"/><cornersandroid:radius="180dp"/></shape>搭建店鋪詳情界面布局修改styles.xml文件。在res/values文件夾的styles.xml文件中創(chuàng)建badge_style樣式。styles.xml文件核心代碼：步驟1012.5.1搭建店鋪詳情界面布局<stylename="badge_style"><itemname="android:layout_width">wrap_content</item><itemname="android:layout_height">wrap_content</item><itemname="android:minHeight">14dp</item><itemname="android:minWidth">14dp</item><itemname="android:paddingLeft">2dp</item><itemname="android:paddingRight">2dp</item>搭建店鋪詳情界面布局12.5.1搭建店鋪詳情界面布局

<itemname="android:textColor">@android:color/white</item><itemname="android:visibility">gone</item><itemname="android:gravity">center</item><itemname="android:background">@drawable/badge_bg</item><itemname="android:textStyle">bold</item><itemname="android:textSize">10sp</item></style>

先定一個(gè)小目標(biāo)！掌握菜單列表?xiàng)l目界面布局的搭建方法，能夠獨(dú)立完成菜單列表?xiàng)l目界面的布局設(shè)計(jì)12.5.2搭建菜單列表?xiàng)l目界面布局在條目界面中需要展示菜品的名稱、人氣、月售數(shù)量與好評度、價(jià)格及“加入購物車”按鈕。下面講解如何搭建菜單列表?xiàng)l目界面布局。12.5.2搭建菜單列表?xiàng)l目界面布局菜單列表?xiàng)l目界面12.5.2搭建菜單列表?xiàng)l目界面布局搭建菜單列表?xiàng)l目界面布局創(chuàng)建菜單列表?xiàng)l目界面布局文件。在res/layout文件夾中，創(chuàng)建一個(gè)布局文件menu_item.xml。步驟1步驟2步驟3放置界面控件。包括放置4個(gè)TextView控件、1個(gè)ImageView控件、1個(gè)Button控件。導(dǎo)入界面圖片。將菜單列表?xiàng)l目界面所需圖片導(dǎo)入drawable-hdpi文件夾中。步驟4修改colors.xml文件。設(shè)置菜單列表?xiàng)l目界面中菜品價(jià)格的文本顏色是紅色。colors.xml文件核心代碼：12.5.2搭建菜單列表?xiàng)l目界面布局<colorname="price_red">#ff5339</color>搭建菜單列表?xiàng)l目界面布局創(chuàng)建背景選擇器。首先選中drawable文件夾，右擊并在彈出的菜單中選擇“New”→“Drawableresourcefile”選項(xiàng)，創(chuàng)建一個(gè)背景選擇器menu_item_bg_selector.xml。實(shí)現(xiàn)當(dāng)菜單列表?xiàng)l目界面按下時(shí)背景顯示灰色（#d4d4d4）；當(dāng)菜單列表?xiàng)l目界面彈起時(shí)背景顯示白色。menu_item_bg_selector.xml文件核心代碼：步驟512.5.2搭建菜單列表?xiàng)l目界面布局<selectorxmlns:android="/apk/res/android"><itemandroid:drawable="@color/item_bg_color"android:state_pressed="true"/><itemandroid:drawable="@android:color/white"/></selector>搭建菜單列表?xiàng)l目界面布局創(chuàng)建背景選擇器add_car_selector.xml。實(shí)現(xiàn)當(dāng)“加入購物車”按鈕按下時(shí)背景顯示灰色圖片（add_car_selected.png）；當(dāng)“加入購物車”按鈕彈起時(shí)背景顯示藍(lán)色圖片（add_car_normal.png）。add_car_selector.xml文件核心代碼：12.5.2搭建菜單列表?xiàng)l目界面布局<selectorxmlns:android="/apk/res/android"><itemandroid:drawable="@drawable/add_car_selected"android:state_pressed="true"/><itemandroid:drawable="@drawable/add_car_normal"/></selector>

先定一個(gè)小目標(biāo)！掌握購物車列表?xiàng)l目界面布局的搭建方法，能夠獨(dú)立完成購物車列表?xiàng)l目界面的布局設(shè)計(jì)12.5.3搭建購物車列表?xiàng)l目界面布局在店鋪詳情界面底部有一個(gè)購物車圖片，點(diǎn)擊該圖片會(huì)彈出一個(gè)購物車列表，該列表用ListView控件來展示購物車中添加的菜單信息。下面講解如何搭建購物車列表?xiàng)l目界面布局。12.5.3搭建購物車列表?xiàng)l目界面布局菜單列表?xiàng)l目界面12.5.3搭建購物車列表?xiàng)l目界面布局搭建購物車列表?xiàng)l目界面布局創(chuàng)建購物車列表?xiàng)l目界面布局文件。在res/layout文件夾中，創(chuàng)建一個(gè)布局文件car_item.xml。步驟1步驟2步驟3放置界面控件。包括放置3個(gè)TextView控件、2個(gè)ImageView控件。導(dǎo)入界面圖片。將購物車列表?xiàng)l目界面所需圖片導(dǎo)入drawable-hdpi文件夾中。步驟4創(chuàng)建slide_bottom_to_top.xml文件。在res/anim文件夾中創(chuàng)建slide_bottom_to_top.xml文件。slide_bottom_to_top.xm文件核心代碼：<setxmlns:android="/apk/res/android"android:interpolator="@android:anim/accelerate_interpolator">12.5.3搭建購物車列表?xiàng)l目界面布局搭建購物車列表?xiàng)l目界面布局<translateandroid:duration="500"android:fromYDelta="100.0%"android:toYDelta="10.000002%"/><alphaandroid:duration="500"android:fromAlpha="0.0"android:toAlpha="1.0"/></set>12.5.3搭建購物車列表?xiàng)l目界面布局實(shí)現(xiàn)平移動(dòng)畫效果實(shí)現(xiàn)透明度的漸變動(dòng)畫

先定一個(gè)小目標(biāo)！掌握確認(rèn)清空購物車界面布局的搭建方法，能夠獨(dú)立完成確認(rèn)清空購物車界面的布局設(shè)計(jì)12.5.4搭建確認(rèn)清空購物車界面布局在購物車列表界面的右上角有一個(gè)“清空”按鈕，點(diǎn)擊該按鈕會(huì)彈出一個(gè)確認(rèn)清空購物車界面，該界面主要用于展示“確認(rèn)清空購物車？”的文本、“取消”按鈕和“清空”按鈕。下面講解如何搭建確認(rèn)清空購物車界面布局。12.5.4搭建確認(rèn)清空購物車界面布局確認(rèn)清空購物車界面12.5.4搭建確認(rèn)清空購物車界面布局搭建確認(rèn)清空購物車界面布局創(chuàng)建確認(rèn)清空購物車界面的布局文件。在res/layout文件夾中，創(chuàng)建一個(gè)布局文件dialog_clear.xml。步驟1步驟2步驟3修改styles.xml文件。在res/layout文件夾的styles.xml文件中添加一個(gè)名為Dialog_Style的樣式。styles.xml文件核心代碼：放置界面控件。放置3個(gè)TextView控件。<stylename="Dialog_Style"parent="@android:style/Theme.Dialog"><!--設(shè)置界面無標(biāo)題欄--><itemname="android:windowIsFloating">true</item><!--對話框浮在Activity之上--><itemname="android:windowIsTranslucent">true</item><!--設(shè)置對話框背景透明--><itemname="android:windowNoTitle">true</item><!--設(shè)置界面無標(biāo)題-->12.5.4搭建確認(rèn)清空購物車界面布局搭建確認(rèn)清空購物車界面布局

<!--設(shè)置窗體背景透明--><itemname="android:windowBackground">@android:color/transparent</item><!--設(shè)置對話框內(nèi)容背景透明--><itemname="android:background">@android:color/transparent</item><!--設(shè)置對話框背景有半透明遮障層--><itemname="android:backgroundDimEnabled">true</item></style>12.5.4搭建確認(rèn)清空購物車界面布局

先定一個(gè)小目標(biāo)！掌握菜單列表數(shù)據(jù)適配器的編寫方法，能夠獨(dú)立完成菜單列表數(shù)據(jù)適配器的開發(fā)12.5.5編寫菜單列表的數(shù)據(jù)適配器為什么需要編寫菜單列表的數(shù)據(jù)適配器？12.5.5編寫菜單列表的數(shù)據(jù)適配器由于店鋪詳情界面中的菜單列表是用ListView控件展示的，所以需要?jiǎng)?chuàng)建一個(gè)數(shù)據(jù)適配器MenuAdapter對ListView控件進(jìn)行數(shù)據(jù)適配。12.5.5編寫菜單列表的數(shù)據(jù)適配器編寫菜單列表的數(shù)據(jù)適配器的基本步驟：12.5.5編寫菜單列表的數(shù)據(jù)適配器（1）創(chuàng)建菜單列表的數(shù)據(jù)適配器MenuAdapter在cn.itcast.order.adapter包中創(chuàng)建一個(gè)菜單列表的數(shù)據(jù)適配器MenuAdapter，并在該數(shù)據(jù)適配器中重寫getCount()方法、getItem()方法、getItemId()方法和getView()方法。（2）創(chuàng)建ViewHolder類在MenuAdapter中創(chuàng)建一個(gè)ViewHolder類，該類主要用于定義菜單列表?xiàng)l目上的控件對象。當(dāng)菜單列表快速滑動(dòng)時(shí)，該類可以快速為界面控件設(shè)置值，而不必每次重新創(chuàng)建很多控件對象，從而有效地提高程序的性能。（3）創(chuàng)建OnSelectListener接口當(dāng)點(diǎn)擊菜單列表上的“加入購物車”按鈕時(shí)，會(huì)增加購物車中菜品的數(shù)量。該數(shù)量的增加需要在ShopDetailActivity中進(jìn)行，所以需要在MenuAdapter中創(chuàng)建一個(gè)OnSelectListener接口，在該接口中創(chuàng)建一個(gè)onSelectAddCar()方法用于處理“加入購物車”按鈕的點(diǎn)擊事件，接著在ShopDetailActivity中實(shí)現(xiàn)OnSelectListener接口中的方法。12.5.5編寫菜單列表的數(shù)據(jù)適配器12.5.5編寫菜單列表的數(shù)據(jù)適配器convertView.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewv){//跳轉(zhuǎn)到菜品詳情界面

}});vh.btn_add_car.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){//“加入購物車”按鈕的點(diǎn)擊事件

onSelectListener.onSelectAddCar(position);}});編寫菜單列表的數(shù)據(jù)庫適配器。示例MenuAdapter.java文件核心代碼每個(gè)條目的點(diǎn)擊事件菜單列表?xiàng)l目中“加入購物車”按鈕的點(diǎn)擊事件

先定一個(gè)小目標(biāo)！掌握購物車列表數(shù)據(jù)適配器的編寫方法，能夠獨(dú)立完成購物車列表數(shù)據(jù)適配器的開發(fā)12.5.6編寫購物車列表的數(shù)據(jù)適配器為什么需要編寫購物車列表的數(shù)據(jù)適配器？12.5.6編寫購物車列表的數(shù)據(jù)適配器由于店鋪詳情界面中的購物車列表是用ListView控件展示的，所以需要?jiǎng)?chuàng)建一個(gè)數(shù)據(jù)適配器CarAdapter對ListView控件進(jìn)行數(shù)據(jù)適配。12.5.6編寫購物車列表的數(shù)據(jù)適配器編寫購物車列表的數(shù)據(jù)適配器的基本步驟：12.5.6編寫購物車列表的數(shù)據(jù)適配器（1）創(chuàng)建購物車列表的數(shù)據(jù)適配器CarAdapter選中cn.itcast.order.adapter包，在該包中創(chuàng)建一個(gè)數(shù)據(jù)適配器CarAdapter，在該數(shù)據(jù)適配器中重寫getCount()方法、getItem()方法、getItemId()方法和getView()方法。（2）創(chuàng)建ViewHolder類在CarAdapter中創(chuàng)建一個(gè)ViewHolder類，該類主要用于創(chuàng)建購物車列表?xiàng)l目界面上的控件對象。當(dāng)購物車列表快速滑動(dòng)時(shí)，該類可以快速為界面控件設(shè)置值，而不必每次都重新創(chuàng)建很多控件對象，這樣可以提高程序的性能。12.5.6編寫購物車列表的數(shù)據(jù)適配器（3）創(chuàng)建OnSelectListener接口當(dāng)點(diǎn)擊購物車列表界面的“+”按鈕或“?”按鈕時(shí)，購物車中菜品的數(shù)量會(huì)隨之變化，該數(shù)量的變化需要在ShopDetailActivity中進(jìn)行。因此需要在CarAdapter中創(chuàng)建一個(gè)OnSelectListener接口，在該接口中創(chuàng)建onSelectAdd()方法與onSelectMis()方法，分別用于處理“+”按鈕和“?”按鈕的點(diǎn)擊事件，接著在ShopDetailActivity中實(shí)現(xiàn)該接口中的方法。if(bean!=null){vh.tv_food_name.setText(bean.getFoodName());vh.tv_food_count.setText(bean.getCount()+"");BigDecimalcount=BigDecimal.valueOf(bean.getCount());vh.tv_food_price.setText("￥"+bean.getPrice().multiply(count));}vh.iv_add.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){

onSelectListener.onSelectAdd(position,vh.tv_food_count,vh.tv_food_price);}});編寫購物車列表的數(shù)據(jù)庫適配器。示例CarAdapter.java文件核心代碼將購物車條目數(shù)據(jù)設(shè)置到對應(yīng)控件上實(shí)現(xiàn)“+”按鈕的點(diǎn)擊事件12.5.6編寫購物車列表的數(shù)據(jù)適配器12.5.6編寫購物車列表的數(shù)據(jù)適配器vh.iv_minus.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){

onSelectListener.onSelectMis(position,vh.tv_food_count,vh.tv_food_price);}});實(shí)現(xiàn)“-”按鈕的點(diǎn)擊事件

先定一個(gè)小目標(biāo)！掌握菜單顯示與購物車功能的實(shí)現(xiàn)方法，能夠獨(dú)立完成菜單顯示與購物車功能的開發(fā)12.5.7實(shí)現(xiàn)菜單顯示與購物車功能12.5.7實(shí)現(xiàn)菜單顯示與購物車功能店鋪詳情界面主要用于展示店鋪信息、菜單列表信息及購物車列表信息，具體如下。界面功能概述：在菜單列表中可以點(diǎn)擊“加入購物車”按鈕，將菜品添加到購物車中。點(diǎn)擊購物車圖片會(huì)從界面底部彈出一個(gè)購物車列表，該列表顯示的是購物車中添加的菜品信息，對于這些菜品信息，在列表中可以進(jìn)行增加和減少數(shù)量的操作。點(diǎn)擊購物車列表右上角的“清空”按鈕，程序會(huì)彈出一個(gè)確認(rèn)清空購物車的界面。點(diǎn)擊界面中的“清空”按鈕會(huì)清空購物車中的數(shù)據(jù)。菜品詳情功能業(yè)務(wù)實(shí)現(xiàn)12.6

先定一個(gè)小目標(biāo)！掌握菜品詳情界面布局的搭建方法，能夠獨(dú)立完成菜品詳情界面的布局設(shè)計(jì)12.6.1搭建菜品詳情界面布局菜品詳情界面主要用于展示菜品的圖片、名稱、月售數(shù)量與好評度及價(jià)格。下面講解如何搭建菜品詳情界面布局。12.6.1搭建菜品詳情界面布局菜品詳情界面12.6.1搭建菜品詳情界面布局搭建菜品詳情界面布局創(chuàng)建菜品詳情界面。在cn.itcast.order.activity包中創(chuàng)建一個(gè)FoodActivity，并指定其布局文件名為activity_food。步驟1步驟2放置界面控件。包括放置3個(gè)TextView控件、1個(gè)ImageView控件。<stylename="Theme.ActivityDialogStyle"parent="Theme.AppCompat.Light.NoActionBar"><!--設(shè)置對話框背景透明--><itemname="android:windowIsTranslucent">true</item>

步驟3修改styles.xml文件。在res/layout文件夾的styles.xml文件中創(chuàng)建一個(gè)對話框的樣式Theme.ActivityDialogStyle。styles.xml文件核心代碼：12.6.1搭建菜品詳情界面布局搭建菜品詳情界面布局<!--設(shè)置對話框背景有半透明遮障層--><itemname="android:backgroundDimEnabled">true</item>

<!--設(shè)置窗體內(nèi)容背景--><itemname="android:windowContentOverlay">@null</item><!--點(diǎn)擊對話框外的部分關(guān)閉該界面--><itemname="android:windowCloseOnTouchOutside">true</item><!--浮在Activity之上--><itemname="android:windowIsFloating">true</item></style>12.6.1搭建菜品詳情界面布局搭建菜品詳情界面布局<activityandroid:name=".activity.FoodActivity"android:theme="@style/Theme.ActivityDialogStyle"/>

步驟4修改AndroidManifest.xml文件。在AndroidManifest.xml中找到FoodActivity對應(yīng)的<activity/>標(biāo)簽，在該標(biāo)簽中引入對話框樣式。AndroidManifest.xml文件核心代碼：12.6.1搭建菜品詳情界面布局

先定一個(gè)小目標(biāo)！掌握菜品詳情界面顯示功能的實(shí)現(xiàn)方法，能夠獨(dú)立完成菜品詳情界面顯示功能的開發(fā)12.6.2實(shí)現(xiàn)菜品詳情界面顯示功能菜品詳情界面的數(shù)據(jù)是從店鋪詳情界面?zhèn)鬟f過來的，該界面的邏輯代碼相對比較簡單，主要實(shí)現(xiàn)的是獲取傳遞過來的菜品數(shù)據(jù)，并將數(shù)據(jù)顯示到界面上。下面講解如何實(shí)現(xiàn)菜品詳情界面顯示功能。12.6.2實(shí)現(xiàn)菜品詳情界面顯示功能12.6.2實(shí)現(xiàn)菜品詳情界面顯示功能實(shí)現(xiàn)菜品詳情界面顯示功能的具體步驟：（1）初始化界面控件在FoodActivity中創(chuàng)建初始化界面控件的方法initView()。（2）設(shè)置界面數(shù)據(jù)在FoodActivity中創(chuàng)建一個(gè)setData()方法，該方法用于將數(shù)據(jù)設(shè)置到菜品詳情界面的控件上。12.6.2實(shí)現(xiàn)菜品詳情界面顯示功能//從店鋪詳情界面?zhèn)鬟f過來的菜品數(shù)據(jù)bean=(FoodBean)getIntent().getSerializableExtra("food");//設(shè)置界面數(shù)據(jù)privatevoidsetData(){if(bean==null)return;tv_food_name.setText(bean.getFoodName());tv_sale_num.setText(bean.getSaleNum());tv_price.setText("￥"+bean.getPrice());

Glide.with(this).load(bean.getFoodPic()).error(R.mipmap.ic_launcher).into(iv_food_pic);}設(shè)置界面數(shù)據(jù)，將數(shù)據(jù)設(shè)置到菜品詳情界面的控件上。示例FoodActivity.java文件核心代碼將菜品圖片顯示到iv_food_pic控件上（3）修改MenuAdapter.java文件由于點(diǎn)擊菜單列表的條目時(shí)，程序會(huì)跳轉(zhuǎn)到菜品詳情界面，所以需要找到MenuAdapter中的getView()方法，在該方法的注釋“//跳轉(zhuǎn)到菜品詳情界面”下方添加跳轉(zhuǎn)到菜品詳情界面的邏輯代碼。12.6.2實(shí)現(xiàn)菜品詳情界面顯示功能跳轉(zhuǎn)到菜品詳情界面時(shí)把菜品的詳細(xì)信息傳遞到菜品詳情界面。示例MenuAdapter.java文件核心代碼if(bean==null)return;Intentintent=newIntent(mContext,FoodActivity.class);//把菜品的詳細(xì)信息傳遞到菜品詳情界面intent.putExtra("food",bean);mContext.startActivity(intent);訂單功能業(yè)務(wù)實(shí)現(xiàn)12.7

先定一個(gè)小目標(biāo)！掌握訂單界面布局的搭建方法，能夠獨(dú)立完成訂單界面的布局設(shè)計(jì)12.7.1搭建訂單界面布局訂單界面主要用于展示收貨地址、訂單列表、小計(jì)、配送費(fèi)、訂單總價(jià)及“去支付”按鈕。下面講解如何搭建訂單界面布局。12.7.1搭建訂單界面布局訂單界面和支付界面12.7.1搭建訂單界面布局搭建訂單界面布局創(chuàng)建訂單界面。在cn.itcast.order.activity包中創(chuàng)建一個(gè)OrderActivity，指定該Activity的布局文件名為activity_order。步驟1步驟2放置界面控件。創(chuàng)建order_head.xml與payment.xml文件，在activity_order.xml中引入創(chuàng)建的兩個(gè)文件。步驟3創(chuàng)建order_head.xml文件