主编：钟元生 赵圣鲁

第六章 多页面切换效果设计

本讲内容 多页面切换效果了解 为选项卡对应添加内容 页面切换框架实现 多页面内容填充 Contents

6.1 本章案例流程 本章学习如何在 空白界面中，为下方的每个选项配置一个独立的页面，实现在多个页面间的切换功能。本章案例的实现主要分为以下三个部分： Code0601 空选项卡的配置 Code0602 为空选项卡填充页面 Code0603 使用内容填充选项卡 Contents

6.2 多页面切换效果了解 用户通过点击不同的选项，即可快速的跳转到不同的页面使用不同的功能，并且无须使用大量的返回操作，如果需要使用另一项功能，再次单击另一个选项卡即可，这无疑大大地增加了用户的体验舒适感。程序运行效果如图。 省控线查询页面 录取线查询页面 报考咨询页面 Contents

6.3 页面切换框架的实现 Code0602工程结构 6.3.1 项目结构 Code0601工程结构 Contents

6.3 页面切换框架的实现 6.3.1 项目结构 Contents Code0603工程结构（2） Code0603工程结构（1） 6.3.1 项目结构 页面模块解析图 Code0603工程结构（1） Code0603工程结构（2） Contents

6.3 页面切换框架的实现 6.3.2 Tabhost界面布局文件设计 <TabHost xmlns:android="http://schemas.android.com/apk/res/android" 2 android:id="@+id/mTabHost"………………………………………………为控件命名 3 android:layout_width="match_parent"………………………………设置宽度为100% 4 android:layout_height="match_parent"………………………………设置高度为100% 5 android:background="#ccbbaa">…………………………………………设置背景颜色 6 </TabHost> 6.3.2 Tabhost界面布局文件设计 在学习该章节前，我们首先需要建立一个Android项目，打开Android Studio编程环境，新建一个Android工程，在Application Name中填写Code0601，在Company Domain中填写cn.jxufe.iet。（单击本文本框） 在此之前，我们学习过了LinearLayout线性布局。而“豹考通”教学版的选项卡界面中，我们需要使用到一种全新的Tabhost布局。也就是说在整个布局的外围，我们需要使用一个<tabhost></tabhost>标签包裹住整个页面的内容。（单击本文本框） Contents

6.3 页面切换框架的实现 6.3.2 Tabhost界面布局文件设计 Contents 分析一下页面中有哪些要素。如右图。 1 <TabHost xmlns:android="http://schemas.android.com/apk/res/android" 2 android:id="@+id/mTabHost"………………………………… ………………为控件命名 3 android:layout_width="match_parent"…………………………………设置宽度为100% 4 android:layout_height="match_parent"…………………………………设置高度为100% 5 android:background="#ccbbaa">……………………………………………设置背景颜色 <LinearLayout android:layout_width="match_parent“ android:layout_height="match_parent“ android:orientation="vertical">……………………布局中的内容设置为垂直排布 </LinearLayout> </TabHost> 分析一下页面中有哪些要素。如右图。 发现在这一个页面中存在两大块内容，分别是由红色方框括起来的内容区和蓝色方框括起来的选项卡区域。这两个元素之间存在一个垂直分布的关系，所以我们首先需要添加一个垂直的线性布局。（点击本文本框） Contents

6.3 页面切换框架的实现 6.3.2 Tabhost界面布局文件设计 Contents <?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/mTabHost" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ccbbaa"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"><!-- 显示单个页面的信息，这里使用了帧布局 --!> <FrameLayout android:id="@android:id/tabcontent"…………添加系统id：tabcontent android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" >……………设置该模块填满页面剩下的位置 <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout><!-- 底部的选项卡 --!> <TabWidget android:id="@android:id/tabs"……………………………添加系统id：tabs android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#66666666"></TabWidget> </LinearLayout></TabHost> 6.3.2 Tabhost界面布局文件设计 接下来在线性布局中填充页面内容和选项卡，在“豹考通”教学版中，页面内容模块使用到了FrameLayout帧布局，而选项卡控件的标签为<TabWidget></TabWidget>,代码如下: 知识扩展：帧布局(FrameLayout)是最简单的布局形式。所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的控件被放在最底层，最后一个添加到框架布局中的视图显示在最顶层，上一层的控件会覆盖下一层的控件。效果如图。（点击本文本框） Contents

6.3 页面切换框架的实现 6.3.2 Tabhost界面布局文件设计 Contents 经过以上操作，发现在activity_main.xml的视图界面显示如图。 注意：如果要使用TabHost，必须在布局文件中给TabWidget定义名为tabs的id。除此之外，还需要给给布局中的一个FrameLayout定义一个名为tabcontent的id。这两个id是android系统自带的，如果不为这两个元素添加系统自带的id，选项卡就无法正常使用。 Contents

6.3 页面切换框架的实现 6.3.3 为选项卡添加样式 Contents 6.3.3 为选项卡添加样式 选项卡的基本布局文件创建完毕后，我们还需要再建立一个xml文件用来作为选项卡的样式。在这个样式文件中我们可以定义选项卡的宽高、背景色、文字颜色、点击效果等内容。如果不使用样式的话，选项卡的样子会变得非常丑陋，甚至影响到用户的正常使用。为此，我们先建立一个tab.xml文件用于设计选项卡的样式。找到res-layout文件夹，右键建立一个layout resource file文件，并命名为tab。 Contents

6.3 页面切换框架的实现 6.3.3 为选项卡添加样式 Contents 在tab.xml文件中写入代码： 6.3.3 为选项卡添加样式 <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/title" android:layout_width="0dp" android:layout_weight="1"…………………………设置每个选项卡平分宽度 android:layout_height="wrap_content" android:background="@drawable/tab"……………………使用drawable样式 android:gravity="center"…………………………………设置文字居中显示 android:paddingBottom="8dp"……………………………下方内边距设置为8 android:paddingTop="8dp"………………………………上方内边距设置为8 android:textColor="#ffffff"………………………………设置文字为白色 android:textSize="16sp"/>………………………………………设置文字大小   在tab.xml文件中写入代码： 我们在输入完代码后，发现第6行android:background="@drawable/tab"报错了，这是因为我们还未在drawable文件夹中添加相关配置文件造成的。drawable文件夹中通常用来存放一些写好的控件特效。在“豹考通”教学版的选项卡模块中，在drawable文件夹里使用了3个xml文件来编写选项卡的特效，他们分别是tab.xml(和layout文件夹下的布局文件是重名的，事实上这个名称可以随意设置)、tab_selected.xml、tab_unselected.xml。 其中，tab_selected.xml表示的是当选项卡被选中时会呈现出的样式，tab_ unselected.xml表示的是当选项卡未被选中时呈现的样式。tab.xml文件整合了前两个文件，用于设置当选项卡处于不同状态下应该加载哪种布局文件。 Contents

6.3 页面切换框架的实现 6.3.3 为选项卡添加样式 Contents 6.3.3 为选项卡添加样式 我们只需要在res-drawable文件夹中分别建立以下三个布局文件即可：（依次点击下面文本框序号） <?xml version="1.0" encoding="utf-8"?><!--selector标签经常用来操作控件的背景--!><selector xmlns:android="http://schemas.android.com/apk/res/android" ><!--当控件被按下时，将控件样式设置为tab_selected.xml--!> <item android:state_pressed="true" android:drawable="@drawable/tab_selected"></item><!--当控件被选中时，将控件样式设置为tab_selected.xml--!> <item android:state_selected="true" android:drawable="@drawable/tab_selected"></item><!--当控件未被按下时，将控件样式设置为tab_unselected.xml--!> <item android:state_pressed="false" android:drawable="@drawable/tab_unselected"></item><!--当控件未被选中时，将控件样式设置为tab_unselected.xml--!> <item android:state_selected="false" android:drawable="@drawable/tab_unselected"></item></selector>   第一个：选项卡状态设置文件Code0601\app\src\main\res\drawable\tab.xml <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" ><!--设置控件为矩形--!> <corners android:radius="5dp"/><!--设置控件的圆角弧度--!> <solid android:color="#aaaaaa"/><!-- 填充的颜色 --></shape> 第二个：选项卡样式Code0601\app\src\main\res\drawable\tab_selected.xml <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <corners android:radius="5dp"/> <solid android:color="#000000"/><!-- 填充的颜色 --> <gradient <!--用于设置颜色的过渡--!> android:startColor="#aa444444" android:centerColor="#aa666666" android:endColor="#aa444444" android:type="linear"/></shape> 第三个：选项卡未被选中/按下时的式:Code0601\app\src\main\res\drawable\tab_unselected.xml Contents

6.3 页面切换框架的实现 6.3.4 初始化选项卡设计 Contents 之前已经在布局文件中完成了各个控件的插入，但此时还并不能看到选项卡的效果，因为我们并没有为选项卡加载内容，接下来我们进入MainActivity.java文件，来正式为选项卡设置内容。 首先，我们需要为每个选项卡设置标签tag和标题title。tag指代的是选项卡每个子项的名字，title指代的是选项卡每个子项的内容，在“豹考通”教学版中的选项卡有四个选项，那么我们就分别为tag和title建立一个数组来存储信息，同时我们要初始化选项卡控件。 package com.example.cd.demo6_1; public class MainActivity extends Activity {<!--初始化选项卡控件--!> 3. private TabHost mTabHost;<!--选项卡的标签--!> 4.Private String[] tags=new String[]{"page1","page2","page3","page4"};<!--选项卡的内容--!> 5.private String[] titles=new String[]{"第一页","第二页","第三页","第四页"}; } Contents

6.3 页面切换框架的实现 6.3.4 初始化选项卡设计 Contents 上述基本准备工作完成后，我们需要了解一个新的概念—Fragment。Fragment是Android3.0引入的新API，译为“片段”，我们可以将它理解为Activity中的片段或者子模块。Fragment必须被嵌入到Activity中使用，在同一个Activity中可以包含多个Fragment。 在“豹考通”教学版中，我们便使用到了TabHost+Fragment的技术，用户通过单击选项卡完成页面的切换，在切换过程中整个Activity并没有发生跳转，实际上发生变化的仅仅只是Activity中的Fragment部分。 Contents

6.3 页面切换框架的实现 6.3.4 初始化选项卡设计 Contents 如果希望使用fragment来完成不同选项卡之间内容的跳转，我们需要首先让MainActivity集成FragmentActivity，并且声称onCreate()方法。 此处要继承FragmentActivity 此处要继承FragmentActivity public class MainActivity extends FragmentActivity {<!--初始化选项卡控件--!>private TabHost mTabHost;<!--选项卡的标记--!>private String[] tags=new String[]{"page1","page2","page3","page4"};<!--选项卡的内容--!>private String[] titles=new String[]{"第一页","第二页","第三页","第四页"};<!--onCreate()方法--!>protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);}} Contents

6.3 页面切换框架的实现 6.3.4 初始化选项卡设计 Contents 接下来，我们为每个选项卡中填充内容。 public class MainActivity extends FragmentActivity {private TabHost mTabHost;private String[] tags=new String[]{"page1","page2","page3","page4"};private String[] titles=new String[]{"第一页","第二页","第三页","第四页"};protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);…………设置标题栏不显示 setContentView(R.layout.activity_main); mTabHost=(TabHost) findViewById(R.id.mTabHost);……………获取选项卡控件 mTabHost.setup();……………………………………………………加载选项卡控件 for(int i=0;i<titles.length;i++){…………………………循环添加各个选项卡<!--创建一个选项，并为其设置标记--!> TabHost.TabSpec tabSpec=mTabHost.newTabSpec(tags[i]);<!--加载选项卡的样式tab.xml--!> View view=getLayoutInflater().inflate(R.layout.tab, null); TextView tv1=(TextView) view.findViewById(R.id.title);<!--设置选项卡的标题(例如第一页、第二页、省控线、录取线等)--!> tv1.setText(titles[i]); tabSpec.setIndicator(view);<!--将id为content的控件设置为选项卡对应的内容--!> tabSpec.setContent(R.id.content);<!--将选项添加到选项卡中--!> mTabHost.addTab(tabSpec);}<!--设置选项卡默认选中第二个页面--!> mTabHost.setCurrentTab(1);}  6.3.4 初始化选项卡设计 接下来，我们为每个选项卡中填充内容。 通过使用模拟器运行项目后，看到效果。（点击本文本框） Contents

6.4为选项卡对应添加内容 6.4.1 创建空fragment布局文件及其加载类 Contents 需要建立4个布局文件，这四个布局文件分别对应4个选项卡，当某个选项卡被选中时，其对应的布局文件也会被加载进来。我们找到res-layout文件夹，在其中建立一个xml布局文件，并将其命名为page1。 为了简化操作，在page1.xml中，我们只需要加一个位于页面正中心的文字即可。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_vertical|center"………………………水平垂直居中 android:orientation="vertical" > <TextView android:id="@+id/tv1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="这是第一页" /> </LinearLayout> 可以在视图界面看到效果： Contents

6.4为选项卡对应添加内容 6.4.1 创建空fragment布局文件及其加载类 Contents 四个页面已经建立完毕，那么是不是代表我们已经可以直接在MainActivity中设置选项卡点击事件，并且让每个选项在被点击的时候，加载这些布局文件了呢? 这当然是不可行的，因为我们在选项卡技术中同时使用到了Fragment技术，用户在单击选项卡的过程中，实际切换的是每一个不同的Fragment。而这每个不同的Fragment又加载着不同的xml布局文件。因此，我们需要先为每个xml布局文件建立一个java类，并让java类去加载它们。上述概念理解起来可能存在一定的难度。 Contents

6.4为选项卡对应添加内容 6.4.1 创建空fragment布局文件及其加载类 Contents 我们接下来分别为page1.xml-page4.xml编写对应的java文件，为了使整个项目的目录结构更清楚，我们可以单独建一个包来存储这些java文件。右键java-cn. jxufe.iet，新建一个Package文件夹，并给它命名为cn.jxufe.iet.fragment。 现在我们可以看到，在cn.jxufe.iet文件夹下多出了一个fragment包。在fragment包中建立一个java程序，命名为page1Fragment(此处命名并无特殊要求，但为了文件内容清楚明了，建议一般用这种格式命名)。page1Fragment用来加载page1.xml布局文件，它需要首先继承Fragment，并生成oncreateView()方法。 package cn.jxufe.iet.fragment; import android.os.Bundle;;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.cd.demo6_1.R; public class page1Fragment extends Fragment { public View onCreateView(LayoutInflater inflater,ViewGroup container, BundlesavedInstanceState) { <!--加载page1.xml布局文件--!> View view=inflater.inflate(R.layout.page1,container,false); return view;}}   Contents

6.4为选项卡对应添加内容 6.4.1 创建空fragment布局文件及其加载类 Contents

6.4为选项卡对应添加内容 6.4.2 事件监听实现多页面切换 Contents 要在主程序MainActivity中设置一个方法来调用刚刚写好的这些java文件了。在“豹考通”教学版中，每当用户切换选项卡后，页面也会跟着切换到当前被选定的选项卡所对应的界面，这看上去很像一个点击事件。 事实上，这个事件是Tabhost控件特有的，用来监听选项卡被切换时的事件，Android里将之写作OnTabChanged事件，我们在MainActivity中使用接口来实现这个事件的监听。 在onTabChanged(String tabId)方法中，括号中有一个名为tabId的参数。这个参数对应的便是我们之前为每个选项卡设置的标签(tag)，当选项卡选中“第一页”时，tag的值会变成“page1”。而当tag的值变成了“page1”后，我们应该在事件中让程序显示出page1Fragment.java类中返回的view对象，这个view对象中加载了page1.xml布局文件。这看上去像是一个复杂的过程，但代码其实并不复杂。 Contents

6.4为选项卡对应添加内容 6.4.2 事件监听实现多页面切换 Contents 在replace()方法中出现了两个我们熟悉的参数，分别是id为content的控件和一个我们之前建立好的java类(page1Fragment-page4Fragment)。事实上，以replace(R.id.content,newpage1Fragment()).commit()为例，你可以将它理解为新建了一个page1Fragment的对象，这个对象中的onCreateView方法会返回一个view对象，而这个view对象加载的就是我们已经写好的page1.xml布局文件。在得到了这个view对象后，我们直接将view对象填充在了R.id.Content控件上，而R.id.Content控件在activity_main.xml布局文件中正好是用来存放内容的一个布局控件。当该方法被执行后，选项卡会进行切换。 Contents

6.5 多页面内容填充 6.5.1 替换page1.xml页面为“省控线页面”----6.5.1.1 替换xml布局文件 Contents 要用Android Studio导入之前已经做好的“省控线页面”，选择File-New-Import Project，找到Code0403(省控线查询页面demo)，将之导入。 在省控线查询页面的demo中，我们直接找到res-layout文件夹下的页面主布局activity_main.xml文件，使用Ctrl+A全选，然后把它里面所有的代码复制下来。 然后返回我们自己创建的Code0601项目，找到项目中的page1.xml布局文件，用刚刚复制的代码覆盖掉之前的所有代码。 Contents

6.5 多页面内容填充 6.5.1 替换page1.xml页面为“省控线页面”----6.5.1.1 替换xml布局文件 Contents 在复制完代码后，我们会发现代码中有很多像android:text="@string/controlLine Title"这样的代码报错了，这是由于在省控线查询的demo中，在strings.xml文件中添加了一些代码，而android:background="@drawable/border"表示的是引用了draw- able文件夹中的border.xml文件。我们现在仅仅只是复制了省控线查询demo中的activity_main.xml的代码，一些其他的配置文件并没有进行处理。 首先我们来处理一下strings.xml文件，在省控线查询demo(Code0403）中我们找到res\valuse\strings.xml文件，使用Ctrl+A全选，并将这些内容原封不动的覆盖掉我们自己的项目中的strings.xml文件。复制完毕后，要注意将“<string name="app_name">Code0403</string>”改为“<string name="app_name"> Code0601</string>”。 <resources> <string name="app_name">Code0601</string> <string name="batch">批次</string> <string name="category">类别</string> <string name="year">年份</string> <string name="sourceArea">生源地</string> <string name="schoolArea">学校省份</string> <string name="controlLine">省控线</string> <string name="controlLineTitle">历年高考省控线查询</string> </resources> Contents

6.5 多页面内容填充 6.5.1 替换page1.xml页面为“省控线页面”----6.5.1.1 替换xml布局文件 Contents 接下来我们完善drawable文件夹下的xml文件，我们找到省控线页面demo（Code0403）的drawable文件夹，直接选中drawable文件夹下的border.xml并复制到Code0601中对应的位置。在复制的过程中会弹出一个对话框，点击“ok”即可。 Contents

6.5 多页面内容填充 6.5.1 替换page1.xml页面为“省控线页面”----6.5.1.1 替换xml布局文件 Contents 除了strings.xml文件和border.xml文件之外，我们还注意到在Code0403的layout文件夹下，存在list_item_control_line.xml、spinner_item_batch.xml、 spinner_item_category.xml、spinner_item_year.xml四个布局文件。它们的用途是为listview控件和spinner控件设置相关样式，在此时不详细说明。我们只需要将这4个文件复制到Code0601项目的layout文件夹下。  小提示：按住Ctrl建，可以同时选择多个文件哦~ Contents

6.5 多页面内容填充 6.5.1 替换page1.xml页面为“省控线页面”----6.5.1.2 替换java类 Contents 然后我们将Code0403中每个包下的文件，都复制到Code0601对应的位置。 在上一节中我们替换了所有的xml配置文件，但这并不代表我们的替换工作已经结束了，java类的替换相较于xml文件更加复杂。在省控线查询demo(Code0403)中，我们进入Code0403\app\src\main\java\cn\jxuft\iet\Code0403文件夹下，可以看到在里面除了有一个页面主程序ControlLineActivity外，还分别有三个名为adapter、bean、util的包。 我们依葫芦画瓢，在Code0601的相应文件夹下也建立三个这样的包。 Contents

6.5 多页面内容填充 6.5.1 替换page1.xml页面为“省控线页面”----6.5.1.2 替换java类 Contents 我们发现在复制后，整个项目错误百出。不用紧张，这只是有些包未正常导入导致的，我们首先进入报错的ControlLineAdapter文件中修改错误。 package cn.jxufe.iet.adapter;import android.content.Context;import android.graphics.Color;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.TextView;import java.util.List;import cn.jxufe.iet.code0403.R;import cn.jxufe.iet.code0403.bean.ControlLine;public class ControlLineAdapter extends BaseAdapter {private Context context;private List<ControlLine>controlLineList;public ControlLineAdapter(Context context, List<ControlLine> controlLineList) {// TODO Auto-generated constructor stubthis.context=context;this.controlLineList=controlLineList;}……略} Contents

6.5 多页面内容填充 6.5.1 替换page1.xml页面为“省控线页面”----6.5.1.2 替换java类 Contents ControlLineAdapter.java文件之所以会报错，是因为它的代码中有一部分引用了错误的地址，我们可以直接看到第10行和第11行代码。很显然，这两段代码引用的是Code0403的地址，所以我们需要将它们删除，并改成Code0601项目中的引用。 操作过程是先将原本的引用删除，然后将鼠标放在报错的地方，按Alt+Enter(默认设置)然后在弹出来的列表中选择Import class即可。 将鼠标光标放在报错的地方，按Alt+Enter即可自动导入引用地址 Contents

6.5 多页面内容填充 6.5.1 替换page1.xml页面为“省控线页面”----6.5.1.2 替换java类 Contents 在其他报错的地方，我们也直接使用Alt+Enter，或者点击代码左边的红色灯泡就可以让代码不再报错。 Contents

6.5 多页面内容填充 6.5.1 替换page1.xml页面为“省控线页面”----6.5.1.2 替换java类 Contents 在util包中仍然有一个报错的java文件GetService，我们打开它可以很容易地发现它的错误原因也是由于引用了错误的地址。就像之前一样，我们将import cn.jxufe.iet.code0403.bean.ControlLine;这句代码删去，然后导入正确的地址即可。在完成 这一步后，我们刚刚复制进来的几个java文件便不会再报错了。 最后，我们要替换主程序，也就是将Code0403中的ControlLineActivity替换掉Code0601中的page1Fragment，这个过程和之前不同，并不能使用简单的覆盖。我们应当注意到在ControlLineActivity中，使用到的是onCreate()方法，而page1Fragment中使用的确实onCreateView方法。它们不同的原因是因为ControlLineActivity类继承的是AppCompatActivity，是一个普通的Activity。 而page1Fragment继承的是Fragment，是一个位于主程序MainActivity中的Fragment，它的onCreateView方法中必须返回一个View类型的对象。那么，面对这种情况，我们应该如何做呢？ Contents

6.5 多页面内容填充 6.5.1 替换page1.xml页面为“省控线页面”----6.5.1.2 替换java类 Contents 其实并没有想象中的那么困难，首先我们将ControlLineActivity中定义的一些数组、控件、集合代码复制到page1Fragment中。不管程序如何变化，这些东西都是固定的。 小提示：如果复制过来的代码报错了，不妨先使用Alt+Enter快捷键尝试自动导入正确的引用位置。   接下来我们要做的是将ControlLineActivity中onCreate()方法中的内容复制到page1Fragment的onCreateView()方法中，但是我们要注意到只能下面这行代码开始复制：yearSpinner = (Spinner) findViewById(R.id.yearSpinner);不能复制setContentView()方法，否则会产生冲突。 Contents

6.5 多页面内容填充 6.5.1 替换page1.xml页面为“省控线页面”----6.5.1.2 替换java类 Contents 代码复制完毕后，我们发现报出了非常多的错误，我们可以使用Alt+Enter解决GetService类和ControlLineAdapter类的导入错误，但是有很多其他的错误却无法解决。 这些错误的问题出现原因：由于Fragment和Activity之间存在一些差异造成的，如果一个类继承的是Fragment，Android中会使用一个View类型的对象来承载这个Fragment中的内容，这也是为什么onCreateView方法必须返回一个View对象的原因。我们在解决图6-34显示的错误时，只需要将代码 yearSpinner = (Spinner) findViewById(R.id.yearSpinner); 改为： yearSpinner = (Spinner) view.findViewById(R.id.yearSpinner); Contents

6.5 多页面内容填充 6.5.1 替换page1.xml页面为“省控线页面”----6.5.1.2 替换java类 Contents 对于这种写法，我们可以理解为页面中的控件并不是存在于一个Activity中，而是存在于一个Fragment中的，当我们使用findViewById方法去寻找控件时，应该在Fragment中寻找，而这个Fragment已经通过代码 View view=inflater.inflate(R.layout.page1,container,false);包装成了一个view对象，所以我们在findViewById()方法之前加上一个view.，代码是在当前fragment中使用这个控件。 …………略public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) { View view=inflater.inflate(R.layout.page1,container,false); yearSpinner = (Spinner) view.findViewById(R.id.yearSpinner);// 年份的下拉列表 provinceSpinner = (Spinner)view.findViewById(R.id.areaSpinner);// 省份的下拉列表categorySpinner = (Spinner)view.findViewById(R.id.categorySpinner);batchSpinner =(Spinner) view.findViewById(R.id.batchSpinner);controlLineTitle = (TextView) view.findViewById(R.id.controlLineTitle);// 显示结果标题controlLineListView = (ListView) view.findViewById(R.id.controlLineList);// 显示查询结果…………略return view;}}   这个错误的主要原因在于“this”上，在ArrayAdapter的构造方法中，this应该指向的是一个activity本身，page1Fragment并不是一个activity，它只是依附于activity之中的一个fragment。如果此处用this则会指向这个fragment，所以代码出现了错误。我们只需要将代码 ArrayAdapter<String> yearAdapter = new ArrayAdapter<String>(this, R.layout.spinner_item_year, years);yearSpinner.setAdapter(yearAdapter);修改为ArrayAdapter<String> yearAdapter = new ArrayAdapter<String>(this.activity(), R.layout.spinner_item_year, years);yearSpinner.setAdapter(yearAdapter);通过使用this.getactivity()来获得Activity，代码就不会再报错了。 Contents

6.5 多页面内容填充 6.5.1 替换page1.xml页面为“省控线页面”----6.5.1.2 替换java类 Contents 这个错误的意思很明显，表达的是我们的spinner_item_batch.xml文件出现了错误，我们点开spinner_item.batch.xml文件，发现以下代码存在问题： style="@style/spinner_itemStyle" 这个问题其实是styles.xml文件没有正确配置造成的，在省控线查询界面中，开发者对styles.xml文件进行了一些修改，而我们在之前的操作中并没有将Code0403的styles.xml文件中的代码复制过来。现在，只剩下最后一步了，我们在Code0403的res-values文件夹中找到styles.xml，直接将它复制到Code0601，将它原本的styles.xml文件覆盖。 还是报错，这是我们还没有复制ControlLineActivity中监听事件的实现方法造成的，在文件中找到如下代码，直接复制到page1Fragment.java中。小提示：复制代码时，要注意括号"{}"是否正确配对。 Contents

6.5 多页面内容填充 6.5.2 替换page2页面为“录取线查询”页面----6.5.2.1替换xml布局文件 Contents 找到Code0405的activity_main.xml布局文件，我们需要做的就是将这个文件中的内容全部覆盖到Code0601的page2.xml中。 和之前一样，我们在复制完代码后发现了很多错误，这是由于strings.xml和drawable文件夹中缺少了一些东西造成的。 我们找到Code0405的strings.xml文件，将<resources></resources>标签内除了“<string name="app_name">Code0405</string>”外的所有代码复制到Code0601里的strings.xml文件中。但这个时候strings.xml文件报出了一些错误： Contents

6.5 多页面内容填充 6.5.2 替换page2页面为“录取线查询”页面----6.5.2.1替换xml布局文件 Contents 这是由于我们在strings.xml文件中添加了相同的内容导致的，因为录取线界面和省控线界面中所用到的一些内容相同，所以在strings.xml中两者存在重复的内容，我们只需要把重复的内容删除即可。 其中，spinner_item_batch.xml、spinner_item_category.xml、spinner_item_year.xml在之前整合省控线页面时就已经复制过去了，所以我们只需要把剩下的两个list_item_major_recruit.xml和list_item_school_recruit.xml文件复制到Code0601的layout文件夹中。复制完毕后，Code0601的layout文件夹结构应该如图: 然后，我们把Code0405的drawable文件夹下的几个文件拷贝到Code0601的相应位置，注意border.xml已经存在了，所以不用拷贝。此时Code0601下的drawable文件夹结构如图： Contents

6.5 多页面内容填充 6.5.2 替换page2页面为“录取线查询”页面----6.5.2.2 替换java类 Contents 我们找到Code0403项目java目录下的adapter文件夹，这个文件夹中有两个写好的类Major_recruitAdapter和School_recruitAdapter。这两个类是分别用来作为录取线查询页面中专业录取线列表和学校录取线列表的适配器的，所以我们需要将这两个类复制到Code0601的对应文件夹中。复制完后，Code0601的adapter文件夹结构。 这个时候要注意到的是在School_recruitAdapter这个类的文件下方出现了红色的波浪线，代表类中的代码存在错误，我们点击这个类查看它的代码，发现和之前处理page1的java类时一样，是导入了错误的路径。 Contents

6.5 多页面内容填充 6.5.2 替换page2页面为“录取线查询”页面----6.5.2.2 替换java类 Contents 解决办法是先删掉上图中方框内的代码，然后按Alt+Enter快捷键导入正确的路径。但此时我们遇到了一个问题，就是按住Alt+Enter后并没有出现“Import Class”这类的提示字样，这是为什么呢？ 很简单，因为我们在School_recruitAdapter的代码中需要使用到SchoolRecruit类，但我们的程序中还没有创建它，java语言中可是不能导入不存在的类的哦！不过不用急，我们打开Code0405的bean目录，发现目录下有我们需要的SchoolRecruit类和另外两个School类以及MajorRecruit类，这些类都是录取线查询页面中需要使用到的，所以我们将这些类全部复制到Code0601中的相应位置即可。 Contents

6.5 多页面内容填充 6.5.2 替换page2页面为“录取线查询”页面----6.5.2.2 替换java类 Contents 现在我们再回到报错的schoolRecruitAdapter文件，使用Alt+Enter，错误是不是解决了呢？如果Alt+Enter快捷键没有直接帮你导入地址，可以将鼠标的光标放在报错的代码上再使用Alt+Enter,在弹出的菜单中点击“Import Class”就可以了。 此时项目中的文件不再报错了，而Code0405下的util文件夹和Code0601的util文件夹下都拥有GetSQLite和GetService两个java文件，这是不是意味着我们可以不用再进行任何操作呢？ 当然不是，GetSQLite和GetService两个文件主要用于存储一些页面上要用到的数据，而我们在上一节中拷贝过来的是省控线页面的GetSQLite和GetService类，在本节的录取线查询页面中，数据显然是有所不同的。因此，我们需要将Code0405中的这两个类文件中的内容添加到Code0601中。   小提示：由于在整合项目时，省控线查询页面中的数据仍然是需要的，所以我们只能将Code0405项目里的GetSQLite和GetService类中的代码累加到Code0601中已有的两个类中，不能覆盖。 Contents

6.5 多页面内容填充 6.5.2 替换page2页面为“录取线查询”页面----6.5.2.2 替换java类 Contents 在将代码直接复制过来后会报出错误，这是由于我们没有导入相关的地址造成的，直接将鼠标光标选中报错的地点，按Alt+Enter即可。 然后我们再来拷贝Code0403的GetSQLite内容，将它们添加到Code0601的GetSQLite原有的代码下方，需要注意的是这两个GetSQLite中的内容存在部分重复，我们需要删除掉重复的内容。 一切妥当，接下来只剩最关键的省控线查询页面主程序了，我们找到Code0405中的EnrollScoreActivity类，先把除了oncreate()方法里的所有其他代码拷贝到Code0601中的page2Fragment里。遇到报错的代码时，首先使用Alt+Enter导入相应的路径。将所有正确的路径导入后，我们发现在下图的EnrollScoreActivity.this处仍有错误： Contents

6.5 多页面内容填充 6.5.2 替换page2页面为“录取线查询”页面----6.5.2.2 替换java类 Contents 我们只要将所有的EnrollScoreActivity.this改为this.getActivity()即可。 小提示：如果在修改的过程中发现项目仍然报错，请不妨检查一下之前复制过来的文件是不是已经一一将正确的路径导入了。   接下来是最后一步，我们将Code0405中EnrollScoreActivity的OnCreate()方法下的代码添加到Code0601下的page2Fragment中的OnCreateView()方法中。注意这个时候代码并不能全部复制，如下图所示： 小提示：将onCreate()方法下的内容转到onCreateView()方法下时，不能直接用复制的内容覆盖，而是应该将复制的内容放在onCreateView()方法中以下代码之后。 View view=inflater.inflate(R.layout.page2,container,false); 在复制完代码后，程序会出现多处错误，这个时候就像之前修改page1Fragment时一样，在“findViewById”之前加上“view.”，并将EnrollScoreActivity.this改为this.getActivity()即可。 Contents

6.5 多页面内容填充 6.5.2 替换page2页面为“录取线查询”页面----6.5.2.2 替换java类 Contents

教学视频 Code0601 Code0602 Code0603

谢 谢！