Android五大布局

本篇开始介绍Android的五大布局的知识,一个丰富的界面显示总是要有众多的控件来组成的,那么怎样才能让这些控件能够按你的想法进行摆放,从而自定义你所想要的用户界面呢?这就牵涉到本章将要学习的知识————五大布局。本篇将依次对LinearLayout(线性布局)、RelativeLayout(相对布局)、TableLayout(表格布局)、FrameLayout(帧布局)、GridLayout(网格布局)进行介绍。

LinearLayout(线性布局)

这是一个非常常用的布局,它会将其中的控件在线性方向上依次排列,通过android:orientation属性指定其控件的排列方向,有vertical(垂直方向)以及horizontal(水平方向)排列。新建UILayoutTsetOne项目,其他设置保持默认。修改activity_main.xml中的代码:

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

模拟器中运行结果如下图所示,从图中可以看出,定义的三个button控件按照vertical依次排列。



接下来将vertical参数改变为horizontal参数。

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

运行程序,效果如下,从图中可以看出,定义的三个button组件按照horizontal依次排列。



attention!

倘若LinearLayout的排列方向指定为horizontal,则内部的控件就绝对不能将宽度指定为match_parent,因为如果这样设置,单独的控件将会将整个水平方向占满,其他控件将没有放置的位置了。

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

效果如图:



同样,倘若LinearLayout的排列方向指定为vertical,则内部的控件就绝对不能将高度指定为match_parent。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"> <Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
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:gravity属性android:layout_gravity属性

  • android:gravity属性:用于指定文字在控件中的对齐方式。可以选择的值有:top、bottom、left、right、center等,还可以用“|”来同时指定多个值,其中center值将相当于center_vertical|center_horizontal,表示文字在垂直和水平方向都居中对齐。
  • android:layout_gravity属性:用于指定控件在布局中的对齐方式。其可选值和android:gravity属性差不多,需要注意的是,当LinearLayout的排列方向是horizontal时只有垂直方向上的对齐方式才会生效,因为此时水平方向上的长度是不固定的,每添加一个控件,水平方向上的长度都会改变,因而无法指定该方向上的对齐方式。同样,当LinearLayout的排列方向是vertical时,只有水平方向上的对齐方式才会生效。修改activity_main.xml中的代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="Button 1" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button 2" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Button 3" /> </LinearLayout>

运行效果如图:



接下来,我们学习另一个重要属性:android:layout_weight,它允许我们使用比例的方式来指定控件的大小,在手机的适配性方面可以起到非常重要的作用。这里通过编写一个消息发送界面来做演示。所用到的控件有:一个文本编辑框和一个发送按钮。

修改activity_main.xml中的代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"> <EditText
android:id="@+id/input_msg"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Type in Some words" /> <Button
android:id="@+id/send_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="send_msg" /> </LinearLayout>

运行程序,效果如图:



这里你会发现EditText和Button的宽度都被指定为了0dp,你可能会担心这样这两个控件还能正常的显示出来吗?不用担心,因为这里,使用了android:layout_weight属性,此时控件的宽度就不由android:layout_width来决定了,这里写成了0dp是一种比较标准的写法。另外,dp是Android中用于指定控件大小、间距等属性的单位。可以看到这里通过android:layout_weight属性将值指定为了1,这表示两个控件在水平方向上平分宽度。原理:系统会将所有控件指定的layout_weight值相加,得到一个总值,然后每个控件所占大小的比例就是用该控件指定的layout_weight值除以刚才算出的总值。因此如果想让EditText占据屏幕宽度的3/5,Button占据屏幕宽度的2/5,只需要将EditText的layout_weight改成3,Button的layout_weight改成2就可以了。重新运行程序,效果如图:

接着再来看一下如何实现在两个控件之间用分割线进行分割,效果如图:



实现这种效果有两种方式:

  • 1.直接在布局中添加一个view,这个view的作用仅仅是显示出一条线,实现如下:
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#000000" />

实现代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 1" /> <View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#000000" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 2" /> <View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#000000" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 3" />
</LinearLayout>
  • 2.使用LinearLayout的一个divider属性,直接为LinearLayout设置分割线,这里需要准备一张线的图片 1)android:divider设置作为分割线的图片 2)android:showDividers设置分割线的位置,none(无),beginning(开始),end(结束),middle(每两个组件间) 3)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:divider="@drawable/thread"
android:orientation="vertical"
android:showDividers="middle"
android:dividerPadding="10dp"
tools:context="com.example.uilayouttestone.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(线性布局)的更多相关文章

  1. Android 布局详解 -三表格布局(TableLayout)以及重要属性

              TableLayout跟TableRow 是一组搭配应用的布局,TableLayout置底,TableRow在TableLayout的上方,而Button.TextView等控件就 ...

  2. Html5移动端页面自适应布局详解(阿里rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

  3. Android 布局详解

    Android 布局详解 1.重用布局 当一个布局文件被多处使用时,最好<include>标签来重用布局. 例如:workspace_screen.xml的布局文件,在另一个布局文件中被重 ...

  4. 2.2.1 LinearLayout(线性布局)

    本节引言 本节开始讲Android中的布局,Android中有六大布局,分别是: LinearLayout(线性布局), RelativeLayout(相对布局), TableLayout(表格布局) ...

  5. Grid 网格布局详解

    Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...

  6. Android布局管理详解(1)—— LinearLayout 线性布局

    Android的布局方式共有6种,分别是LinearLayout(线性布局).TableLayout(表格布局).FrameLayout(帧布局).RelativeLayout(相对布局).GridL ...

  7. [置顶] Android系统五大布局详解Layout

    我们知道Android系统应用程序一般是由多个Activity组成,而这些Activity以视图的形式展现在我们面前,视图都是由一个一个的组件构成的.组件就是我们常见的Button.TextEdit等 ...

  8. Android系统五大布局详解Layout

    我们知道Android系统应用程序一般是由多个Activity组成,而这些Activity以视图的形式展现在我们面前, 视图都是由一个一个的组件构成的.组件就是我们常见的Button.TextEdit ...

  9. Android开发之详解五大布局

    http://bbs.chinaunix.net/thread-3654213-1-1.html 为了适应各式各样的界面风格,Android系统提供了5种布局,这5种布局分别是: LinearLayo ...

随机推荐

  1. 在Tinymce编辑器里,集成数学公式

    在以前,需要在Web页面显示数学公式,常用的都是先制作成图片,然后插入到页面里.这使得后期对数学公式的修改变的麻烦,同时也不利于搜索引擎搜索. 本文将介绍如何在TinyMce编辑器里集成数学公式.先看 ...

  2. Use Swift Dynamic Framework (如何科学地引用第三方 Swift 库)

    转自:http://andelf.github.io/blog/2014/07/07/use-swift-dynamic-library/ CocoaPods 由于完全使用静态链接解决方法,过度依赖 ...

  3. Java修炼——键盘输入,字节转换流

    键盘控制输入字符,并且有转换流(InputStreamReader)加入,同样也是使用了缓冲. package com.bjsxt.ioproject; import java.io.Buffered ...

  4. art-template循环无法显示出数据

    art-template循环遍历无法显示数据原因 1.语法问题:循环语句导致的问题 2.插件问题: 用标准语法时循环数据如果引入第一个插件,会导致数据显示不出来只有引入第二个插件才可循环出数据 用原生 ...

  5. forEach()和for/in循环的缺点与for-of循环

    以数组为例,JavaScript 提供多种遍历语法.最原始的写法就是for循环. for (var index = 0; index < myArray.length; index++) { c ...

  6. LRU算法与增强

    概要本文的想法来自于本人学习MySQL时的一个知识点:MySQL Innodb引擎中对缓冲区的处理.虽然没有仔细研究其源码实现,但其设计仍然启发了我. 本文针对LRU存在的问题,思考一种增强算法来避免 ...

  7. 关于Manjaro+kde桌面Tim闪退的解决

    文章目录 关于Manjaro+kde桌面Tim闪退的解决 参考 Tim 我的问题 QQ 我的问题 WeChat 我的问题 本文结束 关于Manjaro+kde桌面Tim闪退的解决 参考 https:/ ...

  8. django----orm查询优化 MTV与MVC模型 choice参数 ajax serializers

    目录 orm查询优化 only defer select_related 与 prefetch_related MTV 与 MVC 模型 choice参数 Ajax 前端代码 后端代码 前后端传输数据 ...

  9. C# MD5加密字符串

    /// <summary> /// 用MD5加密字符串,可选择生成16位或者32位的加密字符串 /// </summary> /// <param name=" ...

  10. 《Java练习题》进阶练习题(二)

    编程合集: https://www.cnblogs.com/jssj/p/12002760.html 前言:不仅仅要实现,更要提升性能,精益求精,用尽量少的时间复杂度和空间复杂度解决问题. [程序58 ...