Android01之LinearLayout和RelativeLayout

时间  2021-08-15 标签 Android 布局方式

由于本学期开了Android的课程，要求学期末做一个课程设计，所以我就抽出空闲时间学习Android的相关基础知识，并记录在博客上。接下来我先简单介绍一下什么是Android,Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备，如智能手机和平板电脑，由Google（谷歌）公司和开放手机联盟领导及开发。然后我普及一下Android的开发工具——Android Studio。Android Studio 是谷歌推出的一个Android集成开发工具，基于IDEA。类似 Eclipse ADT，Android Studio 提供了集成的 Android 开发工具用于开发和调试。

Android的布局方式有线性布局、相对布局、表格布局、相对布局、帧布局等布局方式。常用的是线性布局和相对布局，这次我主要给大家讲解这两种布局方式，并比较它们之间的差异。

LinearLayout

LinearLayout就是流式布局，流式布局有个特点，就是下一个控件的坐标原点由上一个控件来决定，你可以沿水平方向或者垂直方向上来排列你的控件。 如果你的控件是垂直排列的，那么你可以给控件指定水平的居中方式。我们用Android Studio新建一个项目，选择Empty Activity,我们找到app/res/layout目录，有一个activity_main.xml文件，里面默认是约束布局，我们改为线性布局，并增加一些属性，先上activity_main.xml的代码，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/ll_1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:orientation="vertical"
        android:background="@color/colorPrimary"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="50dp"
        android:paddingBottom="50dp">

        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorAccent">
        </View>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:orientation="horizontal"
        android:background="#0066FF"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp">
        <!-- android:gravity设置内部View的对齐方式 -->
        <!-- android:layout_weight代表权重比例 -->
        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:background="#FF8080"
            android:layout_weight="1">
        </View>

        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:background="#FF0033"
            android:layout_weight="2">
        </View>

        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:background="#55AA99"
            android:layout_weight="2">
        </View>
    </LinearLayout>
</LinearLayout>

 运行效果如下图所示：

上述代码组件模块树如下图所示：

我们可以看出，外布局是线性布局，设置为垂直方式，里面有两个线性布局方式，一个线性布局编号为ll_1,并包含一个View的视图，设置为垂直方式；另外一个设置为水平方式，包含三个View的视图。这里科普一下什么是View?

View是Android中所有控件的基类，不管是简单的TextView，Button还是复杂的LinearLayout和ListView，它们的共同基类都是View;View是一种界面层的控件的一种抽象，它代表了一个控件，除了View还有ViewGroup，从名字来看ViewGroup可以翻译为控件组，即一组View；在Android中，ViewGroup也继承了View，这就意味着View可以是单个控件，也可以是由多个控件组成的一组控件。

下面我们来详细解释一下上述代码用到的一些属性：

（1）首先最外层的LinearLayout,其layout_width代表宽，值为match_parent表示填充满整个父容器，并有自动调整的功能，layout_height代表高，同样也是填充满整个父容器，orientation属性表示布局方位，有水平和垂直两种方式；

（2）然后里面第一个线性布局，layout_width和layout_height都设为200dp,dp是Android中常用的单位，paddingLeft表示左边距20dp,paddingRight表示右边距20dp,paddingTop表示上边距50dp,paddingBottom表示下边距50dp,这个四边距设置均针对内部的View控件，里面的View控件layout_width和layout_height值均为match_parent,即可填充父容器——LinearLayout；

（3）里面第二个线性布局，由于设置orientation为水平布局，所以另外占一行。layout_marginTop表示与上一个Linearlayout相距20dp,layout_marginLeft表示与页面左边距为15dp,layout_marginRight表示与页面右边距为15dp,里面包含三个View的组件，高度均为50dp,宽度均为0dp,其中的layout_weight值为1,2,2,表示把页面宽度分为1:2:2，我们把背景颜色均设置为不同的颜色，以方便进行比较。

RelativeLayout

RelativeLayout是一种相对布局方式，相对布局是按照组件之间的相对位置来进行布局，例如某个组件在另一个组件的上、下、左、右。同样的，我们对activity_main.xml中的代码进行修改，修改后的代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
    tools:context=".MainActivity">

    <View
        android:id="@+id/view_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00AA33">
    </View>

    <!-- layout_toRightof 等价于 layout_toEndof -->
    <View
        android:id="@+id/view_2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FF0033"
        android:layout_toEndOf="@id/view_1">
    </View>

    <View
        android:id="@+id/view_3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#0000FF"
        android:layout_below="@id/view_1">
    </View>

    <LinearLayout
        android:id="@+id/ll_1"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:orientation="horizontal"
        android:layout_below="@id/view_3"
        android:background="@color/colorAccent"
        android:padding="15dp">
        <View
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary">
        </View>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#0000BB"
            android:padding="15dp">
            <View
                android:id="@+id/view_4"
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:background="#FF9900">
            </View>
            <!--layout_marginLeft 等价于 layout_marginStart -->
            <View
                android:id="@+id/view_5"
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:background="#FF9900"
                android:layout_toEndOf="@id/view_4"
                android:layout_marginStart="10dp">
            </View>
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

运行效果如下图所示：

上述代码组件模块树如下图所示：

接下来我们对代码进行解释：

（1）我们设置总体的布局为相对布局格式，其中view2在view1的右边，我们加了android:layout_toEndOf="@id/view_1"，其中也可以也可以写成layout_toRightOf,只不过系统更加推荐我们使用layout_toEndOf；

（2）同理,view3在view1的下面，我们在view3中添加了一行语句为android:layout_below="@id/view_1"，来表示view3在view1组件的下方；

（3）然后我们添加了LinearLayout线性样式，同样我们布局在view3组件的下面，内部组件的边距均设置为15dp,其中内部包含三个View组件，一个View组件宽度为100dp,在最左边，另外两个包含在RelativeLayout中；

（4）RelativeLayout中包含view4和view5两个组件，view4组件宽度为100dp,view5组件设置在view4的右边，并且加了一个左边距为10dp,代码为android:layout_marginStart="@id/view_4",这里的marginStart等价于marginLeft，不过系统更推荐我们使用marginStart。

好了，这次的Android常用布局的知识就分享到这里了，有疑惑的小伙伴可以在下方评论区留言哦！

联系我们 沪ICP备13005482号-10