Android笔记（二）布局三：RelativeLayout相对布局

RelativeLayout相对布局

这一部分主要是掌握两点：

1、对于父控件的位置布局。

2、对于同级别控件的位置布局。

如图：

一、对于父控件的相对布局

1、选用一个button控件来做演示，拖拽后，删除位置属性我们看button控件会被系统默认安排到什么位置？

<?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:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        
        android:text="Button" />
    
</RelativeLayout>

对于描述button的新信息只有人如下一小段：描述位置的只有标红的两行。

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

很明显控件会被系统的安排在左上角的位置。

2、我们接着修改布局文件：增加android:layout_centerHorizontal="true"

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Button" />

centerHorizontal从翻译上看是：中间水平布局，我们看看运行效果：

可以看到button控件移动到了最上方中间的位置，纵向方向上并没有改动。

3、我们继续增加代码：

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Button" />

centerVertical：根据上面的对比不难理解这是纵向中间位置。 

centerVertical+centerHorizontal那就是因该在正中间的位置喽，下面运行一下证明我们的猜测：

哈哈，果真是，是不是很神奇。

4、我们再继续，当我接触Android开发好几年之后才发现有这样一个属性：

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        anandroid:text="ButtonCenter" />

再看下效果：

也就是说，这一行代码就可以将button按钮成功的放置在正中央的位置。

记得但是我的任务是将这些button的按键对应设备上的Led灯的状态，界面的开发是另一位同事在做，我主要解决底层Linux的驱动以及Android JNI c的过程，大家请原谅我。

5、我们再再继续，为了表示我当年对centerInParent的歉意，在本篇我决定多码字一些。

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:text="Button" />

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:text="Button" />

请注意代码的变化，高度属性改为match_parent，替换 android:layout_alignParentLeft="true"。

align：对齐 parent：父控件 Left最左端alignParentLeft。

将button控件布置在最左端，并且高度适配父控件的高度。

6、同理我们完成最后一个相对父控件的布局讲解：

对应的全部代码为：

<?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="match_parent"
        android:layout_alignParentLeft="true"
        android:text="Button" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:text="Button" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:text="Button" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Button" />
    
</RelativeLayout>

我们以button控件为例子讲解了子控件对于父控件的布局。

这里要特别留意6个布局属性的相互作用所产生的效果：

1）android:layout_width="wrap_content"
2）android:layout_height="match_parent"

android:layout_width="match_parent"
android:layout_height="wrap_content"

3）android:layout_alignParentLeft="true"
 4）android:layout_alignParentRight="true"
 5）android:layout_alignParentTop="true"
6） android:layout_alignParentBottom="true"

二、子控件相对于子控件的布局

1、在说明之前我们需要再恢复如图下的布局：

这一次布局代码有些不一样：

<?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:id="@+id/button_mid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button" />
    
</RelativeLayout>

<Button
        android:id="@+id/button_mid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button" />

多加了一行带有ID的属性，这个button作为我们子控件的相对位置参照物，在代码角度需要id作为参照。

我们继续修改代码：

<?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:id="@+id/button_mid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="ButtonMid" />
    
     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button_mid"
        android:layout_alignLeft="@id/button_mid"
        android:text="Button" />
    
</RelativeLayout>
 

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button_mid"
        android:layout_alignLeft="@id/button_mid"
        android:text="Button" />

增加了一个Button控件，同时有相应的两行布局属性：

android:layout_above="@id/button_mid"   针对@id/button_mid控件在其“上部”
android:layout_alignLeft="@id/button_mid"针对@id/button_mid控件“左对齐”

如下：

同理我们可以继续完成下面的视图布局：

修改代码如下：

<?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:id="@+id/button_mid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="ButtonMid" />
    
     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button_mid"
        android:layout_alignLeft="@id/button_mid"
        android:text="Button" />
     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button_mid"
        android:layout_alignLeft="@id/button_mid"
        android:text="Button" />
     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/button_mid"
        android:layout_toLeftOf="@id/button_mid"
        android:text="Button" />
     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/button_mid"
        android:layout_toRightOf="@id/button_mid"
        android:text="Button" />
    
</RelativeLayout>
 

三、总结

1、对于父控件的相对位置属性字符串中都有一个*parent*请留意。

相对主要从四个方位考虑：“上”、“下”、“左”、“右”。

2、子类对子类首先要明确参照物，对参照物增加ID值，对这个参照物布局主要考虑两个方向四中坐标。

	上	下
左	上左	下左
右	上右	下右