《物联网Android程序开发案例式教程》Demo1：线性布局

在Android中，使用Linearl ayout表示线性布局。线性布局排列方向有两个，一个是水平方向，另一个是垂直方向。在布局xml文件中,使用“android : orientation”属性表示线性布局的排列方向，该属性有两个值，一个 为“vertical"表示垂直方向，另- 一个为horizontal” 表示水平方向。下面通过实战来体会线性布局排列方向的使用。

一、基础布局程序

首先新建工程Demo1，其次修改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">

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

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

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

</LinearLayout>

 其运行结果如下图所示，三个Button按垂直方向排列

 如果你想让Button水平排列，可以修改android:orientation的值为horizontal，其他不变

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

   .....

</LinearLayout>

其运行结果如图所示，同时在activity_ main. xml中编辑LinearLayout时可以在工程中预览布局（图中右侧）

 如果你想指定控件在布局中的对齐方式可以使用属性android : layout_ gravity，它有7个值.分别为: top(上对齐)、bottom(下对齐)left(左对齐)、right(右对齐)、centervertical(垂直居中对齐)、center horizontal(水平居中对齐)、center(中间对齐)。

例如我在代码中指定Button1上对齐top、Button2中间对齐center、Button3下对齐bottom

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

    <Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_gravity = "top"
        android:text = "Button1"/>

    <Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_gravity = "center"
        android:text = "Button2"/>

    <Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_gravity = "bottom"
        android:text = "Button3"/>

</LinearLayout>

其运行布局显示如下

二、案例实现

1、要求

①线性布局排列方向为horizontal水平方向,布局的背景颜色设置成红色。
②线性布局排列方向为 vertical垂直方向,布局注背景颜色设置成绿色。
③线性布局排列方向为 vertical垂直方向,且第一个按钮的对齐方向为left,第二个按钮的对齐方向为center,第三个按钮的对齐方向为right,布局背景颜色设置成蓝色。
④线性布局排列方向为horizontal,第一个按钮和第二个按钮的宽度比例为2∶1,布局背景颜色设置成浅蓝。
⑤线性布局排列方向为 horizontal,第一个按钮和第二个按钮的苋度比例为111,布局背景颜色设置成黄色。

布局的背景颜色可以使用android: background 属性设置,它的值可以用付号“#”开头,加上6或8个十六讲制值组成,用来调色。
要求的几个颜色值：红色“#ff0000”,绿色“#00ff00”,蓝色“#0000ff”，浅蓝“#00ffff”,黄色“#ffff00”。
在layout目录下创建布局过程:
右键单击 layout目录,选择 New→XML→layout XML File,在弹出的窗口中填入布局名称已经布局的根节点,这里我们使用LinearLayout线性布局。（layout文件所在位置如图，找到后右键新建即可）

2、实现步骤
在layout目录下新建线性布局 layout_linear.xml文件,并修改MainActivity.java中的 onCreate()方法的语句为setContentView(R.layout. layout_ linear)。 layout,linear. 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="wrap_content"
        android:background="#ff0000"
    android:orientation ="horizontal">

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

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

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00ff00"
        android:orientation ="vertical">

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

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

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:orientation ="vertical">

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

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

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

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#00ffff"
    android:orientation ="horizontal">

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

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

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

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

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

</LinearLayout>

其运行结果如下：