RelativeLaytou初步

上一次我们说到在res目录下的layout文件夹中保存的是我们的Android程序的界面布局，这一次我们就来看一下我么的Android应用的

界面是如何绘制的。先来看一下上次的activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

>

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world" />

</RelativeLayout>

我们发现其实这个布局文件就是一个xml文件，Android之所以这样设计也是参考了著名的MVC框架，把一些描述界面(View)的功能抽出来并且用

xml形式来描述，这样会使得代码分工更明确。这里第一层是RelativeLayout 标签，里面有一个TextView标签下面我们就详细的分析一下上面这个xml文件中每一行代码的详细的内容：

1. RelativeLayout 标签

    1.1 RelativeLayout(相对布局) 是Android中常用的5个布局中的一个，其它的4个是LinearLayout  (线性布局)、FrameLayout  (单帧布局)、AbsoluteLayout  (绝对布局)、GridLayout  (网格布局)

                从名字我们大概可以猜测出来他们之间的区别，AbsoluteLayout  这种布局是不可以改变的所以叫绝对布局，不能很好的适应各种不同的分辨率，因此这种布局用的很少，应用

最多的是RelativeLayout和LinearLayout。布局是可以相互嵌套的，就如同在大容器里放入一个小的容器一样。

                RelativeLayout 布局的特点是里面的子元素(可以是控件也可以是容器)可以使用相对之间的位置或者和容器之间的位置关系进行定位。

        1.2xmlns:android="http://schemas.android.com/apk/res/android"和xmlns:tools="http://schemas.android.com/tools"

            这两句可以暂时理解为你在告诉IDE你准备使用Android命名空间的通用属性和工具。

        1.3    android:layout_width="match_parent"

         android:layout_height="match_parent"

    这两个属性非常的重要几乎所有的布局或者控件都要使用到这两个属性。1.2中的声明告诉了IDE我们使用Android命名空间下的通用属性，那么这里的"android:"就可以理解了就代表

了这个命名空间下的layout_width和layout_height。 这两个标签是相对于父容器(控件)，这个子元素的长和宽应该怎么设置，常用的属性有3个：wrap_content,fill_parent,match_parent。其中

wrap_content表示根据内容来确定长和宽，fill_parent表示要填满父容器(控件)，match_parent其实和fill_parent效果是一样的只是Android升级后改了一个名字。

        1.4 padding 和 margin

        android:paddingBottom="@dimen/activity_vertical_margin"

        android:paddingLeft="@dimen/activity_horizontal_margin"

        android:paddingRight="@dimen/activity_horizontal_margin"

        android:paddingTop="@dimen/activity_vertical_margin"

      padding是控件的内容相对控件的边缘的边距．margin是控件边缘相对父空间的边距。

   到这里其实我们大概知道了这个布局的样子，设置了一个RelativeLayout 布局，在这个布局里的元素的内容要相对于控件的上下和左右有一个间距。

2. TextView 文本控件

      android:text="@string/hello_world"

        这个标签指定了文本的内容，这个内容在哪里呢？上一章说过在values目录下有一个strings.xml，有关文本的值的内容都保存在这个xml中。

3. RelativeLayout 特有的标签 android:layout_below  ndroid:layout_above android:layout_toLeftOf android:layout_toRightOf

    使用方法为ndroid:layout_toLeftOf="@id/textview" 表示是在id为textview的左边。其他的几个标签也是表示在这id表示的控件的那个方向。注意：这里仅仅表示在把控件的某一边缘和指定ID的控件

    某个边缘重合。具体的为：

    android:layout_above="@id/xxx"  --将控件置于给定ID控件之上
    android:layout_below="@id/xxx"  --将控件置于给定ID控件之下

    android:layout_toLeftOf="@id/xxx"  --将控件的右边缘和给定ID控件的左边缘对齐
    android:layout_toRightOf="@id/xxx"  --将控件的左边缘和给定ID控件的右边缘对齐

   让我们看一个例子：

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <TextView

        android:id="@+id/textview"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world"

        android:layout_centerInParent="true"  />

    <Button 

        android:id="@+id/btn1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button1"

        android:layout_toLeftOf="@id/textview"/>

    <Button 

        android:id="@+id/btn2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button2"

        android:layout_toRightOf="@id/textview"/>

    <Button 

        android:id="@+id/btn3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button3"

        android:layout_above="@id/textview"/>

    <Button 

        android:id="@+id/btn4"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button4"

        android:layout_below="@id/textview"/>

</RelativeLayout>

效果如下：

产生这种效果的原因在于，这个TextView的控件大小为，这4个button分别紧贴这个TextView控件的上下左右。

要想做到更好的效果还需要再使用其他的标签继续调节。

    <Button 

        android:id="@+id/btn3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button3"

        android:layout_above="@id/textview"

        android:layout_toRightOf="@id/btn1"/>

    <Button 

        android:id="@+id/btn2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button2"

        android:layout_toRightOf="@id/btn3"      

        />

     将button2和button3做如上修改就可以达到如下的效果：

这里有一个比较有趣的现象如果不把button3和button2换一下顺序，会报错说找不到btn3，因为在执行btn2时btn3还没声明。