這次我們開始進入android上位機的開發，根據上次的介紹，這次針對ESP8266的上位機我們會采用與公網服務器對接的方式來控制下位機。這樣我們手機無論是使用數據流量上網還是連上公網的wifi都可以控制遠程的下位機，這也符合我們智能家居的需求。
功能需求
首先，我們先確定一下我們所需要的功能，如果是一個完整的智能家具項目那么需要的功能是比較復雜的，比如除了遙控開關外，還需要定時開關，移動熱點，軟件版本升級等功能。在這里我就只講簡單的遙控開關功能。
界面設計
當我們確定了我們想要的功能之后，我們就可以設計實現我們功能所需要的界面了。
遙控開關這種功能，無非就是需要一個按鈕和一個顯示開關狀態的控件。所以界面設計的話比較簡單。
首先，我們編寫layout里的activity_main.xml，由于我們的功能簡單，所以只需要這一個基本布局文件就夠了。
基本布局
在這里介紹一下android的基本布局：
-
LinearLayout
線性布局，這個東西，是一個一個條形格子從上往下羅列在屏幕上。每一個LinearLayout里面又可分為垂直布局（android:orientation="vertical"）和水平布局（android:orientation="horizontal" ）。當垂直布局時，每一行就只有一個元素，多個元素依次垂直往下；水平布局時，只有一行，每一個元素依次從左向右排列。linearLayout中有一個重要的屬性 android:layout_weight="1"，這個weight在垂直布局時，代表行距；水平的時候代表列寬；weight值越大就越大。
示例圖片：
Paste_Image.png -
FrameLayout
FrameLayout（幀布局）是最簡單的一個布局對象。它被定制為你屏幕上的一個空白備用區域，之后你可以在其中填充一個單一對象 。比如，一張你要發布的圖片。所有的子元素將會固定在屏幕的左上角；你不能為FrameLayout中的一個子元素指定一個位置，后一個子元素將會直接在前一個子元素之上進行覆蓋填充，把它們部份或全部擋住（除非后一個子元素是透明的）。
效果圖：
Paste_Image.png AbsoluteLayout
絕對布局，這個布局方式很簡單，主要屬性就兩個 layout_x 和 layout_y 分別定義 這個組件的絕對位置。 即，以屏幕左上角為（0，0）的坐標軸的x，y值，當向下或向右移動時，坐標值將變大。AbsoluteLayout 沒有頁邊框，允許元素之間互相重疊（盡管不推薦）。該布局在Android2.0 API文檔中標明該類已經過期,且我們通常不推薦使用 AbsoluteLayout ，因為它使界面代碼太過剛性，以至于在不同的設備不同的分辨率上可能不能很好地工作。-
RelativeLayout
相對布局是按照組件之間的相對位置來布局，比如在某個組件的左邊，右邊，上面和下面等。
RelativeLayout用到的一些重要的屬性：
第一類:屬性值為true或false
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相對于父元素完全居中
android:layout_alignParentBottom 貼緊父元素的下邊緣
android:layout_alignParentLeft 貼緊父元素的左邊緣
android:layout_alignParentRight 貼緊父元素的右邊緣
android:layout_alignParentTop 貼緊父元素的上邊緣
android:layout_alignWithParentIfMissing 如果對應的兄弟元素找不到的話就以父元素做參照物
第二類：屬性值必須為id的引用名“@id/id-name”
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左邊
android:layout_toRightOf 在某元素的右邊
android:layout_alignTop 本元素的上邊緣和某元素的的上邊緣對齊
android:layout_alignLeft 本元素的左邊緣和某元素的的左邊緣對齊
android:layout_alignBottom 本元素的下邊緣和某元素的的下邊緣對齊
android:layout_alignRight 本元素的右邊緣和某元素的的右邊緣對齊
第三類：屬性值為具體的像素值，如30dip，40px
android:layout_marginBottom 離某元素底邊緣的距離
android:layout_marginLeft 離某元素左邊緣的距離
android:layout_marginRight 離某元素右邊緣的距離
android:layout_marginTop 離某元素上邊緣的距離
EditText的android:hint
設置EditText為空時輸入框內的提示信息。
android:gravity
android:gravity屬性是對該view 內容的限定。比如一個 button 上面的text. 你可以設置該 text 在view的靠左，靠右等位置．以button為例，android:gravity="right"則button上面的文字靠右
android:layout_gravity
android:layout_gravity是用來設置該view相對與起父view 的位置。比如一個button 在linearlayout里，你想把該button放在靠左、靠右等位置就可以通過該屬性設置。以button為例，android:layout_gravity="right" 則 button 靠右
android:layout_alignParentRight
使當前控件的右端和父控件的右端對齊。這里屬性值只能為true或false，默認false。
這是一個我經常使用的布局方式，這種方式可以讓我們的app能夠在各種屏幕分辨率設備上有更好的適應性。
示例圖片：
Paste_Image.png TableLayout
表格布局是一個ViewGroup以表格顯示它的子視圖（view）元素，即行和列標識一個視圖的位置。
表格布局常用的屬性如下：
android:collapseColumns：隱藏指定的列
android:shrinkColumns：收縮指定的列以適合屏幕，不會擠出屏幕android:stretchColumns：盡量把指定的列填充空白部分android:layout_column:控件放在指定的列
android:layout_span ：該控件所跨越的列數
實際代碼
我們需要一個“開”的按鈕，一個“關”的按鈕，和一個顯示狀態的文本框。
因此，在RelativeLayout的主體部分加上以下代碼：
<TextView
android:id="@+id/tx1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
/>
<Button
android:id="@+id/btn1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="@id/tx1"
android:layout_alignParentRight="true"
android:text="關"
/>
<Button
android:id="@+id/btn2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="@id/tx1"
android:layout_alignParentLeft="true"
android:text="開"
/>```
##小結
這次介紹了android的基本布局，并且將我們上位機的簡單界面設計出來，下一次再介紹有關的程序代碼。