Android LinearLayout 线性布局 4

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

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

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

  1. 使用 LinearLayout 的 android:divider 属性

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

    <View  
        android:layout_width="match_parent"  
        android:layout_height="1dp"  
        android:background="#000000" />
    
    1. 首先创建一个 空的 Android 项目 cn.twle.android.linearlayout

    2. 然后修改 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 属性来分隔几个按钮

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

  2. 将图片 /static/i/android/sep.png 保存到 res/drawable 命令下并重命名为 sep.png

  3. 修改 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

我们先来看看这个布局

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

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

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

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

  2. 修改 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 线性布局有几个约束条件

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

    left,right,center_horizontal 是生效的

  2. 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 相对布局

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.