Android應(yīng)用開發(fā)案例教程課件

張霞深圳職業(yè)技術(shù)學(xué)院Android應(yīng)用開發(fā)案例教程（AndroidStudio第二版）

第8章

分享美食Android應(yīng)用開發(fā)案例教程（AndroidStudio第二版）8.1項(xiàng)目介紹8.2項(xiàng)目制作8.3項(xiàng)目可拓展的地方章目錄8.1項(xiàng)目介紹8.1.1主要技術(shù)8.1.2運(yùn)行截屏8.1.3項(xiàng)目的圖片資源8.1.4項(xiàng)目的JSON資源8.1.5項(xiàng)目的文件清單8.1.6工程準(zhǔn)備8.1項(xiàng)目介紹寫這個(gè)項(xiàng)目的初衷有兩個(gè)：1這門課程的期末考核方案可以是課程設(shè)計(jì)、機(jī)試，或筆試，如果采用課程設(shè)計(jì)考核學(xué)生，教師最好能展示一個(gè)樣本，有完整主題，有多種布局呈現(xiàn)，讓學(xué)生有一個(gè)模仿和參考樣本。2這門課如果安排了實(shí)訓(xùn)學(xué)時(shí)，在學(xué)生實(shí)訓(xùn)操作中，一個(gè)適當(dāng)規(guī)模的樣本，能給學(xué)生啟發(fā)、模仿和拓展，而且拓展的空間要盡可能大一些。本次設(shè)計(jì)的App主題為分享美食，介紹八大菜系和一些菜譜，圖文并茂。8.1.1主要技術(shù)App主題為分享美食。美食愛好者都喜歡收集一些菜譜，這里使用個(gè)人收集的文字和圖片作為素材。項(xiàng)目主頁采用流行的側(cè)滑菜單(Menu)和卡片視圖(CardView)，自定義圖標(biāo)，項(xiàng)目從網(wǎng)絡(luò)獲取和解析JSON數(shù)據(jù)。項(xiàng)目使用了多種布局呈現(xiàn)效果：CardView卡片式布局NavigationView導(dǎo)航視圖RecyclerView循環(huán)調(diào)用CollapsingToolbar折疊效果CardView適用于實(shí)現(xiàn)卡片式布局效果，實(shí)際上CardView也是一個(gè)Framelayout，只是額外提供了圓角和陰影效果，看上去有立體的感覺。我們可以在CardView上添加一個(gè)布局，再加入文字和圖片。8.1.1主要技術(shù)——卡片視圖CardViewCardView布局8.1.1主要技術(shù)——導(dǎo)航視圖NavigationViewNavigationView通常與抽屜布局(Drawerlayout)結(jié)合使用，實(shí)現(xiàn)良好的側(cè)滑體驗(yàn)，側(cè)滑默認(rèn)是左側(cè)側(cè)滑。NavigationView有兩個(gè)屬性，分別headerlayout和menu，headerlayout用于顯示頭部的布局，menu用于建立菜單。NavigationView8.1.1主要技術(shù)——循環(huán)視圖RecyclerViewRecyclerView循環(huán)視圖，適用于批量數(shù)據(jù)展示，與經(jīng)典的Listview相比，更加強(qiáng)大和靈活。RecyclerView循環(huán)調(diào)用數(shù)據(jù)8.1.1主要技術(shù)——折疊CollapsingToolbarCollapsingToolbar折疊效果，可使圖片和文字滾動(dòng)，可設(shè)置顏色和背景，也可設(shè)置title部分不滾動(dòng)。CollapsingToololbar效果8.1.2運(yùn)行截屏主頁主頁的側(cè)滑菜單尚待建設(shè)頁面8.1.2運(yùn)行截屏作品列表作品內(nèi)容

上作品內(nèi)容下8.1.3項(xiàng)目的圖片資源SVG意為可縮放矢量圖形（ScalableVectorGraphics），使用XML格式定義圖像。SVG圖標(biāo)可用作Web應(yīng)用程序或移動(dòng)應(yīng)用程序的圖標(biāo)或圖像按鈕，也可用作徽標(biāo)。使用SVG圖標(biāo)的優(yōu)點(diǎn)：1、可以輕松地按比例放大和縮小圖標(biāo)，具體取決于要顯示的位置及屏幕尺寸。2、優(yōu)于位圖，按比例放大或縮小時(shí)SVG圖標(biāo)仍然看起來不錯(cuò)。位圖放大時(shí)趨于像素化，縮小時(shí)會(huì)失去像素。SVG圖標(biāo)SVG文件的導(dǎo)入方法鼠標(biāo)右鍵單擊res的drawable文件夾，new->VectorAsset->Localfile命令（如下左圖），再選擇相應(yīng)的路徑將svg文件導(dǎo)入，就會(huì)出現(xiàn)對(duì)應(yīng)的xml文件（如下右圖）。

8.1.3項(xiàng)目的圖片資源下圖是導(dǎo)入drawable的素材文件，導(dǎo)入的是后綴名為.svg的圖標(biāo)文件和三個(gè)png文件。App會(huì)通過網(wǎng)絡(luò)JSON文件中的地址，調(diào)用相應(yīng)的網(wǎng)絡(luò)圖片，查看其中的img屬性就可見到網(wǎng)絡(luò)地址。導(dǎo)入工程的圖標(biāo)、圖片導(dǎo)入的圖片資源網(wǎng)絡(luò)訪問的圖片

例如"img":"/images/2022/07/02/shu.jpg"8.1.4項(xiàng)目的JSON資源-÷×+項(xiàng)目的JSON資源是一個(gè)JSON文件。需要在網(wǎng)上存放這個(gè)JSON資源。一個(gè)辦法是去開源網(wǎng)站申請(qǐng)一個(gè)免費(fèi)空間，但是這樣的免費(fèi)空間不能保證一直能正常使用。第二個(gè)辦法是搭建一個(gè)臨時(shí)的網(wǎng)站，到根目錄新建test路徑，放入JSON文件，使用localhost服務(wù)器來測試項(xiàng)目。https:///test/food.json點(diǎn)擊下載food.json文件數(shù)據(jù)存放網(wǎng)址/p/education/d/education/git/raw/master/food.json-÷×8.1.4項(xiàng)目的JSON資源免費(fèi)空間沒辦法保證能使用多久，建議搭建一個(gè)測試網(wǎng)站以供練習(xí)。如果將本機(jī)作為web服務(wù)器，ip地址localhost或者均不能作為手機(jī)模擬器的訪問網(wǎng)址，Android給的ip是，例如放到web服務(wù)器的test路徑，https:///test/food.json點(diǎn)擊下載food.json文件工程名稱是AzureCG項(xiàng)目共有8個(gè)java文件，其中有3個(gè)是Activity文件。項(xiàng)目共有12個(gè)xml文件，其中8個(gè)是布局文件，1個(gè)Menu文件，3個(gè)是Values文件。8.1.5項(xiàng)目的文件清單Value目錄專門用于存放項(xiàng)目使用到的各類數(shù)據(jù)目錄，不同類型的數(shù)據(jù)存放在不同的文件中。312strings.xml：定義字符串和數(shù)值colors.xml：定義顏色和顏色字串?dāng)?shù)值styles.xml：定義樣式8.1.5項(xiàng)目的文件清單項(xiàng)目的java文件項(xiàng)目的drawable文件夾項(xiàng)目的XML文件工程項(xiàng)目名稱是Azurecg。教材提供的main壓縮包已經(jīng)把素材、一些簡單的布局文件和Java文件放里面了，讀者請(qǐng)先創(chuàng)建工程項(xiàng)目Azurecg，包名是com.myapp.azurecg.azurecg，然后復(fù)制main文件夾到工程，即可開始后面的工作。關(guān)于main文件夾的簡要說明:8.1.6工程準(zhǔn)備相應(yīng)的素材資源已提供在drawable目錄下將values下的strings.xml件進(jìn)行如下修改，方便后面的Activity調(diào)用：12<resources>

<stringname="app_name">AzureCG</string>

<stringname="open">Open</string>

<stringname="close">Close</string>

<stringname="hello_blank_fragment">Helloblankfragment</string>

</resources>注意：main壓縮包里的colors.xml和style.xml與工程自動(dòng)創(chuàng)建的文件相比，有添加。8.1.6工程準(zhǔn)備若工程缺少相應(yīng)的包，需檢查一下的GredleScript下build.gredle(Project:Azurecg)以及build.grade(Module：app)是否存在。項(xiàng)目運(yùn)行時(shí)應(yīng)保持聯(lián)網(wǎng)狀態(tài)。在注冊(cè)文件AndroidManifest.xml中添加聯(lián)網(wǎng)許可授權(quán)。

<uses-permissionandroid:name="android.permission.INTERNET"/>348.1項(xiàng)目介紹8.2項(xiàng)目制作8.3項(xiàng)目可拓展的地方章目錄8.2.1完善主布局文件8.2.2側(cè)滑菜單的跳轉(zhuǎn)8.2.3設(shè)計(jì)列表的布局文件8.2.4完善主控制文件8.2.5ReyclerViewAdapter適配器8.2.6設(shè)計(jì)列表的控制文件8.2.7設(shè)計(jì)內(nèi)容的控制文件8.2.8完善配置文件8.2項(xiàng)目制作8.2.1完善主布局文件主頁布局文件activity_main.xml包含卡片視圖設(shè)計(jì)和菜單選項(xiàng)設(shè)計(jì)，需要分三步完成。設(shè)計(jì)主頁的第一個(gè)CardView（卡片視圖）框架，其ID為@+id/anime_card。在activity_main.xml中查找注釋“<!--美食卡片視圖-->”，然后在CardView標(biāo)簽下嵌套一個(gè)線性布局，加入布局代碼。步驟一創(chuàng)建菜單選項(xiàng)，設(shè)計(jì)drawermenu.xml文件。先在res文件夾下創(chuàng)建menu文件夾，鼠標(biāo)右鍵單擊menu文件夾，選擇new->menuresoursefile命令創(chuàng)建該XML文件。該文件類型為menu，存儲(chǔ)為res/layout/menu/drawermenu.xml。步驟二8.2.1完善主布局文件設(shè)計(jì)側(cè)滑欄菜單NavigationView。需要注意的是，NavigationView必須設(shè)計(jì)在<drawlayout>標(biāo)簽內(nèi)部的最后位置。在activity_main.xml中查找注釋“<!--在這個(gè)位置加入NavigationView，很重要!-->”，然后在標(biāo)簽</android.support.v4.widget.DrawerLayout>前嵌套如下代碼：步驟三<

android.support.design.widget.NavigationView

android:id="@+id/nv"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"

android:background="@color/white"

app:headerLayout="@layout/drawer_header"

app:itemIconTint="@color/darkgray"

app:itemTextColor="@color/darkgray"

app:itemBackground="?android:attr/selectableItemBackground"

app:menu="@menu/drawermenu">

<

/android.support.design.widget.NavigationView>

8.2.1完善主布局文件步驟三的菜單選項(xiàng)設(shè)計(jì)（drawermenu.xml）完成，就可以看看頭部設(shè)計(jì)效果。頭部設(shè)計(jì)（drawer_header.xml）是個(gè)簡單的線性布局，已經(jīng)在main壓縮包中，直接調(diào)用。它的效果如下左圖，在后面項(xiàng)目運(yùn)行正常時(shí)會(huì)呈現(xiàn)下面的效果。drawer_header.xml的設(shè)計(jì)效果activity_main.xml布局效果activity_main.xml布局融合了頭部設(shè)計(jì)drawer_header.xml和菜單選項(xiàng)設(shè)計(jì)drawermenu.xml8.2.2側(cè)滑菜單的跳轉(zhuǎn)單擊側(cè)滑欄菜單，可跳轉(zhuǎn)到不同的Fragment界面。Fragment（碎片）為適配大屏幕的Android設(shè)備而設(shè)立?？梢园袴ragment當(dāng)成界面的組成部分，一個(gè)Activity的界面可以由多個(gè)不同的Fragment組成。Fragment擁有自己的生命周期，可以接收、處理用戶的事件，減少程序員在Activity里編寫事件處理的工作。更為重要的是，可以動(dòng)態(tài)地添加、替換和移除某個(gè)Fragment。項(xiàng)目只簡單創(chuàng)建3個(gè)Fragment文件用來測試，3個(gè)文件分別是fragment_collection.xml、fragment_home.xml、fragment_logout.xml。8.2.2側(cè)滑菜單的跳轉(zhuǎn)創(chuàng)建Fragment類在資源目錄res的layout文件夾中創(chuàng)建Fragment類，且類型為Fragment(Blank)。鼠標(biāo)右鍵單擊layout文件夾，選擇new->Fragment->Fragment(Blank)命令，分別命名為Collection、Home、Logout，名字的首字母要大寫，系統(tǒng)會(huì)自動(dòng)生成相應(yīng)的Java文件。12fragment_collection.xml需做輕微修改，加背景圖并修改文字。fragment_home.xml及fragment_logout.xml不用做任何修改。8.2.3設(shè)計(jì)列表的布局文件在“主頁”界面點(diǎn)擊“美食”，跳轉(zhuǎn)到作品列表，作品列表布局文件是activity_list.xml。作品列表界面里有美食的八大菜系，單擊菜系后，可以跳轉(zhuǎn)到相應(yīng)菜系的介紹界面。設(shè)計(jì)列表布局前，需要先設(shè)計(jì)列表的行布局list_row_item.xml文件，雖然列表文件沒有直接引用該xml文件，但java程序會(huì)調(diào)用行布局文件。列表布局和列表行布局都放在layout文件夾。列表行布局效果8.2.4完善主控制文件設(shè)計(jì)完布局后，完善控制程序，首先對(duì)actvities包的MainActivity文件進(jìn)行補(bǔ)充。左側(cè)功能欄的跳轉(zhuǎn)單擊左側(cè)菜單時(shí)，程序?qū)⒃镜闹黜撛O(shè)置為隱藏（其ID為layout_home），顯示幀布局（其ID為flcontent），再通過MainActivity文件控制幀布局的信息。當(dāng)再次單擊主頁時(shí)，程序組再恢復(fù)主頁設(shè)置為顯示（其ID為layout_home）。12主頁卡片視圖（CardView）的跳轉(zhuǎn)程序的重點(diǎn)是調(diào)用Intent，將打包好的數(shù)據(jù)傳遞給ListActivity。8.2.5ReyclerViewAdapter適配器RecyclerView可以替代ListView和GridView顯示列表數(shù)據(jù)和網(wǎng)格數(shù)據(jù)，它需要RecyclerView.Adapter適配器，它的調(diào)用會(huì)被放到后面的ListActivity程序來介紹。創(chuàng)建一個(gè)RecyclerViewAdapter類，用于將打包好的數(shù)組進(jìn)行統(tǒng)一處理。給每個(gè)數(shù)據(jù)項(xiàng)設(shè)置監(jiān)聽，并將數(shù)據(jù)用Intent打包后傳送給特定的Activity。128.2.6設(shè)計(jì)列表的控制文件下面對(duì)八大菜系列表的控制文件ListActivity.Java進(jìn)行代碼補(bǔ)充。接收J(rèn)SON數(shù)據(jù)根據(jù)MainActivity傳過來的數(shù)據(jù)進(jìn)行相應(yīng)的操作，例如，在MainActivity中已經(jīng)給Intent對(duì)象賦值putExtra("Itemtitle","美食")，那么這里的任務(wù)就是將“美食”標(biāo)簽對(duì)應(yīng)的網(wǎng)址取出來，要顯示的美食信息來自網(wǎng)絡(luò)JSON文件。12JSON數(shù)據(jù)解析對(duì)從網(wǎng)絡(luò)獲取的JSON數(shù)據(jù)進(jìn)行處理，將JSON數(shù)據(jù)添加到數(shù)組，并將數(shù)據(jù)顯示到ListActivity，需要調(diào)用model包的ListItem類。8.2.7設(shè)計(jì)內(nèi)容的控制文件對(duì)ListItemActivity.java進(jìn)行補(bǔ)充。該程序可對(duì)上一個(gè)程序RecyclerViewAdapter中單擊列表后傳過來的數(shù)據(jù)進(jìn)行處理。打開布局文件activity_list_item.xml顯示具體信息，該布局設(shè)計(jì)效果如圖所示。在ListItemActivity.java中添加代碼。

川菜的內(nèi)容頁8.2.7完善配置文件配置文件manifest的完整代碼如下：<?xmlversion="1.0"encoding="utf-8"?><manifestxmlns:android="/apk/res/android"package="com.myapp.azurecg.azurecg"><!--在這里加入聯(lián)網(wǎng)代碼--><uses-permissionandroid:name="android.permission.INTERNET"/><applicationandroid:allowBackup="true"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"