2.2线性布局

一、线性布局

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

1、常用属性

属性	含义
layout_height	高度，单位：dp (wrap_content（根据内容确定高度）, match_parent（填满整个界面）)
layout_weight	宽度，单位：dp (wrap_content, match_parent)
orietation	方向（vertical，horizontal）
gravity	对齐方式（left, right, center, top, bottom…)
background	背景（颜色[color]、图片[drawable]、选择器[selector]）
weight	比重（用于瓜分手机屏幕）
padding	内边距 (paddingLeft, paddingRight, paddingTop, paddingBottom)
margin	外边距 (marginLeft, marginRight, marginTop, marginBottom)

二、案例（线性布局属性）

1、创建安卓应用

• 基于Empty Activity模板创建安卓应用 - LinearLayoutDemo

2、主布局资源文件

• 将约束布局改为线性布局，删掉默认的标签
  
• 添加两个按钮

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <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"/>
</LinearLayout>

3、字符串资源文件

<resources>
    <string name="app_name">线性布局演示</string>
</resources>

4、预览效果

• 查看效果，发现两个按钮水平摆放，在窗口左上角
  

5、设置布局属性，查看效果

（1）设置线性布局方向

• orientation属性

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

    tools:context=".MainActivity">
    <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"/>

</LinearLayout>

（2）设置线性布局内边距

• padding (paddingTop, paddingBottom, paddingLeft, paddingRight)
  
  

（3）设置线性布局对齐方式

• gravity (left、center、right、top、bottom可以搭配形成很多种对齐方式)
• 例如：居中
  
  
• 还可以设置联合对齐方式（如：gravity：“center|top” ：上中）
  
  

（4）设置线性布局背景

• 设置背景颜色
  
  

• 设置背景图片
  1、在drawable里添加图片
  
  2、在布局资源中写入代码
  
  3、效果
  

（5）实现边框渐变色效果

<?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="#ffaaff"/>
    //边框色、宽度
    <stroke android:width="1dp" android:color="#aa5555"/>
    <gradient android:startColor="#ffff00"
        android:centerColor="#ff3388"
        android:endColor="#ffaaff"/>
</shape>

三、线性布局嵌套

1、创建安卓应用

• 基于Empty Activity创建安卓应用 - NestedLinearLayout

2、准备图片素材

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

3、主布局资源文件

• 将约束布局改为线性布局
  
• 添加三个线性布局，按照1:2:3比例垂直瓜分手机屏幕
  

4、字符串资源文件

<resources>
    <string name="app_name">线性布局嵌套演示</string>
</resources>

5、查看预览效果

6、修改布局，查看效果

• 在第一个布局添加一张图片和两个按钮
• 在第二个布局里添加一个横向线性布局，里面添加四个按钮，以及在第二个布局里添加一个编辑框
• 在第三个布局中添加一个图片

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center"
        android:background="#ccffcc"
        android:layout_weight="1">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <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"/>

        </LinearLayout>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/img01"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:gravity="center"
        android:background="#3399dd"
        android:orientation="vertical"
        android:layout_weight="2"
        android:layout_height="0dp"
        android:padding="20dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center">
            <Button
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:text="按钮1"/>
            <Button
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:text="按钮2"/>
            <Button
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:text="按钮3"/>
            <Button
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:text="按钮4"/>

        </LinearLayout>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#aabbcc"
            android:lines="3"
            android:layout_marginTop="10dp"
            android:text="演示线性布局嵌套，横向和纵向的布局可以相互嵌套，形成比较复杂的局面" />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:gravity="center"
        android:background="#ff00ff"
        android:layout_weight="3"
        android:layout_height="0dp">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/img03"/>

    </LinearLayout>

</LinearLayout>

• 效果