android界面设计之布局管理

谈到android界面设计，各种布局样式不得不提！传统的布局方式有6种，我们会一一介绍。

在android studio2.2版本之后出现了一款超棒的布局方式，真正意义上的所见即所得，后面我们也会讲到！

1.LinearLayout：线性布局：线性布局又有两种，“垂直布局”和“水平布局”。

垂直布局每一行只能有一个控件（自己嵌套的不算）；

水平布局只有一行，所有的控件依次从左向右排列；

linearLayout中有一个重要的属性 android:layout_weight=""，这个weight在垂直布局时，代表行距；水平的时候代表列宽；weight值越大就越大，当把所有控件的weight都设置为相同值，比如1的时候，这些控件会平分父类控件的区域。

举个栗子：

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

     <Button
         android:layout_width="match_parent"
         android:layout_height="100dp"
         android:text="button2"
         android:textSize="60dp"
         android:background="#1188aa"
         android:enabled="false"/>

     <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="button1"
         android:textSize="50dp"
         android:enabled="false"/>

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="textview1"
         android:textSize="50dp"
         android:textColor="#991111"/>

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="textview2"
         android:textSize="60dp"
         android:textColor="#119911"/>

 </LinearLayout>

以上代码运行结果如下图：

2.FrameLayout：帧布局：这个比较简单，说白了就是在屏幕上定义一块空白的区域（当然也可以是整个屏幕）。

在这个空白的区域中，所有的控件都是在区域的左上角排列的，也就是说你没有办法指定这个区域里面控件的位置，后一个控件会一个接着一个的顶到左上角，这样就会覆盖前面的控件。

举个栗子：

 <?xml version="1.0" encoding="utf-8"?>
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

     <Button
         android:layout_width="match_parent"
         android:layout_height="100dp"
         android:text="button2"
         android:textSize="60dp"
         android:background="#1188aa"
         android:enabled="false"/>

     <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="button1"
         android:textSize="50dp"
         android:enabled="false"/>

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="textview1"
         android:textSize="50dp"
         android:textColor="#991111"/>

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="textview2"
         android:textSize="60dp"
         android:textColor="#119911"/>

 </FrameLayout>

以上代码运行如下图，细心的你可能会发现上述的button中有一个enable属性，如果把这行代码去掉，那么button就会覆盖textview，这与我们之前讲的后一个组件会覆盖前一个组件是相违背的，你问我为什么，我也不知道，如知内情，望相告之：

3.RelativeLayout：相对布局：相对布局可以理解为某一个元素为参照物，来定位的布局方式，这个稍微复杂一些，因为其属性比较多，一个一个来看：

首先，我们定义两个button，并且把btn1放在屏幕的最中间，如图1，

我们在btn2中添加一行代码：android:layout_below="@+id/btn1"，如图2，

把这行代码换成：android:layout_alignBottom="@+id/btn1"，如图3，

再换一下：android:layout_alignParentBottom="true"，如图4，

再换一下：android:layout_marginRight="200dp"，如图5，连btn2的形状都挤变形了，是不是很神奇，想要真正领悟，必须上代码亲自试探试探！

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

     <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerInParent="true"
         android:id="@+id/btn1"
         android:text="button1"
         android:textSize="50dp"
         android:enabled="false"/>

     <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/btn2"

         android:layout_marginRight="200dp"

         android:text="button2"
         android:textSize="60dp"
         android:background="#1188aa"
         android:enabled="false"/>

     <!--<TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/tv1"
         android:text="textview1"
         android:textSize="50dp"
         android:textColor="#991111"/>

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/tv2"
         android:text="textview2"
         android:textSize="60dp"
         android:textColor="#119911"/>-->

 </RelativeLayout>

4.AbsoluteLayout：绝对布局：这个也很简单，主要属性就两个 layout_x 和 layout_y 分别定义 这个组件的绝对位置。 即，以屏幕左上角为（0，0）的坐标轴的x，y值，当向下或向右移动时，坐标值将变大。这个使用较少，因为其在不同设备上的显示大相径庭。但我还是举例说明吧！

 <?xml version="1.0" encoding="utf-8"?>
 <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

     <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/btn1"
         android:text="button1"
         android:textSize="50dp"

         android:layout_x="100dp"
         android:layout_y="50dp"/>

     <Button
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:id="@+id/btn2"
         android:text="button2"
         android:textSize="50dp"

         android:textColor="#ff1111"

         android:layout_x="100dp"
         android:layout_y="150dp"/>

 </AbsoluteLayout>

我们把btn2的宽度设置为填满整个父控件，可以发现结果如上图，看来，这个x和y针对的是控件的左上定点，并非控件中心点，这个需要注意。

5.TableLayout：表格布局：表格布局类似Html里面的Table。每一个TableLayout里面有表格行TableRow，TableRow里面可以具体定义每一个元素。

表格由列和行组成许多的单元格。表格允许单元格为空。单元格不能跨列，这与HTML 中的不一样。TabRow只论行，不论列（列自定义）。

举例说明：

 <?xml version="1.0" encoding="utf-8"?>
 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

     <TableRow>
         <Button
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:id="@+id/btn1"
             android:text="button1"
             android:textSize="30dp"

             android:layout_x="100dp"
             android:layout_y="50dp"/>

         <Button
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:id="@+id/btn2"
             android:text="button2"
             android:textSize="20dp"
             android:textColor="#ff1111"
             android:layout_x="100dp"
             android:layout_y="150dp"/>

     </TableRow>

     <TableRow>

         <TextView android:text="第一行第0列"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"/>
         <TextView android:text="第一行第1列"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"/>
         <TextView android:text="第一行第2列"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"/>

     </TableRow>

 </TableLayout>

6.GridLayout:网格布局：网格布局是android4.0之后提出来的一种布局方式，使用它的理由有两个：1，减少布局嵌套层次从而提高性能；2，对需要复杂对齐的布局，非他莫属。不使用它的理由：由于太灵活导致学习难度比较大。在这里就不详细解释了，大家可以参考文档：http://www.jianshu.com/p/441d60be7d8a。

举个栗子吧：

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:orientation="horizontal"
    android:rowCount="5"
    android:columnCount="4">

    <Button
        android:id="@+id/one"
        android:text="1"/>
    　　<Button
    android:id="@+id/two"
    android:text="2"/>
    　　　<Button
    android:id="@+id/three"
    android:text="3"/>
    　　<Button
    android:id="@+id/devide"
    android:text="/"/>
    　　<Button
    android:id="@+id/four"
    android:text="4"/>
    　　<Button
    android:id="@+id/five"
    android:text="5"/>
    　　<Button
    android:id="@+id/six"
    android:text="6"/>
    　　<Button
    android:id="@+id/multiply"
    android:text="×"/>
    　　<Button
    android:id="@+id/seven"
    android:text="7"/>
    　　<Button
    android:id="@+id/eight"
    android:text="8"/>
    　　<Button
    android:id="@+id/nine"
    android:text="9"/>
    <Button
        android:id="@+id/minus"
        android:text="-"/>
    <Button
        android:id="@+id/zero"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="0"/>
    　　<Button
    android:id="@+id/point"
    android:text="."/>
    <Button
        android:id="@+id/plus"
        android:layout_rowSpan="2"
        android:layout_gravity="fill"
        android:text="+"/>
    <Button
        android:id="@+id/equal"
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        android:text="="/>

</GridLayout>

7.ConstraintLayout：谷歌在2016年的IO大会上推出的一种新的布局方式—-ConstraintLayout，这局是一种约束型的布局方式。这绝对是你最应该了解的神器，有了它，天黑都不怕！这里隆重献上一个大神的作品，必须要读，必须要读，必须要读啊！

这个讲的非常清晰，我就不多废话了：

Android新特性介绍，ConstraintLayout完全解析