LinearLayout( 线性布局) 检索

Android 中有六大布局: LinearLayout(线性布局)，RelativeLayout(相对布局)，TableLayout(表格布局) FrameLayout(帧布局)，AbsoluteLayout(绝对布局)，GridLayout(网格布局)
屏幕适配使用的比较多的就是 LinearLayout 的 weight(权重属性)，本文详细地解析 LinearLayout，包括一些基本的属性，Weight 属性的使用，以及比例如何计算，还有使用 android:divider 绘制下划线！

本文使用的是 Android Studion 3.1.2

weight( 权重)属性详解

最简单方式

实现图1.1 效果的代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#ADFF2F" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="2"
        android:background="#DA70D6" />

</LinearLayout>

android:id="@+id/LinearLayout1" ：为该资源控件设置一个资源 id，在 Java 代码中可以通过 findViewById(id) 找到该控件
android:layout_width="match_parent"：布局的宽度设置为填满父容器
android:layout_height="match_parent"：布局的高度设置为填满父容器
android:orientation="horizontal"：布局中控件的排列方式设置为水平方向
android:layout_height="fill_parent：布局高度设置为充满父容器
tools:context=".MainActivity"：声明当前布局提供给 activity 使用
android:layout_weight：设置权重，按比例划分水平方向，将涉及到的 View 的 android:layout_width 属性设置为 0dp，然后使用 android:layout_weight 属性设置比例即可，如上所示，第二个 LinearLayout 是第一个的两倍。
以此类推，竖直方向，只需设 android:layout_height 为 0dp，然后设置 layout_weight 属性即可，如果要达到 1:1 等分效果，则显然只需要分别把两个 LinearLayout 的 weight 改成1和1就可以了。

上图 1.2 效果代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ADFF2F" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#DA70D6" />
</LinearLayout>

wrap_content 方式

如果不用上述最简单的那种设置为 0dp 的方式，直接用 wrap_content 也是可以的——内容包裹
LinearLayout 的 orientation 属性决定向哪个方向等比例划分，horizontal（水平）或是 vertical（竖直）

实现上图 1.3 效果代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#98FB98"
        android:text="one" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="2"
        android:background="#FFFF00"
        android:text="two" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="3"
        android:background="#FF00FF"
        android:text="three" />
</LinearLayout>

<LinearLayout ：表示整个窗口采用线性布局
<TextView：位于线性布局中的文本控件
android:orientation:"horizontal"：线性布局采用水平切分
<TextView android:layout_width="wrap_content"：文本控件水平方向采用包裹内容
<TextView android:layout_height="fill_parent"：文本控件垂直方向采用填满父容器
android:layout_weight="1"、"2"、"3"：设置三个文本控件的权重，即第二个是第一个两倍，第三个是第一个的三倍
以此类推，其余各种比例设置以及垂直方向也是同理。

上图 1.4 效果代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#98FB98"
        android:text="one" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#FFFF00"
        android:text="two" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="#FF00FF"
        android:text="three" />
</LinearLayout>

LinearLayout 设置分割线

很多界面开发中都会设置一些下划线，或者分割线，从而使得界面更加整洁美观：

<view 分隔

对于这种线，做法 ① 直接在布局中添加一个view，作用仅仅是显示出一条线，代码也很简单:

<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#000000" />

实现上图 1.5 效果代码如下，这个是水平方向上的红色线，当然也可以改成其他颜色，或者使用图片：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    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" />
    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#f00" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2" />
    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#f00" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮3" />

</LinearLayout>

图片分隔

使用 LinearLayout 的一个 divider 属性，直接为 LinearLayout 设置分割线
1）自己先准备一张分割线的图片
2）android:divider 设置作为分割线的图片
3）android:showDividers 设置分割线的位置，none(无)、begining(开始)、end(结束)、middle(每两个组件之间)
4）android:dividerPadding 设置分割线的Padding

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:divider="@drawable/cut_off_rule"
    android:showDividers="middle"
    android:dividerPadding="5dp"
    tools:context=".MainActivity">

    <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" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3" />
</LinearLayout>

上述代码效果如下：

Android 六大布局之 LinearLayout( 线性布局)

LinearLayout( 线性布局) 检索

weight( 权重)属性详解

最简单方式

wrap_content 方式

LinearLayout 设置分割线

<view 分隔

图片分隔

猜你喜欢