5.2布局代码和展示

   上一篇文章介绍了布局管理器的类型和属性、如何创建布局管理器，这里多为代码，不做详细解释，建议结合上一章一起阅览

布局文件创建过程

1. 找到res目录下的layout目录，右键选中New，选中XML，选中Layout XML File
   
2. 创建页面；设置Layout File Name（布局文件名称）必须全部小写、英文开头、可以有数字不能是开头，Root Tag设置布局管理器，这里设置为LinearLayout（线性布局）布局管理器
   
3. 新建好的布局文件如图
   

<?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">

</LinearLayout>

①version=“1.0”：声明用的xml版本是1.0

②encoding=“utf-8”：声明用xml传输数据的时候的字符编码，假如文档里面有中文，编码方式不是UTF-8，传输过去再解码的话中文就会是乱码

③xmlns英文叫做 XML namespace，中文翻译为 XML 命名空间。在Android中，目前我碰到的xmlns一共有三种：

xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"

android：命名空间android用于 Android 系统定义的一些属性。
app：命名空间app用于我们应用自定义的一些属性，这个与 Android 自定义属性和系统控件扩展应该有关系，大家可以再继续研究一下。
tools：根据官方定义，tools命名空间用于在 XML 文档记录一些，当应用打包的时候，会把这部分信息给过滤掉，不会增加应用的 size，说直白点，这些属性是为IDE提供相关信息。

④Linearlayout：就是相对应的布局管理器，也可以在这里直接修改布局管理器为其它类型的，例如要换成FrameLayout（帧布局），只需要将LinearLayout换成FrameLayout即可

⑤android:layout_width：在xml布局文件中，所有的属性前面都是android:属性的格式，后面加上需要的属性值。

新建一个Module

1. File > New > New Module…
   
2. 选择用于手机开发；点击Next
   
3. 设置Module名称
   
   Application/Library name 与 Module name的区别是：
   
   运行程序后，会在设备上生成相对应的软件
   
   Project的文件结构：
   
4. 选择Module界面；点击Next
   
5. 设置文件名称；点击Finish创建完成
   
   
   

线性布局（LinearLayout）

  一个TextView就是一个文本框，在不同的文本框中使用了android:backgrount属性设置了不同的背景颜色，便于观察；android:textSize属性用于设置文本框中的字体大小
  通过运行结果可以看出，线性布局（LinearLayout）默认排序方式是水平的，并且超出一行并不会转行，只是不显示

<?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">
    
    <TextView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="文本框1"
        android:textSize="20sp"
        android:background="#1E90FF"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="文本框2"
        android:textSize="20sp"
        android:background="#32CD32"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="文本框3"
        android:textSize="20sp"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="文本框4"
        android:textSize="20sp"
        android:background="#ff0000"/>
</LinearLayout>

  运行要修改MainActivity文件的setContentView()方法：指定使用的布局文件；将activit_main修改为当前布局文件名称linearlayout，使用ctrl + alt + 空格，有提示。

运行结果：



设置排序方式为垂直，则要添加orientation:vertical属性

运行结果：

android:gravity属性设置子属性位置；这是设置为right，

	<TextView
    	android:layout_width="100dp"
    	android:layout_height="wrap_content"
    	android:text="文本框4"
    	android:gravity="right"
    	android:textSize="20sp"
    	android:background="#ff0000"/>

运行结果会发现文本框内的字体显示在右边：

那android:layout_gravity:right又是什么意思？

    <TextView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="文本框4"
        android:gravity="right"
        android:layout_gravity="right"
        android:textSize="20sp"
        android:background="#ff0000"/>

运行发现文本框4整体在父界面的右边：

属性值前加粗样式带有layout的大多都是相对于父界面设置

相对布局（RelativeLayout）

多练代码就知道属性的用法；光看不了解具体用法

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

    <Button
        android:id="@+id/but1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="70dp"
        android:layout_marginTop="100dp"
        android:text="按钮1" />

    <Button
        android:id="@+id/but2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        android:layout_centerInParent="true" />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮3"
        android:layout_below="@id/but2" />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮4"
        android:layout_alignParentBottom="true" />
</RelativeLayout>

运行结果：

帧布局（FrameLayout）

<?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">

    <Button
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="#0000CD" />

    <Button
        android:layout_width="270dp"
        android:layout_height="270dp"
        android:background="#0000FF"
        android:layout_gravity="center" />

    <Button
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:background="#4169E1"
        android:layout_gravity="center" />

    <Button
        android:layout_width="210dp"
        android:layout_height="210dp"
        android:background="#6495ED"
        android:layout_gravity="center" />

    <Button
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:background="#1E90FF"
        android:layout_gravity="center" />

    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#87CEFA"
        android:layout_gravity="center" />

    <Button
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="#00BFFF"
        android:layout_gravity="center" />

    <Button
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:background="#00FFFF"
        android:layout_gravity="center" />

    <Button
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#00CED1"
        android:layout_gravity="center" />

    <Button
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="#40E0D0"
        android:layout_gravity="center" />
</FrameLayout>

运行结果：

表格布局（TableLayout）

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

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

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3" 
            android:layout_column="3"/>
    </TableRow>

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

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

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

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

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="9"
            android:layout_column="2" />
    </TableRow>
</TableLayout>

运行结果：

绝对布局（AbsoluteLayout）

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        android:layout_x="70dp"
        android:layout_y="50dp" />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        android:layout_x="100dp"
        android:layout_y="200dp" />
</AbsoluteLayout>

运行结果：

网格布局（GridLayout）

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

    <EditText
        android:layout_height="120dp"
        android:layout_columnSpan="4"
        android:layout_gravity="fill_horizontal"
        android:gravity="right|center"
        android:hint="0"
        android:textSize="35sp"
        android:layout_columnWeight="4"/>

    <Button
        android:layout_row="1"
        android:layout_rowWeight="1"
        android:layout_column="0"
        android:text="C"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="1"
        android:layout_rowWeight="1"
        android:layout_column="1"
        android:text="DEL"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="1"
        android:layout_rowWeight="1"
        android:layout_column="2"
        android:text="％"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="1"
        android:layout_rowWeight="1"
        android:layout_column="3"
        android:text="➗"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="2"
        android:layout_rowWeight="1"
        android:layout_column="0"
        android:text="7"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="2"
        android:layout_rowWeight="1"
        android:layout_column="1"
        android:text="8"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="2"
        android:layout_rowWeight="1"
        android:layout_column="2"
        android:text="9"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="2"
        android:layout_rowWeight="1"
        android:layout_column="3"
        android:text="✖"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="3"
        android:layout_rowWeight="1"
        android:layout_column="0"
        android:text="4"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="3"
        android:layout_rowWeight="1"
        android:layout_column="1"
        android:text="5"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="3"
        android:layout_rowWeight="1"
        android:layout_column="2"
        android:text="6"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="3"
        android:layout_rowWeight="1"
        android:layout_column="3"
        android:text="➖"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="4"
        android:layout_rowWeight="1"
        android:layout_column="0"
        android:text="1"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="4"
        android:layout_rowWeight="1"
        android:layout_column="1"
        android:text="2"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="4"
        android:layout_rowWeight="1"
        android:layout_column="2"
        android:text="3"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="4"
        android:layout_rowWeight="1"
        android:layout_column="3"
        android:text="➕"
        android:textSize="20sp"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="5"
        android:layout_column="0"
        android:text="（）"
        android:textSize="20sp"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="5"
        android:layout_column="1"
        android:text="0"
        android:textSize="20sp"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="5"
        android:layout_column="2"
        android:text="·"
        android:textSize="20sp"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"/>

    <Button
        android:layout_row="5"
        android:layout_column="3"
        android:text="＝"
        android:textSize="20sp"
        android:layout_rowWeight="1"
        android:background="#ff0000"
        android:layout_columnWeight="1"/>
</GridLayout>

结果：