項(xiàng)目2任務(wù)5-物聯(lián)網(wǎng)APP的布局設(shè)計(jì)

2相關(guān)知識34任務(wù)小結(jié)與練習(xí)1任務(wù)實(shí)施任務(wù)引入與目標(biāo)物聯(lián)網(wǎng)APP的布局設(shè)計(jì)一、任務(wù)引入與目標(biāo)任務(wù)目標(biāo)在任務(wù)5中,我們將新建一個(gè)Android工程,開始物聯(lián)網(wǎng)APP的設(shè)計(jì)。設(shè)計(jì)的物聯(lián)網(wǎng)APP共有三個(gè)頁面:頁面1用于用戶登錄和注冊,頁面2用于MQTT通信功能,頁面3實(shí)現(xiàn)HTTP通信功能。當(dāng)然本任務(wù)只進(jìn)行頁面的布局設(shè)計(jì),具體功能在接下來的項(xiàng)目和任務(wù)中逐步完成。任務(wù)引入有了自定義對話框、意圖和HTTP相關(guān)的基礎(chǔ),下面就可以正式開始物聯(lián)網(wǎng)APP的設(shè)計(jì)了。APP設(shè)計(jì)的首要問題是布局,一個(gè)合理的、功能完善的APP應(yīng)該是什么樣子的?布局又需要我們掌握哪些知識呢?二、相關(guān)知識Android的View類View類是所有可視化控件的基類,主要提供控件繪制和事件處理的方法。TextView、EditText、Button均繼承自View類。View及其子類的相關(guān)屬性可以在布局XML文件中使用“Android:名稱空間”來設(shè)置,也可以通過成員方法在代碼中進(jìn)行設(shè)置。Android的布局在Android中,View有六大布局,分別是:LinearLayout(線性布局)、Relative-Layout(相對布局)、TableLayout(表格布局)、FrameLayout(幀布局)、Absolute-Layout(絕對布局)、GridLayout(網(wǎng)格布局)。布局方式使用XML語言進(jìn)行描述。二、相關(guān)知識你見過或者使用過哪些和物聯(lián)網(wǎng)相關(guān)的APP?這些APP都有什么功能?課堂討論三、任務(wù)實(shí)施實(shí)施設(shè)備安裝了AndroidStudio開發(fā)環(huán)境的計(jì)算機(jī)。實(shí)施過程1.新建工程在AndroidStudio新建工程“IOTSystem”,默認(rèn)頁面的布局文件和活動(dòng)文件分別是activity_main.xml和MainActivity。如圖2-35所示,可以通過復(fù)制的方法再增加2個(gè)頁面,默認(rèn)的頁面是第1個(gè)頁面。增加的第2個(gè)頁面的布局文件和活動(dòng)文件分別是activity_second.xml和SecondActivity,增加的第3個(gè)頁面的布局文件和活動(dòng)文件分別是activity_third.xml和ThirdActivity。圖2-35增加2個(gè)頁面三、任務(wù)實(shí)施2.頁面1的布局在頁面1的activity_main.xml文件中,放置兩個(gè)按鈕,表示注冊和登錄,如圖2-36所示。圖2-36頁面1布局預(yù)覽三、任務(wù)實(shí)施兩個(gè)按鈕控件的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>三、任務(wù)實(shí)施 <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"設(shè)置線性布局里2個(gè)按鈕的對齊方式為居中;默認(rèn)排列方向?yàn)閔orizontal,設(shè)置線性布局內(nèi)部兩個(gè)按鈕水平排列;線性布局的寬度和高度都是“match_parent”,代表充滿父容器。btn11、btn12按鈕的寬度和高度為“wrap_content”,代表實(shí)際大小。三、任務(wù)實(shí)施3.頁面2的布局(1)頁面2總體布局設(shè)計(jì)。在頁面2的activity_second.xml文件中,總體是按線性布局設(shè)計(jì)的,如圖2-37所示。圖2-37頁面2布局預(yù)覽三、任務(wù)實(shí)施代碼如下:<?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-狀態(tài)--><!--3-接受消息--><!--4-下一頁--></LinearLayout>整個(gè)頁面由4個(gè)部分構(gòu)成,全部采用線性布局,方向垂直。每部分如下:控制部分,有2個(gè)控制用的ImageView;狀態(tài)部分,其中2個(gè)TextView用于顯示溫度、濕度的值;接收消息部分,用于顯示MQTT接收消息;下一頁部分,由1個(gè)按鈕構(gòu)成,點(diǎn)擊跳轉(zhuǎn)下一頁。三、任務(wù)實(shí)施(2)準(zhǔn)備2個(gè)圖標(biāo)。在網(wǎng)上(比如阿里巴巴圖標(biāo)庫)下載2個(gè)圖標(biāo),如圖2-38所示,其中2個(gè)圖標(biāo)像素為128×128。名稱中的字母為小寫。圖2-38準(zhǔn)備2個(gè)圖標(biāo)粘貼2個(gè)圖標(biāo)文件到app→main→res→drawable目錄,如圖2-39所示。圖2-39添加圖標(biāo)到工程中三、任務(wù)實(shí)施(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>三、任務(wù)實(shí)施 <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>三、任務(wù)實(shí)施 <TextView android:text="關(guān)燈" 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個(gè)對象在父類布局中會均分排布。三、任務(wù)實(shí)施(4)頁面2的狀態(tài)部分布局。

<!--2.狀態(tài)--><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>三、任務(wù)實(shí)施 <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>程序中,狀態(tài)部分由2個(gè)小的線性布局組成,分別用于顯示溫度和顯示濕度。三、任務(wù)實(shí)施(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個(gè)文本框是垂直排布的。三、任務(wù)實(shí)施(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>里面只有一個(gè)按鈕,用于跳轉(zhuǎn)到下一頁。三、任務(wù)實(shí)施4.頁面3的布局如圖2-40所示,在activity_third.xml文件中設(shè)計(jì)頁面3的布局,由三部分組成:圖2-40頁面3布局預(yù)覽三、任務(wù)實(shí)施天氣API功能、反饋建議功能、跳轉(zhuǎn)到上一頁功能。代碼如下:<?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"三、任務(wù)實(shí)施 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