Android studio 的相对布局学习

文章目录

• Android studio 的相对布局学习
• 控件基于页面居中
• 控件基于页面左上、右上、左下、右下
• 控件基于居中控件的左上、右上、左下、右下
• 控件基于居中控件的正上、正下、正左、正右

相对布局——RealativeLayout，在安卓开发中存在非常大的作用，我们可以使用相对布局来更巧妙的控制我们的控件的摆放。今天我们学习控件基于页面居中，左上，右上，左下，右下，基于居中控件的左上，右上，左下，右下，为了方便学习，这里的控件均采用按钮。

控件基于页面居中

完成页面居中处理，我们要先设置我们的布局设置

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

完成这一步过后，可以通过界面布局完成控件居中

 android:layout_centerInParent="true"

为了后续相对布局的继续学习，我们需要将相对控件基于第一位

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="居中"
    android:layout_centerInParent="true"
    android:textAllCaps="false"
    />

控件基于页面左上、右上、左下、右下

控件基于页面的布局设置，基于这几条设置

android:layout_alignParentTop="true"   //页面顶部
android:layout_alignParentBottom="true"  //页面底部
android:layout_alignParentLeft="true"   //页面左侧
android:layout_alignParentRight="true"  //页面右侧

通过这几条设置相互组合即可完成控件基于页面左上、右上、左下、右下

//左上
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"

//右上
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"//不设置基于右侧，会自动设置为基于左侧

//左下
android:layout_alignParentBottom="true"  //不设置基于底部，会自动设置为基于顶部
android:layout_alignParentLeft="true"   

//右下
android:layout_alignParentBottom="true"  //不设置基于底部，会自动设置为基于顶部
android:layout_alignParentRight="true"  //不设置基于右侧，会自动设置为基于左侧

我们将这些设置运用到控件上

控件基于居中控件的左上、右上、左下、右下

控件基于居中控件，基于这几条设置

android:layout_above="@id/button3"    //居中控件顶部
android:layout_below="@id/button3"    //居中控件底部
android:layout_toLeftOf="@id/button3"  //居中控件左侧
android:layout_toRightOf="@id/button3"  //居中控件右侧

通过这几条设置相互组合即可完成控件基于居中控件左上、右上、左下、右下

//基于居中控件左上
android:layout_toLeftOf="@id/button3"
android:layout_above="@id/button3"

//基于居中控件右上
android:layout_toRightOf="@id/button3"
android:layout_above="@id/button3"

//基于居中控件左下
android:layout_toLeftOf="@id/button3"
android:layout_below="@id/button3"

//基于居中控件右下
android:layout_toRightOf="@id/button3"
android:layout_below="@id/button3"

将这些设置运用到控件中
得到了我们想要的控件基于居中控件的左上、右上、左下、右下效果

控件基于居中控件的正上、正下、正左、正右

如果将基于居中控件的设置单独设置上下左右会出现怎样的情况呢？

android:layout_above="@id/button3"    
android:layout_below="@id/button3"    
android:layout_toLeftOf="@id/button3"  
android:layout_toRightOf="@id/button3"  

是否会出现出现我们正上，正下，正左，正右吗？

它并没有我们预期的那样存在居中按键的上下左右，反而相当怪异的布局，为什么会出现这样的情况呢？
我们可以在工程文件找到答案

原来是系统简单执行，那我们要怎样才能达到我们预期的效果
那要怎样才可以完成正上，正下，正左，正右呢?我们要将我们上面所学的知识点结合，通过工程文件可以看出，四个控件缺少居中处理，我们加入居中代码处理看看会怎样。

    //正上
    android:layout_centerInParent="true"
    android:layout_above="@id/button3"
    
    //正下
    android:layout_centerInParent="true"
    android:layout_below="@id/button3"

    //正左
    android:layout_toLeftOf="@id/button3"
    android:layout_centerInParent="true"

    //正右
    android:layout_toRightOf="@id/button3"
    android:layout_centerInParent="true"

通过居中调整，达到了我们预期的期望，完成了正方向的上下左右相对布局

下面贴上完整布局代码以及效果：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

//居中控件
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="居中"
        android:layout_centerInParent="true"
        android:textAllCaps="false"
        />

//基于页面四角控件
   <Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="左上"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:textAllCaps="false"
    />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右上"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:textAllCaps="false"
        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左下"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:textAllCaps="false"
        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右下"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:textAllCaps="false"
        />

//基于控件四角
    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中左上"
        android:layout_toLeftOf="@id/button3"
        android:layout_above="@id/button3"
        android:textAllCaps="false"
        />
    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中右上"
        android:layout_toRightOf="@id/button3"
        android:layout_above="@id/button3"
        android:textAllCaps="false"
        />
    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中左下"
        android:layout_toLeftOf="@id/button3"
        android:layout_below="@id/button3"
        android:textAllCaps="false"
        />
    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中右下"
        android:layout_toRightOf="@id/button3"
        android:layout_below="@id/button3"
        android:textAllCaps="false"
        />
        
     //基于控件正方向
    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="上"
        android:layout_centerInParent="true"
        android:layout_above="@id/button3"
        android:textAllCaps="false"
        />
    <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="下"
        android:layout_centerInParent="true"
        android:layout_below="@id/button3"
        android:textAllCaps="false"
        />
    <Button
        android:id="@+id/button12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左"
        android:layout_toLeftOf="@id/button3"
        android:layout_centerInParent="true"
        android:textAllCaps="false"
        />
    <Button
        android:id="@+id/button13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右"
        android:layout_toRightOf="@id/button3"
        android:layout_centerInParent="true"
        android:textAllCaps="false"
        />
</RelativeLayout>

相对布局的学习目前就这么多了，学无止境，继续努力
大家一起学习努力