安卓学习笔记08：线性布局

零、学习目标

1. 能说出安卓界面元素层次
2. 能说出安卓常用的布局
3. 能说出线性布局常用的属性
4. 能利用线性布局实现简单的界面设计
5. 能利用线性布局嵌套实现比较复杂的界面

一、界面与布局概述

（一）界面

应用界面包含用户可查看并与之交互的所有内容。安卓提供丰富多样的预置 UI 组件，例如结构化布局对象和 UI 控件，您可以利用这些组件为您的应用构建图形界面。安卓还提供其他界面模块，用于构建特殊界面，例如对话框、通知和菜单。

（二）布局

布局可定义应用中的界面结构（例如 Activity 的界面结构）。布局中的所有元素均使用 View 和 ViewGroup 对象的层次结构进行构建。View 通常绘制用户可查看并进行交互的内容。然而，ViewGroup 是不可见容器，用于定义 View 和其他 ViewGroup 对象的布局结构。

1、视图层次结构图

2、UI容器 (Container)

• UI容器指ViewGroup，也是View的子类，而ViewGroup有几个布局子类：LinearLayout、RelativeLayout、AbsoluteLayout、TableLayout、GridLayout，ConstraintLayout。
  

3、UI控件 (Control)

• UI控件指Widget（微件），不能再包含其它元素的控件，例如标签（TextView）、文本框（EditText）、按钮（Button）、 活动栏（Action Bar）、对话框（Dialogs）、状态栏（Status）、通知（Notifications）。

4、两种方式声明布局

• 在 XML 中声明界面元素：Android 提供对应 View 类及其子类的简明 XML 词汇，如用于微件和布局的词汇。也可使用 Android Studio 的 Layout Editor，并采用拖放界面来构建 XML 布局。
• 在运行时实例化布局元素：应用可通过编程创建 View 对象和 ViewGroup 对象（并操纵其属性）。
  

二、线性布局

线性布局(LinearLayout)是一种比较常用且简单的布局方式。在这种布局中，所有的子元素都是按照垂直或水平的顺序排列在界面上。如果是垂直排列，每个子元素占一行，如果是水平排列，则每个子元素占一列。线性布局可以支持布局样式嵌套实现复杂的布局样式。

（一）继承关系图

（二）常用属性

• layout_width：布局宽度（match_parent，wrap_conent）
• layout_height：布局高度（match_parent，wrap_conent）
• orietation：方向（vertical，horizontal）
• gravity：对齐方式（left, right, center, top, bottom…)
• background：背景（颜色、图片、选择器）
• weight：比重（用于瓜分手机屏幕）
• padding：内边距 (paddingLeft, paddingRight, paddingTop, paddingBottom)
• margin：外边距 (marginLeft, marginRight, marginTop, marginBottom)

（三）案例演示 —— 线性布局属性

1、创建安卓应用【LinearLayoutDemo】

2、主布局资源文件activity_main.xml

• 将约束布局改成线性布局
  

• 添加两个按钮
  

• 启动应用，查看效果
  

• 设置线性布局的方向 - orientation
  

• 启动应用，查看效果
  

• 设置内边距 - padding
  

• 启动应用，查看效果
  

• 设置线性布局的对齐方式 - gravity

• left、right、center搭配，共有九种对齐方式

• 线性布局gravity的默认值是left|top——左上

• 右上对齐 - right|top
  

• 启动应用，查看效果
  

• 右中对齐 - right|center
  

• 右下对齐 - right|bottom
  

• 水平居中 - center_horizontal，相当于center|top
  

• 垂直居中 - center_vertical，相当于left|center
  

• 居中对齐 - center
  

• 背景属性（背景色、背景图片、背景配置文件）

• 设置背景色
  

• 启动应用，查看效果
  

• 设置背景图片
  

• 启动应用，查看效果
  

• 在第二个按钮下添加一个线性布局
  

• 在drawable目录里创建自定义边框配置文件customer_border.xml
  

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="10dp" />
    <solid android:color="#04be02" />
    <stroke
        android:width="1dp"
        android:color="#555555" />
</shape>

• 启动应用，查看效果
  
• 设置过渡色效果
  

（四）案例演示 —— 线性布局嵌套

1、创建安卓应用【NestedLinearLayout】

2、将三张小图片拷贝到res/drawable目录

3、布局资源文件activity_main.xml

• 将约束布局改成线性布局，设置方向属性
  
• 添加第一个线性布局
  
• 添加第二个线性布局
  
• 添加第三个线性布局
  
• 运行程序，查看结果（三个子布局按照1:2:3垂直瓜分手机屏幕）
  
• 在第一个布局里添加三个图像控件
  
• 第二个线性布局里再嵌套一个横向的线性布局，里面添加三个按钮
  
• 在第二个线性布局里再添加一个编辑框
  
• 启动应用，查看效果
  
• 本来三个子布局按照1:2:3比例垂直瓜分手机屏幕，但是在第二个子布局里添加子控件之后，瓜分比例就发生变化了，第二个子布局瓜分比例超过了第三个子布局，怎么才能保持原先的瓜分比例呢？
• 将三个子布局的layout_height属性值统统设置为0dp
  
  
  
• 启动应用，查看效果
  
• 第三个线性布局再添加三个线性布局
  
• 启动应用，查看效果
  
• 在第三个线性布局嵌套的第一个子布局里添加三个按钮
  
• 在第三个线性布局嵌套的第二个子布局里添加两个按钮
  
• 在第三个线性布局嵌套的第二个子布局里添加三个按钮
  

4、启动应用，查看效果

• 紫色部分太窄，按钮显示不好看
  
• 将紫色部分与蓝色部分的瓜分比例交换
  
• 查看布局资源文件activity_main.xml

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ffff00"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imgSun"
            android:layout_width="45dp"
            android:layout_height="46dp"
            android:src="@drawable/img01" />

        <ImageView
            android:id="@+id/imgMoon"
            android:layout_width="30dp"
            android:layout_height="47dp"
            android:src="@drawable/img02" />

        <ImageView
            android:id="@+id/imgStar"
            android:layout_width="38dp"
            android:layout_height="50dp"
            android:src="@drawable/img03" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="#00ff00"
        android:gravity="center"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center">

            <Button
                android:id="@+id/btnSunInvisbile"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="按钮1" />

            <Button
                android:id="@+id/btnSunGone"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="按钮2" />

            <Button
                android:id="@+id/btnSunVisible"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="按钮3" />

            <Button
                android:id="@+id/btnSunToFlower"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="按钮4" />
        </LinearLayout>

        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="#aaaaaa"
            android:ems="10"
            android:inputType="textMultiLine"
            android:lines="5"
            android:padding="10dp"
            android:scrollbarStyle="outsideOverlay"
            android:scrollbars="vertical"
            android:text="演示线性布局的嵌套：横向的、纵向的布局可以相互嵌套，形成比较复杂的布局。" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:background="#0000ff"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ffff00"
            android:gravity="center"
            android:orientation="vertical">

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="按钮1" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="按钮2" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="按钮3" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:background="#ff00ff"
            android:gravity="center"
            android:orientation="horizontal">

            <Button
                android:id="@+id/button11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="按钮1" />

            <Button
                android:id="@+id/button12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="按钮2" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:gravity="center"
            android:orientation="vertical">

            <Button
                android:id="@+id/button7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="按钮1" />

            <Button
                android:id="@+id/button8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="按钮2" />

            <Button
                android:id="@+id/button9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="按钮3" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

三、课后作业

1、选择水果

• 单击某个水果图标，弹出吐司提示用户选择了什么水果
  
  

2、计算器界面