3.0 Android布局管理器

3.0 Android布局管理器

3.2 View与ViewGroup

3.3 Android布局管理器

3.4 线性布局

3.5 约束布局

学习目标

了解--------------------View与ViewGroup五种常用布局

掌握--------------------线性布局常用属性，约束布局常用属性

重点--------------------线性布局，约束布局

3.2 View与ViewGroup

1. View与ViewGroup概述

Android的UI界面都是由View和ViewGroup及其派生类构建而成的。其中，View是所有UI组件的基类，而ViewGroup是容纳View及其派生类的容器，ViewGroup也是从View派生出来的。

ViewGroup作为容器盛装界面的控件，可以包含普通的View控件，也可以包含ViewGroup。

2. View与ViewGroup

View：视图，是用户接口组件的基本构建块，它在屏幕中占用一个矩形区域，它是所有UI控件的基类，比如TextView，ImageView。

ViewGroup ：ViewGroup是一个特殊的View，能够容纳其它的View(子控件)，它是布局和视图容器的基类。

3.3 Android布局管理器

0. 启动 App 的简略流程

1. Android布局管理器

在Android程序中界面是通过布局文件设定的，在每个应用程序创建时会默认包含一个主界面布局，该布局位于res/layout目录中。

实际开发中每个应用程序都包含多个界面，而程序默认提供的一个主界面布局无法满足需求，因此经常会在程序中添加多个布局。

activity_main.xml布局文件所在的位置

2.Android布局种类

3. Android布局的通用属性

Android系统提供的五种常用布局直接或者间接继承自ViewGroup，因此这五种常用布局也支持在ViewGroup中定义属性，这些属性可以看作是布局的通用属性。这些通用属性如下表所示：

控件属性	功能描述
android:id	设置当前布局的唯一标识
android:layout_width	设置布局的宽度。值可以是具体的尺寸，如50dp，也可以是系统定义的值，如match_parent和wrap_content
android:layout_height	设置布局的高度，值可以是具体尺寸或系统定义的值
android:background	设置布局的背景
android:layout_margin	设置当前布局与屏幕便捷或周围控件的距离
android:padding	设置当前布局与布局中控件的距离

3.4 线性布局

1. 线性布局

线性布局**（LinearLayout）**主要以水平或垂直方式来显示界面中的控件。当控件水平排列时，显示顺序依次为从左到右，当控件垂直排列时，显示顺序依次为从上到下。
注意：子控件之间不能重叠，可以设置权重。

2. 线性布局常用属性

控件属性	功能描述
android:orientation	设置线性布局的朝向，可设置为horizontal、vertical两种排列方式
android:layout_weight	子控件属性，设置元素所分配的权重，只有在Linearlayout中，该属性才有效
android:gravity	子控件属性，设置自身内部元素的对齐方式
android:layout_gravity	子控件属性，设置自身相当于父容器的对齐方式

常用属性：android: gravity

线性布局的控件默认是从左往右排列或从上往下排列，如果想让线性布局中的子控件排列对齐右边缘或者底部，可以用gravity属性控制。

常用属性：android: layout_gravity

gravity属性表示当前布局/控件内部的子控件位置，layout_gravity表示当前控件在父控件的位置。当父控件设置了gravity且子控件也设置了layout_gravity时， 子控件的layout_gravity优先级高。

常用属性：android: layout_weight

LinearLayout中另外一个常用的属性是layout_weight，该属性需要加在LinearLayout的子控件中。其作用是分配线性布局中的剩余空间到该控件上（注意分割的是剩余空间而不是总空间）。在控件没有添加layout_weight属性时，控件未占满线性布局的区域会空出来。

常用属性：android: layout_weight

给控件Button_2加上android:layout_weight="1"后，会把线性布局剩余空间全部占满。

常用属性：android: layout_weight

如果都加上android:layout_weight=“1”，则多个控件均匀分配剩余空间。

常用属性：android: layout_weight

如果填入不同的数字，则按对应数字比例瓜分剩余空间。

常用属性：android: layout_weight

问题：如何使用 layout_weight 实现全部空间按比例分配？

官方文档： https://developer.android.google.cn/reference/android/widget/LinearLayout?hl=en

3. 线性布局案例

案例描述：使用LinearLayout完成一个“注册个人信息”的布局，如下图所示，左图为显示效果，右图为设计布局的组件树。

activity_main.xml

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#6200ef"
        android:gravity="center_vertical"
        android:paddingLeft="18dp"
        android:text="Section_3"
        android:textColor="#ffffff"
        android:textSize="18dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:text="LinearLayout注册表"
        android:textSize="26dp"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="姓名："
            android:textSize="20dp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="学号："
            android:textSize="20dp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="学院："
            android:textSize="20dp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="30dp">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="提交" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="重置" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="取消" />

    </LinearLayout>


</LinearLayout>

字体水平居中
android:gravity=“center_vertical”

textviw居中
android:layout_gravity=“center”

3.5 约束布局

1. 约束布局

约束布局（ConstraintLayout）是解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。
ConstraintLayout是Android Studio 2.2新添加的布局。
ConstraintLayout布局中的控件可以在横向和纵向上以添加约束关系的方式进行相对定位，其中，横向边包括Left、Start、Right、End，纵向边包括Top、Bottom、Baseline（文本底部的基准线）。

2. 约束布局相对定位关系属性

属性名称	功能描述
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_constraintStart_toEndOf	控件的起始边与另外一个控件的尾部对齐
layout_constraintStart_toStartOf	控件的起始边与另外一个控件的起始边对齐
layout_constraintEnd_toStartOf	控件的尾部与另外一个控件的起始边对齐
layout_constraintEnd_toEndOf	控件的尾部与另外一个控件的尾部对齐
layout_constraintBaseline_toBaselineOf	控件间的文本内容基准线对齐

3. 控件居中定位与偏向

当相同方向上（横向或纵向），控件两边同时向ConstraintLayout添加约束，则控件在添加约束的方向上居中显示。

如果ConstraintLayout布局中的控件在居中方向（横向或者纵向）上和父布局（ConstraintLayout）的尺寸一致，此时该方向的居中约束和倾向没有意义。

遇到相反的约束时，默认的做法是将控件居中；但可以通过使用偏向属性来调整位置。

属性名称	功能描述
layout_constraintHorizontal_bias	横向的倾向，取值0-1
layout_constraintVertical_bias	纵向的倾向，取值0-1

4. Chain——定义

Chain（链），在同一个轴上（水平或者垂直）提供一个类似群组的统一表现，是一种特殊的约束，它使我们能够对一组水平或竖直方向互相关联的控件进行统一管理。一组控件通过一个双向的约束关系链接起来，就能形成一个Chain。

5. Chain heads——链头

链由在链的第一个元素(链的“head”)上设置的属性控制，head是水平链的最左侧控件，垂直链的最顶部控件。

6. Chain Style——链样式

当在链的第一个元素上设置属性layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle时，链的行为将根据指定的样式改变(默认为CHAIN_SPREAD)。

7. Weighted chains——权重链

Chains(链)还支持weight（权重）的配置，使用layout_constraintHorizontal_weight和layout_constraintVertical_weight进行设置链元素的权重。

9. 约束布局案例

案例要求：使用ConstraintLayout完成一个布局，如下图所示，左图为显示效果，右图为设计布局的组件树。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#6200ef"
        android:gravity="center_vertical"
        android:paddingLeft="18dp"
        android:text="Section_3"
        android:textColor="#ffffff"
        android:textSize="18dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="ConstraintLayout注册表"
        android:textSize="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="姓名："
        android:textSize="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="350dp"

        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="学号："
        android:textSize="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@+id/textView4"
        app:layout_constraintTop_toBottomOf="@+id/editText" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="学院："
        android:textSize="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText2" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@+id/textView5"
        app:layout_constraintTop_toBottomOf="@+id/editText2" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="提交"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/editText3" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="重置"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintTop_toBottomOf="@+id/editText3" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="取消"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginRight="80dp"
        app:layout_constraintTop_toBottomOf="@+id/editText3" />



</androidx.constraintlayout.widget.ConstraintLayout>

讨论题

1.线性布局如何控制布局中控件的摆放方向？

通过设置其属性android: orientation的值(horizontal或vertical)来控制其控件方向。

2.线性布局需要注意的问题有哪些？

当线性布局中的控件使用权重属性时，其宽度或高度属性值通常设置为0dp，宽度或高度的权重属性对生效。

3.什么是约束布局？

约束布局是解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。

复习提问

1.线性布局如何控制布局中控件的摆放方向？

●在线性布局中，可以使用android:orientation属性来控制控件的摆放方向。该属性有两个可选值：horizontal（水平方向）：控件按照水平方向从左到右依次排列。

●vertical（垂直方向）：控件按照垂直方向从上到下依次排列。
通过设置android:orientation属性，您可以决定线性布局中控件的摆放方向。
例如，以下代码片段演示了一个水平线性布局，其中两个按钮按照水平方向排列：

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />

</LinearLayout>

2.哪种布局可以使用chain？

约束布局。

作业

CSDN

一，项目实验——Android 线性布局

http://t.csdnimg.cn/IsGm3

二，项目实验——Android 约束布局

http://t.csdnimg.cn/HLO4j