Android应用开发案例教程课件

张霞深圳职业技术学院Android应用开发案例教程（AndroidStudio第二版）

第8章

分享美食Android应用开发案例教程（AndroidStudio第二版）8.1项目介绍8.2项目制作8.3项目可拓展的地方章目录8.1项目介绍8.1.1主要技术8.1.2运行截屏8.1.3项目的图片资源8.1.4项目的JSON资源8.1.5项目的文件清单8.1.6工程准备8.1项目介绍写这个项目的初衷有两个：1这门课程的期末考核方案可以是课程设计、机试，或笔试，如果采用课程设计考核学生，教师最好能展示一个样本，有完整主题，有多种布局呈现，让学生有一个模仿和参考样本。2这门课如果安排了实训学时，在学生实训操作中，一个适当规模的样本，能给学生启发、模仿和拓展，而且拓展的空间要尽可能大一些。本次设计的App主题为分享美食，介绍八大菜系和一些菜谱，图文并茂。8.1.1主要技术App主题为分享美食。美食爱好者都喜欢收集一些菜谱，这里使用个人收集的文字和图片作为素材。项目主页采用流行的侧滑菜单(Menu)和卡片视图(CardView)，自定义图标，项目从网络获取和解析JSON数据。项目使用了多种布局呈现效果：CardView卡片式布局NavigationView导航视图RecyclerView循环调用CollapsingToolbar折叠效果CardView适用于实现卡片式布局效果，实际上CardView也是一个Framelayout，只是额外提供了圆角和阴影效果，看上去有立体的感觉。我们可以在CardView上添加一个布局，再加入文字和图片。8.1.1主要技术——卡片视图CardViewCardView布局8.1.1主要技术——导航视图NavigationViewNavigationView通常与抽屉布局(Drawerlayout)结合使用，实现良好的侧滑体验，侧滑默认是左侧侧滑。NavigationView有两个属性，分别headerlayout和menu，headerlayout用于显示头部的布局，menu用于建立菜单。NavigationView8.1.1主要技术——循环视图RecyclerViewRecyclerView循环视图，适用于批量数据展示，与经典的Listview相比，更加强大和灵活。RecyclerView循环调用数据8.1.1主要技术——折叠CollapsingToolbarCollapsingToolbar折叠效果，可使图片和文字滚动，可设置颜色和背景，也可设置title部分不滚动。CollapsingToololbar效果8.1.2运行截屏主页主页的侧滑菜单尚待建设页面8.1.2运行截屏作品列表作品内容

上作品内容下8.1.3项目的图片资源SVG意为可缩放矢量图形（ScalableVectorGraphics），使用XML格式定义图像。SVG图标可用作Web应用程序或移动应用程序的图标或图像按钮，也可用作徽标。使用SVG图标的优点：1、可以轻松地按比例放大和缩小图标，具体取决于要显示的位置及屏幕尺寸。2、优于位图，按比例放大或缩小时SVG图标仍然看起来不错。位图放大时趋于像素化，缩小时会失去像素。SVG图标SVG文件的导入方法鼠标右键单击res的drawable文件夹，new->VectorAsset->Localfile命令（如下左图），再选择相应的路径将svg文件导入，就会出现对应的xml文件（如下右图）。

8.1.3项目的图片资源下图是导入drawable的素材文件，导入的是后缀名为.svg的图标文件和三个png文件。App会通过网络JSON文件中的地址，调用相应的网络图片，查看其中的img属性就可见到网络地址。导入工程的图标、图片导入的图片资源网络访问的图片

例如"img":"/images/2022/07/02/shu.jpg"8.1.4项目的JSON资源-÷×+项目的JSON资源是一个JSON文件。需要在网上存放这个JSON资源。一个办法是去开源网站申请一个免费空间，但是这样的免费空间不能保证一直能正常使用。第二个办法是搭建一个临时的网站，到根目录新建test路径，放入JSON文件，使用localhost服务器来测试项目。https:///test/food.json点击下载food.json文件数据存放网址/p/education/d/education/git/raw/master/food.json-÷×8.1.4项目的JSON资源免费空间没办法保证能使用多久，建议搭建一个测试网站以供练习。如果将本机作为web服务器，ip地址localhost或者均不能作为手机模拟器的访问网址，Android给的ip是，例如放到web服务器的test路径，https:///test/food.json点击下载food.json文件工程名称是AzureCG项目共有8个java文件，其中有3个是Activity文件。项目共有12个xml文件，其中8个是布局文件，1个Menu文件，3个是Values文件。8.1.5项目的文件清单Value目录专门用于存放项目使用到的各类数据目录，不同类型的数据存放在不同的文件中。312strings.xml：定义字符串和数值colors.xml：定义颜色和颜色字串数值styles.xml：定义样式8.1.5项目的文件清单项目的java文件项目的drawable文件夹项目的XML文件工程项目名称是Azurecg。教材提供的main压缩包已经把素材、一些简单的布局文件和Java文件放里面了，读者请先创建工程项目Azurecg，包名是com.myapp.azurecg.azurecg，然后复制main文件夹到工程，即可开始后面的工作。关于main文件夹的简要说明:8.1.6工程准备相应的素材资源已提供在drawable目录下将values下的strings.xml件进行如下修改，方便后面的Activity调用：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与工程自动创建的文件相比，有添加。8.1.6工程准备若工程缺少相应的包，需检查一下的GredleScript下build.gredle(Project:Azurecg)以及build.grade(Module：app)是否存在。项目运行时应保持联网状态。在注册文件AndroidManifest.xml中添加联网许可授权。

<uses-permissionandroid:name="android.permission.INTERNET"/>348.1项目介绍8.2项目制作8.3项目可拓展的地方章目录8.2.1完善主布局文件8.2.2侧滑菜单的跳转8.2.3设计列表的布局文件8.2.4完善主控制文件8.2.5ReyclerViewAdapter适配器8.2.6设计列表的控制文件8.2.7设计内容的控制文件8.2.8完善配置文件8.2项目制作8.2.1完善主布局文件主页布局文件activity_main.xml包含卡片视图设计和菜单选项设计，需要分三步完成。设计主页的第一个CardView（卡片视图）框架，其ID为@+id/anime_card。在activity_main.xml中查找注释“<!--美食卡片视图-->”，然后在CardView标签下嵌套一个线性布局，加入布局代码。步骤一创建菜单选项，设计drawermenu.xml文件。先在res文件夹下创建menu文件夹，鼠标右键单击menu文件夹，选择new->menuresoursefile命令创建该XML文件。该文件类型为menu，存储为res/layout/menu/drawermenu.xml。步骤二8.2.1完善主布局文件设计侧滑栏菜单NavigationView。需要注意的是，NavigationView必须设计在<drawlayout>标签内部的最后位置。在activity_main.xml中查找注释“<!--在这个位置加入NavigationView，很重要!-->”，然后在标签</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完善主布局文件步骤三的菜单选项设计（drawermenu.xml）完成，就可以看看头部设计效果。头部设计（drawer_header.xml）是个简单的线性布局，已经在main压缩包中，直接调用。它的效果如下左图，在后面项目运行正常时会呈现下面的效果。drawer_header.xml的设计效果activity_main.xml布局效果activity_main.xml布局融合了头部设计drawer_header.xml和菜单选项设计drawermenu.xml8.2.2侧滑菜单的跳转单击侧滑栏菜单，可跳转到不同的Fragment界面。Fragment（碎片）为适配大屏幕的Android设备而设立。可以把Fragment当成界面的组成部分，一个Activity的界面可以由多个不同的Fragment组成。Fragment拥有自己的生命周期，可以接收、处理用户的事件，减少程序员在Activity里编写事件处理的工作。更为重要的是，可以动态地添加、替换和移除某个Fragment。项目只简单创建3个Fragment文件用来测试，3个文件分别是fragment_collection.xml、fragment_home.xml、fragment_logout.xml。8.2.2侧滑菜单的跳转创建Fragment类在资源目录res的layout文件夹中创建Fragment类，且类型为Fragment(Blank)。鼠标右键单击layout文件夹，选择new->Fragment->Fragment(Blank)命令，分别命名为Collection、Home、Logout，名字的首字母要大写，系统会自动生成相应的Java文件。12fragment_collection.xml需做轻微修改，加背景图并修改文字。fragment_home.xml及fragment_logout.xml不用做任何修改。8.2.3设计列表的布局文件在“主页”界面点击“美食”，跳转到作品列表，作品列表布局文件是activity_list.xml。作品列表界面里有美食的八大菜系，单击菜系后，可以跳转到相应菜系的介绍界面。设计列表布局前，需要先设计列表的行布局list_row_item.xml文件，虽然列表文件没有直接引用该xml文件，但java程序会调用行布局文件。列表布局和列表行布局都放在layout文件夹。列表行布局效果8.2.4完善主控制文件设计完布局后，完善控制程序，首先对actvities包的MainActivity文件进行补充。左侧功能栏的跳转单击左侧菜单时，程序将原本的主页设置为隐藏（其ID为layout_home），显示帧布局（其ID为flcontent），再通过MainActivity文件控制帧布局的信息。当再次单击主页时，程序组再恢复主页设置为显示（其ID为layout_home）。12主页卡片视图（CardView）的跳转程序的重点是调用Intent，将打包好的数据传递给ListActivity。8.2.5ReyclerViewAdapter适配器RecyclerView可以替代ListView和GridView显示列表数据和网格数据，它需要RecyclerView.Adapter适配器，它的调用会被放到后面的ListActivity程序来介绍。创建一个RecyclerViewAdapter类，用于将打包好的数组进行统一处理。给每个数据项设置监听，并将数据用Intent打包后传送给特定的Activity。128.2.6设计列表的控制文件下面对八大菜系列表的控制文件ListActivity.Java进行代码补充。接收JSON数据根据MainActivity传过来的数据进行相应的操作，例如，在MainActivity中已经给Intent对象赋值putExtra("Itemtitle","美食")，那么这里的任务就是将“美食”标签对应的网址取出来，要显示的美食信息来自网络JSON文件。12JSON数据解析对从网络获取的JSON数据进行处理，将JSON数据添加到数组，并将数据显示到ListActivity，需要调用model包的ListItem类。8.2.7设计内容的控制文件对ListItemActivity.java进行补充。该程序可对上一个程序RecyclerViewAdapter中单击列表后传过来的数据进行处理。打开布局文件activity_list_item.xml显示具体信息，该布局设计效果如图所示。在ListItemActivity.java中添加代码。

川菜的内容页8.2.7完善配置文件配置文件manifest的完整代码如下：<?xmlversion="1.0"encoding="utf-8"?><manifestxmlns:android="/apk/res/android"package="com.myapp.azurecg.azurecg"><!--在这里加入联网代码--><uses-permissionandroid:name="android.permission.INTERNET"/><applicationandroid:allowBackup="true"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"