ESP8266学习笔记（八）

这次我们开始进入android上位机的开发，根据上次的介绍，这次针对ESP8266的上位机我们会采用与公网服务器对接的方式来控制下位机。这样我们手机无论是使用数据流量上网还是连上公网的wifi都可以控制远程的下位机，这也符合我们智能家居的需求。

功能需求

首先，我们先确定一下我们所需要的功能，如果是一个完整的智能家具项目那么需要的功能是比较复杂的，比如除了遥控开关外，还需要定时开关，移动热点，软件版本升级等功能。在这里我就只讲简单的遥控开关功能。

界面设计

当我们确定了我们想要的功能之后，我们就可以设计实现我们功能所需要的界面了。
遥控开关这种功能，无非就是需要一个按钮和一个显示开关状态的控件。所以界面设计的话比较简单。
首先，我们编写layout里的activity_main.xml，由于我们的功能简单，所以只需要这一个基本布局文件就够了。

基本布局

在这里介绍一下android的基本布局：

1. LinearLayout
   线性布局，这个东西，是一个一个条形格子从上往下罗列在屏幕上。每一个LinearLayout里面又可分为垂直布局（android:orientation="vertical"）和水平布局（android:orientation="horizontal" ）。当垂直布局时，每一行就只有一个元素，多个元素依次垂直往下；水平布局时，只有一行，每一个元素依次从左向右排列。linearLayout中有一个重要的属性 android:layout_weight="1"，这个weight在垂直布局时，代表行距；水平的时候代表列宽；weight值越大就越大。
   示例图片：
   

   Paste_Image.png

2. FrameLayout
   FrameLayout（帧布局）是最简单的一个布局对象。它被定制为你屏幕上的一个空白备用区域，之后你可以在其中填充一个单一对象 。比如，一张你要发布的图片。所有的子元素将会固定在屏幕的左上角；你不能为FrameLayout中的一个子元素指定一个位置，后一个子元素将会直接在前一个子元素之上进行覆盖填充，把它们部份或全部挡住（除非后一个子元素是透明的）。
   效果图：
   

   Paste_Image.png

3. AbsoluteLayout
   绝对布局，这个布局方式很简单，主要属性就两个 layout_x 和 layout_y 分别定义 这个组件的绝对位置。 即，以屏幕左上角为（0，0）的坐标轴的x，y值，当向下或向右移动时，坐标值将变大。AbsoluteLayout 没有页边框，允许元素之间互相重叠（尽管不推荐）。该布局在Android2.0 API文档中标明该类已经过期,且我们通常不推荐使用 AbsoluteLayout ，因为它使界面代码太过刚性，以至于在不同的设备不同的分辨率上可能不能很好地工作。

4. 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

5. TableLayout
   表格布局是一个ViewGroup以表格显示它的子视图（view）元素，即行和列标识一个视图的位置。
   表格布局常用的属性如下：
   android:collapseColumns：隐藏指定的列
   android:shrinkColumns：收缩指定的列以适合屏幕，不会挤出屏幕android:stretchColumns：尽量把指定的列填充空白部分android:layout_column:控件放在指定的列
   android:layout_span ：该控件所跨越的列数

Paste_Image.png

实际代码

我们需要一个“开”的按钮，一个“关”的按钮，和一个显示状态的文本框。
因此，在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的基本布局，并且将我们上位机的简单界面设计出来，下一次再介绍有关的程序代码。