Android LinearLayout 线性布局 4 - Android 基础教程

LinearLayout (线性布局) 还有一个重要的属性就是 divider (分隔线)

很多 Android UI 开发中都会设置一些下划线,或者分割线,从而使得界面更加整洁美观,比如微信的注册页面

对于这种分隔现的设置，通常有两种方法

使用 LinearLayout 的 android:divider 属性

在布局中添加一个 view ,这个 view 的作用仅仅是显示出一条线

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

首先创建一个空的 Android 项目 cn.twle.android.linearlayout

然后修改 activity_main.xml 为以下内容

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

    <View  
android:layout_width="match_parent"  
android:layout_height="1dp"
android:layout_marginTop="100dp" 
android:background="#000000" />

运行结果如下

这个是水平方向上的黑线,当然也可以改成其它颜色,或者使用图片

divider 分隔线

LinearLayout 线性布局中跟分隔线有关的属性有

xml 属性	说明
android:divider	属性用于设置 LinearLayout 的分割线图片
android:showDividers	设置分割线所在的位置，有四个可选值 none 无 middle 两个组件之间 begin 开始位置 end 结束位置
android:dividerPadding	设置分割线的内边距

范例

我们使用 android:divider 属性来分隔几个按钮

首先创建一个空的 Android 项目 cn.twle.android.linearlayout
将图片 /static/i/android/sep.png 保存到 res/drawable 命令下并重命名为 sep.png
修改 activity_main.xml 为以下内容

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

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

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

    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="忘记密码" />  

</LinearLayout>

LinearLayout 布局范例

现在我们使用 LinearLayout 来布局一个保存电话号码的 UI

我们先来看看这个布局

首先应该看到有三行
第一行是一个文本，应该可以用 <TextView> 当控件
第二行是一个输入框，可以用 <EditText> 控件
第三是一个并排右对齐的两个按钮
如果用 LinearLayout 布局，应该有两个 LinearLayout
1. 第一个垂直布局，用来容纳三行
2. 第二个水平布局，用来容纳两个按钮
还应该注意到两件事
1. 第一行距离顶部 100dp ，可以使用属性 android:layout_marginTop="100dp"
2. 第三行是按钮是靠右的，可以使用属性 android:gravity="right"

整理完思路，大体上的 UI 就是如下图布局的

分析好了，现在就来写代码吧

首先创建一个空的 Android 项目 cn.twle.android.linearlayout
修改 activity_main.xml 为以下内容

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

    <TextView
        android:layout_marginTop="100dp"     
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"    
        android:text="请输入要保存的电话号码"/>    

    <EditText    
        android:layout_width="fill_parent"    
        android:layout_height="wrap_content"/>    


    <LinearLayout    
        android:layout_width="fill_parent"    
        android:layout_height="wrap_content"    
        android:orientation="horizontal"    
        android:gravity="right">    

        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="保存"/>    
        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="清空"/>    
    </LinearLayout>    
</LinearLayout>

运行以上范例，显示结果如下

LinearLayout 布局范例 2

如果我们将上面范例中的两个按钮改为一左一右，又该怎么办呢 ?

我们可能首先想到的，这还不简单，直接使用 android:layout_gravity 设置一个 left, 一个 right 就可以啦!

真的吗？

我们修改 activity_main.xml 为以下内容试一试

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

    <TextView
        android:layout_marginTop="100dp"     
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"    
        android:text="请输入要保存的电话号码"/>    

    <EditText    
        android:layout_width="fill_parent"    
        android:layout_height="wrap_content"/>    


    <LinearLayout    
        android:layout_width="fill_parent"    
        android:layout_height="wrap_content"    
        android:orientation="horizontal"    
        android:gravity="right">    

        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"
            android:layout_gravity="left"  
            android:text="保存"/>    
        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content" 
            android:layout_gravity="right"   
            android:text="清空"/>    
    </LinearLayout>    
</LinearLayout>

然后运行我们的范例，显示如下图

哎呀，竟然没效果，这是为什么呢？

Android LinearLayout 线性布局有几个约束条件

当 android:orientation="vertical" 时，只有水平方向的设置才起作用，垂直方向的设置不起作用

left，right，center_horizontal 是生效的
当 android:orientation="horizontal" 时，只有垂直方向的设置才起作用，水平方向的设置不起作用

top，bottom，center_vertical 是生效的

不过，如果想要使用 LinearLayout 去解决这个问题也不是没办法，就是在两个按钮外各自包裹一个 LinearLayout 然后五五开，在设置按钮的对齐方式

修改 activity_main.xml 代码如下

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

    <TextView
        android:layout_marginTop="100dp"     
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"    
        android:text="请输入要保存的电话号码"/>    

    <EditText    
        android:layout_width="fill_parent"    
        android:layout_height="wrap_content"/>    


    <LinearLayout    
        android:layout_width="fill_parent"    
        android:layout_height="wrap_content"    
        android:orientation="horizontal">

        <LinearLayout    
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"    
        android:orientation="horizontal"
        android:layout_weight="1"     
        android:gravity="left">

            <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"
            android:layout_gravity="left"  
            android:text="保存"/>

        </LinearLayout>

        <LinearLayout    
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"    
        android:orientation="horizontal"
        android:layout_weight="1"    
        android:gravity="right">   

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

运行范例显示结果如下

哇，成功了，但是，这样太复杂了没有没有？

是的，复杂，但是管用啊，有时候，很多问题的解决办法就是这么的笨拙

有没有更简单的实现方式呢？

有的，有的，那就是 RelativeLayout 相对布局