Android布局控件之常用linearlayout布局

下面是“Android布局控件之常用LinearLayout布局”的完整攻略。

常用LinearLayout布局

LinearLayout布局简介

LinearLayout布局是Android中最基本、最常用的布局之一，其主要作用是将子控件按照线性方向依次排列。LinearLayout分为水平（horizontal）和垂直（vertical）两种方向，水平方向的LinearLayout中子控件从左到右排列，垂直方向的LinearLayout中子控件从上到下排列。LinearLayout的重要属性如下：

• orientation：方向属性，可设为horizontal或vertical。
• layout_weight：宽度或高度比重，当布局中的子控件没有设置具体的宽度或高度时，通过layout_weight属性可以实现布局中子控件的宽度或高度按照一定比例分配。
• gravity：子控件对齐方式，可设为left、top、center等。

LinearLayout布局示例

下面通过两个网页布局的示例来进一步讲解LinearLayout布局。

示例一：水平布局

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="#F5F5F5"
    android:padding="12dp">

    <ImageView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/avatar"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginLeft="10dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="John Smith"
            android:textSize="16sp"
            android:textColor="#333"
            android:maxLines="1"
            android:ellipsize="end"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Software Engineer"
            android:textSize="14sp"
            android:textColor="#999"
            android:maxLines="1"
            android:ellipsize="end"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="ABC Company"
            android:textSize="14sp"
            android:textColor="#999"
            android:maxLines="1"
            android:ellipsize="end"/>
    </LinearLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Follow"
        android:textColor="@color/colorPrimary"
        android:background="@drawable/btn_follow"/>

</LinearLayout>

以上代码实现的效果是一个水平排列的个人信息卡片，包括头像、姓名、职位和公司信息，以及一个“Follow”按钮。其中，头像和姓名信息在左侧，按钮在右侧，中间则显示职位和公司信息。关于代码中使用的一些属性，比如：background、padding、textSize、maxLines等也是比较常用的属性，不再进行讲解。

示例二：垂直布局

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/pic1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="12dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Article Title"
            android:textSize="18sp"
            android:textColor="#333"
            android:maxLines="2"
            android:ellipsize="end"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Article Summary"
            android:textSize="14sp"
            android:textColor="#999"
            android:layout_marginTop="10dp"/>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#EEE"/>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Author:"
            android:textColor="#999"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="John Smith"
            android:textColor="#333"
            android:layout_marginLeft="6dp"/>

        <View
            android:layout_width="1dp"
            android:layout_height="12dp"
            android:background="#CCC"
            android:layout_marginLeft="6dp"
            android:layout_marginRight="6dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Date:"
            android:textColor="#999"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2020/01/01"
            android:textColor="#333"
            android:layout_marginLeft="6dp"/>
    </LinearLayout>

</LinearLayout>

以上代码实现的效果是一个垂直布局的文章列表项，包括文章的标题、摘要、作者、日期等信息。其中，图片、标题和摘要排列在上方，而作者和日期信息则在下方水平排列。在此布局中，我们还使用了View来实现虚线分割线的效果。在TextView中，我们通过使用maxLines和ellipsize属性来设置文字的最大行数和省略方式。

总结

通过以上两个布局示例，我们可以看到LinearLayout在控制子控件排列方向、对齐方式等方面非常灵活，也比较容易上手。在实际开发中，我们可以根据UI设计稿和具体的布局需求选择合适的LinearLayout布局方向和属性设置。