安卓学习笔记--------安卓六大布局

目录

一、LinearLayout 线性布局

二、RelativeLayout 相对布局

2.1 子控件相对于父控件布局

2.相对给定Id控件

 3. 相对布局的居中

三、ConstraintLayout约束布局

3.1 常用属性

3.2 角度定位

四、FrameLayout帧布局

4.1 常用属性

五、AbsoluteLayout绝对布局

六、GridLayout 网格布局

6.1 常用属性

---

一、LinearLayout 线性布局

主要属性：

1. orientation设置布局管理器内组件的排列方式，可以设置为horizontal（横向）、vertical（纵向）两个值之一

左图是横向布局，右图是纵向布局：

        

2.gravity设置布局管理器内组件的对齐方式，layout_gravity控制自己在父元素的位置。

其中gravity的取值如下：

举个例子，若一个布局的设置了 gravity=“center_vertical”,那么其管理下的控件都会纵向居中：

左图为布局代码，右图为布局的样子

    

 

二、RelativeLayout 相对布局

相对布局可以：

• 子控件相对于父控件布局
• 控件相对于给定id的控件布局

2.1 子控件相对于父控件布局

例如：android:layout_alignParentTop=“true”

• android:layout_alignParentTop      控件的顶部与父控件的顶部对齐;
• android:layout_alignParentBottom  控件的底部与父控件的底部对齐;
• android:layout_alignParentLeft      控件的左部与父控件的左部对齐;
• android:layout_alignParentRight     控件的右部与父控件的右部对齐;

如：

    

 

2.相对给定Id控件

例如：android:layout_above=“@id/**”

• android:layout_above 控件的底部置于给定ID的控件之上;
• android:layout_below     控件的底部置于给定ID的控件之下;
• android:layout_toLeftOf    控件的右边缘与给定ID的控件左边缘对齐;
• android:layout_toRightOf  控件的左边缘与给定ID的控件右边缘对齐;
• android:layout_alignBaseline  控件的baseline与给定ID的baseline对齐;
• android:layout_alignTop        控件的顶部边缘与给定ID的顶部边缘对齐;
• android:layout_alignBottom   控件的底部边缘与给定ID的底部边缘对齐;
• android:layout_alignLeft       控件的左边缘与给定ID的左边缘对齐;
• android:layout_alignRight      控件的右边缘与给定ID的右边缘对齐;

例子：

布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="显示相对布局的嵌套"
        android:background="@android:color/holo_blue_light"
        android:textSize="20dp"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="40dp"
        android:background="#fff"
        />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/num1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:padding="20dp"
            android:text="1"
            android:textSize="20dp"
            />
        <Button
            android:id="@+id/num2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            android:layout_toRightOf="@+id/num1"
            android:padding="20dp"
            android:textSize="20dp"/>
        <Button
            android:id="@+id/num3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/num2"
            android:text="3"
            android:padding="20dp"
            android:textSize="20dp"/>
        <Button
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/num3"
            android:text="BACK"
            android:padding="20dp"
            android:textSize="20dp"/>
        <Button
            android:id="@+id/add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/back"
            android:text="+"
            android:padding="20dp"
            android:textSize="20dp"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/num4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:padding="20dp"
            android:text="4"
            android:textSize="20dp"
            />
        <Button
            android:id="@+id/num5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            android:layout_toRightOf="@+id/num4"
            android:padding="20dp"
            android:textSize="20dp"/>
        <Button
            android:id="@+id/num6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/num5"
            android:text="3"
            android:padding="20dp"
            android:textSize="20dp"/>
        <Button
            android:id="@+id/left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/num6"
            android:text="("
            android:padding="20dp"
            android:textSize="20dp"/>
        <Button
            android:id="@+id/right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/left"
            android:text=")"
            android:padding="20dp"
            android:textSize="20dp"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/num7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:padding="20dp"
            android:text="1"
            android:textSize="20dp"
            />
        <Button
            android:id="@+id/num8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="8"
            android:layout_toRightOf="@+id/num7"
            android:padding="20dp"
            android:textSize="20dp"/>
        <Button
            android:id="@+id/num9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/num8"
            android:text="9"
            android:padding="20dp"
            android:textSize="20dp"/>
        <Button
            android:id="@+id/sub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/num9"
            android:text="-"
            android:padding="20dp"
            android:textSize="20dp"/>
        <Button
            android:id="@+id/mul"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/sub"
            android:text="*"
            android:padding="20dp"
            android:textSize="20dp"/>
    </RelativeLayout>

</LinearLayout>

 3. 相对布局的居中

例如：android:layout_centerInParent=“true”

• android:layout_centerHorizontal 水平居中;
• android:layout_centerVertical    垂直居中;
• android:layout_centerInParent  父控件的中央;

 

三、ConstraintLayout约束布局

ConstraintLayout完成了RelativeLayout所做的一切,以及更多，从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout。

3.1 常用属性

首先ConstrainLayout跟RelativeLayout很相像，因此其对其的属性也是跟RelativeLayout有异曲同工之妙的：

例：layout_constraintTop_toBottomOf="@+id/TextView1"。即把当前控件的上面约束到TextView1控件的下面。

• layout_constraintLeft_toLeftOf
• layout_constraintLeft_toRightOf
• layout_constraintRight_toLeftOf
• layout_constraintRight_toRightOf
• layout_constraintTop_toTopOf
• layout_constraintTop_toBottomOf
• layout_constraintBottom_toTopOf
• layout_constraintBottom_toBottomOf
• layout_constraintBaseline_toBaselineOf
• layout_constraintStart_toEndOf
• layout_constraintStart_toStartOf
• layout_constraintEnd_toStartOf
• layout_constraintEnd_toEndOf

上面属性中有一个比较有趣的layout_constraintBaseline_toBaselineOf
Baseline指的是文本基线，举个例子：

 

如图所示，两个TextView的高度不一致，但是又希望他们文本对齐，这个时候就可以使用layout_constraintBaseline_toBaselineOf，代码如下：

    <TextView
        android:id="@+id/TextView1"
        .../>

    <TextView
        android:id="@+id/TextView2"
        ...
        app:layout_constraintLeft_toRightOf="@+id/TextView1" 
        app:layout_constraintBaseline_toBaselineOf="@+id/TextView1"/>

效果如下：

3.2 角度定位

角度定位指的是可以用一个角度和一个距离来约束两个空间的中心。举个例子：

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintCircle="@+id/TextView1"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="150dp" />

上面例子中的TextView2用到了3个属性：
app:layout_constraintCircle="@+id/TextView1"
app:layout_constraintCircleAngle="120"（角度）
app:layout_constraintCircleRadius="150dp"（距离）
指的是TextView2的中心在TextView1的中心的120度，距离为150dp，效果如下：

四、FrameLayout帧布局

FrameLayout(帧布局)可以说是六大布局中最为简单的一个布局,这个布局直接在屏幕上开辟出一块空白的区域,当我们往里面添加控件的时候,会默认把他们放到这块区域的左上角,而这种布局方式却没有任何的定位方式,所以它应用的场景并不多;帧布局的大小由控件中最大的子控件决定,如果控件的大小一样大的话,那么同一时刻就只能看到最上面的那个组件!后续添加的控件会覆盖前一个!虽然默认会将控件放置在左上角,但是我们也可以通过layout_gravity属性,指定到其他的位置!第一个添加的控件被放在最底层，最后一个添加到框架布局中的视图显示在最顶层，上一层的控件会覆盖下一层的控件。这种显示方式有些类似于堆栈。

4.1 常用属性

FrameLayout的属性很少就两个,但是在说之前我们先介绍一个东西:

前景图像:永远处于帧布局最上面,直接面对用户的图像,就是不会被覆盖的图片。

两个属性:

• android:foreground:*设置帧布局容器的前景图像
• android:foregroundGravity:设置前景图像显示的位置

例子：

代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <TextView
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#FF6143" />
    <TextView
        android:layout_gravity="center"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#7BFE00" />
    <TextView
        android:layout_gravity="center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FFFF00" />

</FrameLayout>

五、AbsoluteLayout绝对布局

绝对布局又称坐标布局，

指定控件的绝对位置，简单直接，直观性强，需要指定子元素的 xy 精确坐标的布局，但是手机屏幕尺寸差别较大，适应性差，Android 1.5已弃用，可以用RelativeLayout替代。

 

六、GridLayout 网格布局

6.1 常用属性

• columnCount  表示布局有几列
• rowCount  表示布局有几行
• layout_columnSpan  表示此控件横跨了多少列
• layout_rowSpan 表示此控件横跨了多少行

 

例子：

代码：

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:columnCount="4"
    android:rowCount="6"
    android:orientation="horizontal"
    >
    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="fill"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="#FFCCCC"
        android:text="0"
        android:textSize="50sp" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="回退" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="清空" />
    <Button android:text="+" />

    <Button android:text="1" />

    <Button android:text="2" />

    <Button android:text="3" />

    <Button android:text="-" />

    <Button android:text="4" />

    <Button android:text="5" />

    <Button android:text="6" />

    <Button android:text="*" />

    <Button android:text="7" />

    <Button android:text="8" />

    <Button android:text="9" />

    <Button android:text="/" />

    <Button
        android:layout_width="wrap_content"
        android:text="." />

    <Button android:text="0" />

    <Button android:text="=" />

</GridLayout>