《移动软件开发》实验6

《移动软件开发》实验6

一、实验目标

1、学习使用ScrollView和RelativeLayout以及插件之间的穿插使用；2、仿制一个app的首页。

二、实验步骤

6.0准备工作

6.0.1了解控件属性

1.ScrollView

内部仅能有一个控件。

• layout_width:宽
• layout_height:高

示例：

2.RelativeLayout

相对布局，也是非常常用的布局，比LinearLayout更加灵活，可以实现非常复杂的UI。

• layout_width:宽
• layout_height:高
• gravity:控制子控件的位置

6.0.2导入图片

在Android studio中打开项目后，直接将课程提供的图片拖进mipmap文件夹中。注意：图片的名称不能含有中文汉字，建议用英文字母命名。

6.1页面设计

6.1.1逻辑梳理

仿制的app首页：

因此，该页面可以分成5个部分：

• 顶部标题模块
• 顶部图片模块
• 顶部菜单模块
• 待办消息模块
• 底部Tab按钮

一些部分会使用多个布局来实现。

6.1.2代码实现

1.底层布局

利用ScrollView将页面做成可滑动的界面，其内部继续使用LinearLayout线性布局。接下来的模块的代码都将在ScrollView内的LinearLayout线性布局中编写。

activity_main.xml文件代码如下：

当前效果图：

2.顶部标题模块

使用TextView，并设置相关参数。

activity_main.xml文件代码如下：

当前效果图：

3.顶部图片模块

使用ImageView，并设置相关参数。

activity_main.xml文件代码如下（ImageView上面省略的LinearLayout布局代码为间隔线）：

当前效果图：

4.顶部菜单模块

创建两个LinearLayout线性布局，外层的水平排布，内层的垂直排布。并且外层布局设置weightSum属性，通过内部布局设置的ayout_weight属性来实现平均分配外层布局的空间。

activity_main.xml文件代码如下：

当前效果图：

接下来，只要在该外层布局内再添加3个一样的内层布局，并且分别修改ImageView的background属性和TextView的text属性即可完成顶部菜单模块。

该模块完成后的效果图：

5.待办消息模块

首先创建该模块的父布局，设置为垂直排布。

activity_main.xml文件代码如下：

当前效果图：

接下来，创建该模块上面的状态栏部分。

代码如下：

效果图：

然后创建消息栏的布局，采用垂直排布，高和宽设置为包裹内容的大小。

代码如下（注意：接下来的代码都编写在该布局内，省略的LinearLayout代码即为上面的状态栏的代码）：

接着在刚创建的布局里添加ImageView，用来显示消息类型的图片。

代码如下：

继续在刚才创建的布局里创建新的布局，采用水平排布。用TextView来显示消息内容，ImageView来显示箭头的图标。

代码如下：

还是在刚才创建的布局里创建新的布局，仍然采用水平排布。用两个TextView来分别显示带颜色的数字和汉字“条”的文本，这样可以更方便地让二者有大小差，只要调整textSize属性即可。

代码如下：

效果图：

最后，只要再写一个一样的消息栏，并修改表示消息类型的ImageView的background属性和表示数字的TextView的text属性就可以完成该模块的仿制了。

该模块完成后的效果图：

6.底部Tab按钮

创建一个LinearLayout线性布局。同样设置weightSum属性，方便内部布局通过ayout_weight属性来实现平均分配外层布局的空间。

代码如下（省略的代码即为上面完成的模块的代码以及一个间隔线的代码）：

接着在该布局内创建RelativeLayout相对布局，并设置相应的ayout_weight属性。然后在RelativeLayout中添加ImageView和TextView，并通过layout_属性来调整二者的位置。

代码如下：

效果图：

最后，继续创建3个一样的RelativeLayout相对布局，并修改其中的ImageView的background属性和TextView的text属性即可。

该模块完成后的效果图：

三、程序运行结果

模拟机上的效果图（界面可滑动）：