Android studio的相对布局

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 studio的相对布局_第1张图片

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

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

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 studio的相对布局_第2张图片

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

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

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 studio的相对布局_第3张图片

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

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

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

是否会出现出现我们正上,正下,正左,正右吗?
Android studio的相对布局_第4张图片
它并没有我们预期的那样存在居中按键的上下左右,反而相当怪异的布局,为什么会出现这样的情况呢?
我们可以在工程文件找到答案
Android studio的相对布局_第5张图片
原来是系统简单执行,那我们要怎样才能达到我们预期的效果
那要怎样才可以完成正上,正下,正左,正右呢?我们要将我们上面所学的知识点结合,通过工程文件可以看出,四个控件缺少居中处理,我们加入居中代码处理看看会怎样。

    //正上
    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"

通过居中调整,达到了我们预期的期望,完成了正方向的上下左右相对布局
Android studio的相对布局_第6张图片

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

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

Android studio的相对布局_第7张图片

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

你可能感兴趣的:(记录Android,开发学习)