项目2任务5-物联网APP的布局设计

2相关知识34任务小结与练习1任务实施任务引入与目标物联网APP的布局设计一、任务引入与目标任务目标在任务5中,我们将新建一个Android工程,开始物联网APP的设计。设计的物联网APP共有三个页面:页面1用于用户登录和注册,页面2用于MQTT通信功能,页面3实现HTTP通信功能。当然本任务只进行页面的布局设计,具体功能在接下来的项目和任务中逐步完成。任务引入有了自定义对话框、意图和HTTP相关的基础,下面就可以正式开始物联网APP的设计了。APP设计的首要问题是布局,一个合理的、功能完善的APP应该是什么样子的?布局又需要我们掌握哪些知识呢?二、相关知识Android的View类View类是所有可视化控件的基类,主要提供控件绘制和事件处理的方法。TextView、EditText、Button均继承自View类。View及其子类的相关属性可以在布局XML文件中使用“Android:名称空间”来设置,也可以通过成员方法在代码中进行设置。Android的布局在Android中,View有六大布局,分别是:LinearLayout(线性布局)、Relative-Layout(相对布局)、TableLayout(表格布局)、FrameLayout(帧布局)、Absolute-Layout(绝对布局)、GridLayout(网格布局)。布局方式使用XML语言进行描述。二、相关知识你见过或者使用过哪些和物联网相关的APP?这些APP都有什么功能?课堂讨论三、任务实施实施设备安装了AndroidStudio开发环境的计算机。实施过程1.新建工程在AndroidStudio新建工程“IOTSystem”,默认页面的布局文件和活动文件分别是activity_main.xml和MainActivity。如图2-35所示,可以通过复制的方法再增加2个页面,默认的页面是第1个页面。增加的第2个页面的布局文件和活动文件分别是activity_second.xml和SecondActivity,增加的第3个页面的布局文件和活动文件分别是activity_third.xml和ThirdActivity。图2-35增加2个页面三、任务实施2.页面1的布局在页面1的activity_main.xml文件中,放置两个按钮,表示注册和登录,如图2-36所示。图2-36页面1布局预览三、任务实施两个按钮控件的id分别为btn11、btn12。代码如下:<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><LinearLayout android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent"> <Button style="?android:attr/buttonBarButtonStyle" android:id="@+id/btn11" android:text="登录" android:textSize="20sp“ android:layout_marginEnd="30dp" android:layout_width="wrap_content" android:layout_height="wrap_content"> </Button>三、任务实施 <Button android:id="@+id/btn12" android:text="注册" android:textSize="20sp" android:layout_marginStart="30dp" android:layout_width="wrap_content" android:layout_height="wrap_content" style="?android:attr/buttonBarButtonStyle"> </Button></LinearLayout></LinearLayout>在程序中,android:gravity="center"设置线性布局里2个按钮的对齐方式为居中;默认排列方向为horizontal,设置线性布局内部两个按钮水平排列;线性布局的宽度和高度都是“match_parent”,代表充满父容器。btn11、btn12按钮的宽度和高度为“wrap_content”,代表实际大小。三、任务实施3.页面2的布局(1)页面2总体布局设计。在页面2的activity_second.xml文件中,总体是按线性布局设计的,如图2-37所示。图2-37页面2布局预览三、任务实施代码如下:<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".SecondActivity">

<!--1.控制--><!--2-状态--><!--3-接受消息--><!--4-下一页--></LinearLayout>整个页面由4个部分构成,全部采用线性布局,方向垂直。每部分如下:控制部分,有2个控制用的ImageView;状态部分,其中2个TextView用于显示温度、湿度的值;接收消息部分,用于显示MQTT接收消息;下一页部分,由1个按钮构成,点击跳转下一页。三、任务实施(2)准备2个图标。在网上(比如阿里巴巴图标库)下载2个图标,如图2-38所示,其中2个图标像素为128×128。名称中的字母为小写。图2-38准备2个图标粘贴2个图标文件到app→main→res→drawable目录,如图2-39所示。图2-39添加图标到工程中三、任务实施(3)页面2的控制部分布局。代码如下：

<!--1.控制--><LinearLayout android:layout_marginTop="50dp" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="150dp"> <LinearLayout android:orientation="vertical" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:src="@drawable/led1" android:id="@+id/image21“ android:layout_gravity="center_horizontal" android:layout_width="80dp" android:layout_height="80dp"> </ImageView>三、任务实施 <TextView android:text="开灯" android:textSize="20sp" android:layout_gravity="center_horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content"> </TextView></LinearLayout><LinearLayout android:orientation="vertical" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content"><ImageView android:src="@drawable/led2" android:id="@+id/image22" android:layout_gravity="center_horizontal" android:layout_width="80dp" android:layout_height="80dp"></ImageView>三、任务实施 <TextView android:text="关灯" android:textSize="20sp" android:layout_gravity="center_horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content"> </TextView></LinearLayout></LinearLayout>led1控制对象,线性布局,和后面对等的led2对象的layout_weight属性都是1,也就是这2个对象在父类布局中会均分排布。三、任务实施(4)页面2的状态部分布局。

<!--2.状态--><LinearLayout android:gravity="center_vertical“ android:layout_margin=“10dp" android:layout_width="match_parent" android:layout_height=“200dp"> <LinearLayout android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="100dp"> <TextView android:gravity="center" android:text="温度:" android:textSize="20sp" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content"> </TextView> <TextView android:id="@+id/text21" android:textSize="20sp" android:layout_weight="2" android:layout_width="wrap_content" android:layout_height="wrap_content"> </TextView> </LinearLayout> <LinearLayout android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="100dp"> <TextView android:gravity="center" android:text="湿度:" android:textSize="20sp" android:layout_weight="1" android:layout_width="wrap_content“ android:layout_height="wrap_content"> </TextView>三、任务实施 <TextView android:id="@+id/text22“ android:textSize="20sp" android:layout_weight="2" android:layout_width="wrap_content" android:layout_height="wrap_content"> </TextView> </LinearLayout></LinearLayout>程序中,状态部分由2个小的线性布局组成,分别用于显示温度和显示湿度。三、任务实施(5)页面2的接收消息部分布局。代码如下:

<!–3-接收消息--><LinearLayout android:orientation="vertical" android:layout_margin="10dp" android:layout_width="match_parent" android:layout_height="150dp"> <TextView android:gravity="center" android:text="MQTT消息:" android:textSize="20sp" android:layout_width="match_parent" android:layout_height="50dp"></TextView> <TextView android:id="@+id/text23" android:textSize="20sp" android:layout_width="match_parent" android:layout_height="100dp"> </TextView></LinearLayout>里面的2个文本框是垂直排布的。三、任务实施(6)页面2的下一页部分布局。代码如下:<!--4-下一页--><LinearLayoutandroid:gravity="center"android:layout_margin="10dp"android:layout_width="match_parent"android:layout_height="50dp"><Buttonandroid:id="@+id/btn21" android:text="下一页" android:textSize="20sp" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button></LinearLayout>里面只有一个按钮,用于跳转到下一页。三、任务实施4.页面3的布局如图2-40所示,在activity_third.xml文件中设计页面3的布局,由三部分组成:图2-40页面3布局预览三、任务实施天气API功能、反馈建议功能、跳转到上一页功能。代码如下:<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".ThirdActivity"><!--1-天气API--><LinearLayout android:gravity="center" android:orientation="vertical" android:layout_margin="10dp" android:layout_width="match_parent" android:layout_height="250dp"><Button android:layout_marginTop="50dp" android:id="@+id/btn31" android:text="天气查询" android:textSize="20sp"三、任务实施 android:layout_width="wrap_content" android:layout_height="wrap_content"></Button><TextView android:id="@+id/text31" android:text="天气:" android:textSize="20sp" android:layout_width="match_parent" android:layout_height="200dp"></TextView></LinearLayout><!--2-反馈建议--><LinearLayoutandroid:gravity="center"android:layout