布局管理器

在这里插入图片描述

一个页面上元素会有很多，会有很多的组件摆放在同一个页面上，这些元素的相互之间摆放的位置是如何确定的？他们之间的联系是谁来管理他们的？那么我们就是通过布局管理器来实现的。我们主要讲解两个布局，一个是线性布局还有一个是相对布局，当然在安卓体系中布局方式也是不止这两种还有包括帧布局、基本不用的绝对布局、网格布局。线性布局和相对布局是使用最为频繁，在百分之九十九的情况下用这两种就可以了，其他布局也一般不会使用，所以我们从最实际的角度出发，只讲这两个布局。

线性布局

最常用属性：android:id（给控件设置id，通过标识找到）、android:layout_width（设置宽度）、android:layout_height（设置高度）、android:background（设置背景，背景可以是颜色、图片、自定义的xml文件）、android:layout_margin（设置外边距）、android:layout_padding（设置内边距）、android:orientation（线性布局以列或行来显示内部子元素），这些属性不仅是LinearLayout常用的包括RelativeLayout、控件都会使用这些属性，除了android:orientation只有在特殊属性中使用。 1、创建一个安卓工程在这里插入图片描述

2、打开activity_main.xml文件，这里使用的是相对布局。（在android->src->res->layout->activity_main.xml）在这里插入图片描述

3、修改为线性布局，将RelativeLayout修改为LinearLayout 在这里插入图片描述

4、删除文件中TextView中的内容重新写在这里插入图片描述

5、根布局修改为了线性布局，在里面继续写子元素也是线性布局

<LinearLayout
    android:id="@+id/a"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#000000">  
</LinearLayout>

标识为a，宽度和高度匹配父控件，垂直摆放，背景颜色为黑色在这里插入图片描述

6、运行程序查看结果先打开AVD（httpd-dev-server->vnc_lite.html->AVD），再build，最后run，在AVD中找到程序Android Example 在这里插入图片描述

7、修改高度和宽度为20dp，安卓中的单位为dp

 <LinearLayout
     android:id="@+id/a"
     android:layout_width="20dp"
     android:layout_height="20dp"
     android:orientation="vertical"
     android:background="#000000">  

 </LinearLayout>

在这里插入图片描述

8、运行程序、先将之前的程序在AVD上删除，点击uninstall 在这里插入图片描述

10、运行程序，先build再run 在这里插入图片描述

11、写一个View，View是所有view的父件，无论是TextView、buttonView等 View的宽度和高度都是匹配父控件的，父控件的宽度和高度为20dp，背景颜色为红色，所以运行的效果是红色挡住黑色 <View android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FF0033"/> 在这里插入图片描述

12、运行程序，先删除上一个程序的app，再运行当前程序（uninstall->build->run）在这里插入图片描述

13、设置一个内边距为10dp，父控件的宽度和高度改为200dp android:padding="10dp" 在这里插入图片描述

14、运行效果（uninstall->build->run）在这里插入图片描述

15、再写一个线性布局，水平排列，宽度为父控件的宽度，因为上一个子控件占用了200dp所以这个控件只占用剩下的宽度，高度为200dp，背景颜色为蓝色

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:orientation="horizontal"
        android:background="#0066FF">

    </LinearLayout>

在这里插入图片描述

16、运行效果（uninstall->build->run）在这里插入图片描述

17、在父类控件中加入垂直排列，既然是垂直排列，蓝色的宽度就是整个屏幕了 android:orientation="vertical" 在这里插入图片描述

18、运行效果（uninstall->build->run）在这里插入图片描述

19、让各个子控件之间距离10dp，有两个种方法，第一种是在蓝色控件中加入marginTop，距离上个控件 android:layout_marginTop="10dp" 在这里插入图片描述

20、运行效果（uninstall->build->run）在这里插入图片描述

21、第二种方法是在黑色的控件中加入marginBottom，距离下个控件10dp android:layout_marginBottom="10dp" 在这里插入图片描述

22、运行效果（uninstall->build->run）在这里插入图片描述

相对布局

除了上节课所讲的线性布局所列出来的宽度、高度、id，相对布局同样也具有，除此之外，我们还要学习一些相对布局所特有的属性，android:layout_toLeftOf（在谁的左边）、android:layout_toRigthOf（在谁的右边）、android:layout_alignBottom（跟谁的底部对齐）、android:layout_alignParentBottom（跟父控件底部对齐）、android:layout_below（在谁的下面）相对布局是参照的概念，我参照你，你参照我的。 1、创建一个安卓工程在这里插入图片描述

2、打开activity_main.xml。（在android->src->res->layout->activity_main.xml）在这里插入图片描述

3、打开安卓模拟器（httpd-dev-server->vnc_lite.html->AVD）在这里插入图片描述

4、先添加一个宽度和高度都为100dp，背景为黑色的正方形

<View
    android:id="@+id/a"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#000000" />

在这里插入图片描述

5、运行效果，build->run，黑色正方形默认在左上角在这里插入图片描述

6、使黑色方块在模拟器的左下角，在父控件的底部，默认左侧 android:layout_alignParentBottom="true" 在这里插入图片描述

7、运行效果，先删除之前运行的程序，再运行新的程序（uninstall->build->run）在这里插入图片描述

8、使黑色方块在右下方 android:layout_alignParentRight="true" 在这里插入图片描述

9、运行效果（uninstall->build->run）在这里插入图片描述

10、添加一个红色的方块在黑色的右侧

<View 
        android:id="@+id/b"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FF0033"
        android:layout_toRightOf="@id/a"/>

在这里插入图片描述

11、运行效果（uninstall->build->run）在这里插入图片描述

12、使红色的方块在黑色的下面 android:layout_below="@id/a" 在这里插入图片描述

13、运行效果（uninstall->build->run）在这里插入图片描述

14、线性布局和相对布局相结合，可以相互嵌套

<LinearLayout
        android:id="@+id/c"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_below="@id/b"
        android:background="#0066FF">
    </LinearLayout>

在这里插入图片描述

15、运行效果（uninstall->build->run）在这里插入图片描述

余老师带你学习智能终端

布局管理器

线性布局

相对布局