主编：钟元生 赵圣鲁.

Presentation on theme: "主编：钟元生 赵圣鲁."— Presentation transcript:

1 主编：钟元生 赵圣鲁

2 第四章 无对话框的单 页面设计

3 本讲内容 本章案例实现流程 “历年省控线查询”模块实现 历年录取线查询”模块实现 界面设计 事件监听器 界面设计 事件监听器
Spinner实现下拉列表选项 事件监听器 ListView列表 界面设计 Spinner实现下拉列表选项 事件监听器 ListView列表 Contents

4 4.1 微案例介绍 本章案例实现流程 “省控线查询”模块实现的页面流程 Contents

5 4.1 微案例介绍 本章案例实现流程 “历年录取线查询”模块实现的页面流程 Contents

6 4.2“历年省控线查询”模块实现 4.2.1 界面设计 Contents
“省控线查询”模块整体采用线性布局，布局内部结合TextView（文本显示框）、Spinner（列表）、（HorizontalScrollView）水平滚动条等组件组合实现。 省控线查询”模块整体布局 Contents

7 4.2“历年省控线查询”模块实现 4.2.1 界面设计 Contents
第一步：打开strings.xml文件，在resources标签下定义资源变量。 第二步：Spinner列表显示框因为有边框，所以需要自定义图片作为背景。在 drawable文件夹下新建border.xml图片 第三步：在activity_main.xml文件中对“省控线查询”界面进行整体布局 Contents

8 4.2“历年省控线查询”模块实现 4.2.2 Spinner实现下拉列表选项 Contents
每个Spinner列表需要自己的布局、数据源和适配器Adapter。在四个Spinner列表的布局中，使用了三种布局，其中年份和生源地的布局一样，因此创建三个布局文件即可。三种布局文件比较相似，只是颜色不一样，为了节省代码，使用style样式表进行实现。三个布局文件名分别是spinner_item_batch.xml、spinner_item_category.xml和spinner_item_ year.xml。 省控线查询Spinner列表 Contents

9 4.2“历年省控线查询”模块实现 4.2.2 Spinner实现下拉列表选项 Contents
每个Spinner列表需要自己的布局、数据源和适配器Adapter。在四个Spinner列表的布局中，使用了三种布局，其中年份和生源地的布局一样，因此创建三个布局文件即可。三种布局文件比较相似，只是颜色不一样，为了节省代码，使用style样式表进行实现。 省控线查询Spinner列表 Contents

10 4.2“历年省控线查询”模块实现 4.2.2 Spinner实现下拉列表选项 Contents
第一步：创建三个布局文件，文件名分别是spinner_item_batch.xml、 spinner_item_category.xml和spinner_item_ year.xml。 第二步：实现Spinner列表布局文件后，还需要在java类文件中创建数据源和适配器。 打开主类文件资源代码为ControlLineActivity（新建项目默认为MainActivity）， 添加常量和实例化控件。 第三步：在ControlLineActivity主类文件的onCreate方法中，关联控件获取ID。 示例：yearSpinner = (Spinner) findViewById(R.id.yearSpinner) Contents

11 4.2“历年省控线查询”模块实现 4.2.2 Spinner实现下拉列表选项 Contents
第四步：由于生源地数据源在整个客户端项目中从SQLite数据库中获取，现在新建 GetSQLite类，定义临时数据集合，临时代替SQLite生源地数据， 第五步：在ControlLineActivity主类文件中onCreate方法中，实例化GetSQLite 对象 获取本地数据临时生源地集合。然后，定义四个Spinner列表适配器，并将数 据源和布局关联。 示例： ArrayAdapter<String> yearAdapter = new ArrayAdapter<String>(this, R.layout.spinner_item_year, years)； yearSpinner.setAdapter(yearAdapter); Contents

12 4.2“历年省控线查询”模块实现 4.2.3 事件监听器 Contents
把四个Spinner列表实现，但是还不能实现在选择列表后，省控线标题相应切换的效果，为了实现省控线随着选择列表的不同而相应变化，可采用内部类事件监听方法，对四个列表进行监听。 预期实现的效果 Contents

13 4.2“历年省控线查询”模块实现 4.2.3 事件监听器 Contents
第一步：在主类ControlLineActivity中定义MyItemSelectedListener类并实现 OnItemSelectedListener类的接口，在执行完onItemSelected方法后显示省 控线标题信息。 第二步：定义完MyItemSelectedListener事件监听内部类后，需要对四个Spinner控 件监听才能达到监听的效果。 示例：MyItemSelectedListener itemSelectedListener = new MyItemSelectedListener(); yearSpinner.setOnItemSelectedListener(itemSelectedListener); 预期实现的效果 Contents

14 4.2“历年省控线查询”模块实现 4.2.4 ListView列表 Contents
省控线查询列表 Contents

15 4.2“历年省控线查询”模块实现 4.2.4 ListView列表 Contents
第一步：在Layout文件夹下新建list_item_control_line.xml列表布局。 第二步：列表数据源在“豹考通”整体项目中是从服务端获取数据，现在使用临时集 合数据代替从服务端获取的数据，新建GetService类添加集合数据，在集合 中使用ControlLine实体类封装每条数据。 第三步：ListView列表采用自定义列表，需要实现自定义Adapter类，并继承 BaseAdapter类。新建ControlLineAdapter类。 第四步：在主类ControlLineActivity中实例化GetService对象获取省控线数据集合， 并实例化ControlLineAdapter 对象，传入数据源，关联ListView控件显示列表 Contents

16 4.3“历年录取线查询”模块实现 4.3.1 界面设计 Contents
“历年省控线查询”模块整体采用线性布局，布局内部结合TextView（文本显示框）、Spinner（列表）、HorizontalScrollView（水平滚动条）、Button（按钮）等组件组合实现 “录取线查询”模块整体布局 Contents

17 4.3“历年录取线查询”模块实现 4.3.1 界面设计 Contents
第一步：打开strings.xml文件，在resources标签下定义资源变量。 第二步：Spinner列表显示框因为有边框，所以需要自定义图片作为背景。在 drawable文件夹下新建border.xml图片 第三步：查询按钮和历年分数与省控线差值按钮设置背景图片，因为按钮按下和 抬起背景图片是两种状态，于是创建title_btn.xml背景图片，采用selector 标签设置各种状态对应显示的图片，状态显示图片分别为pressed.xml和 unpressed.xml。 第四步：在activity_main.xml文件中对“历年录取线查询”界面进行整体布局 Contents

18 4.3“历年录取线查询”模块实现 4.3.2“历年录取线筛选条件栏”实现 Contents
历年录取线筛选条件栏，包含6个下拉列表、2个单选按钮和1个查询按钮，下拉列表还需要自己的布局、数据源和适配器Adapter。在6个Spinner列表的布局中，使用了三种布局，其中省份、选择学校、起始年份、生源地的布局一样，因此创建三个布局文件即可。三种布局文件比较相似，只是颜色不一样，为了节省代码，使用style样式表进行实现。 历年录取线筛选条件栏 Contents

19 4.3“历年录取线查询”模块实现 4.3.2“历年录取线筛选条件栏”实现 Contents 第一步：实现Spinner列表布局。
①在样式表style.xml文件中添加spinner_itemStyle样式。 ②创建spinner_item_batch.xml、spinner_item_category.xml和 spinner_item_year.xml文件。 第二步：在java类文件中创建数据源和适配器。打开主类文件资源代码为 EnrollScoreActivity（新建项目默认为MainActivity），添加常量和实 例化控件。 第三步：在EnrollScoreActivity主类文件中onCreate方法中关联控件获取ID， Contents

20 4.3“历年录取线查询”模块实现 4.3.2“历年录取线筛选条件栏”实现 Contents
第四步：由于生源地数据源和学校数据源在整个客户端项目中从SQLite数据库中 获取，现在新建GetSQLite类，定义临时数据集，临时代替SQLite生源 地数据。 第五步：在EnrollScoreActivity主类文件中onCreate方法中，实例化GetSQLite 对象获取本地数据临时生源地集合。然后，定义四个Spinner列表适配器， 并将数据源和布局关联，把5个Spinner列表实现。 Contents

21 4.3“历年录取线查询”模块实现 4.3.3 事件监听器 Contents
历年录取线筛选条件栏实现5个Spinner列表完成后，点击查询按钮后，历年录取线标题栏标题还不能根据选择的信息进行切换，学校Spinner列表还没实现，学校列表在选择完学校所在省份后，更新学校列表，所以需要借助事件监听器进行实现。 “录取线查询”事件监听 Contents

22 4.3“历年录取线查询”模块实现 4.3.3 事件监听器 Contents
为了实现学校名称下拉列表随着选择学校省份变化和历年录取线标题栏灵活性变化，分三步进行实现： 第一步：创建getSchool方法，在getSchool方法中实现学校列表； 注意：在实现getShool方法前，需要实现School实例类，方便封装学校名称信息。 第二步：在主类EnrollScoreActivity中定义MyItemSelectedListener内部监听类对6个 Spinner监听，同时点击学校省份后调用getSchool方法实现学校列表； 第三步：对6个Spinner列表进行注册。 Contents

23 4.3“历年录取线查询”模块实现 4.3.4 ListView列表 Contents 录取线列表包含两部分：录取线列表和专业录取线列表。
学校录取线列表 专业分数线列表 Contents

24 4.3“历年录取线查询”模块实现 4.3.4 ListView列表 Contents
第一步：分别实现学校录取线列表布局和专业分数线列表布局。在Layout文件夹下新建 list_item_school _recruit.xml和list_item_major_recruit.xml列表布局。 第二步：使用临时集合数据源代替从服务端获取的数据.新建GetService类添加学校录 取线分数集合和专业录取线分数集合，在集合中使用SchoolRecruit实体类和 MajorRecruit实体类封装每条数据。 第三步：自定义每个列表的适配器类，并实现其内部方法。校录取线列表和专业录取线 列表分别采用自定义列表，需要实现自定义Adapter类，并继承BaseAdapter类。 Contents

25 4.3“历年录取线查询”模块实现 4.3.4 ListView列表 Contents
第四步： 在showSchoolRecruits方法中实例化GetService对象获取省控线数据集合， 并实例化School_recruitAdapter对象，传入数据源，关联ListView控件显示 列表。 说明：点击的“查询”按钮时会检查“显示专业”下的单选按钮，如果选了“否”则显示学校录取线列表，如果选“是”则显示专业录取线列表。在前面事件中，已经实现录取线标题栏随选择内容不同而灵活变化中，该表已经做过判断，所以，showSchoolRecruits和showMajorRecruitsResult方法只要分别从GetService类中获取数据、创建适配器、列表控件关联适配器即可。 Contents

26 教学视频 Code0401 Code0403 Code0402 Code0404

27 谢 谢！