Android UI之五种基本布局详解

Android布局是应用界面开发的重要一环,在Android中,共有五种布局方式,分别是:

  1. LinearLayout (线性布局)
  2. RelativeLayout(相对布局)
  3. FrameLayout(帧布局)
  4. TableLayout(表格布局)GridLayout 网格布局
  5. AbsoluteLayout(绝对布局)

LinearLayout (线性布局)

LinearLayout是一种线型的布局方式。LinearLayout布局容器内的组件一个挨着一个地排列起来:不仅可以控制个组件横向排列,也可控制各组件纵向排列。

  • android:orientation 属性指定了排列方向是 vertical,如果指定的是horizontal,控件就会在水平方向上排列了。
  • android:gravity 是用 于指定文字在控件中的对齐方式
  • android:layout_gravity 是用于指定控件在布局中的对齐 方式 RelativeLayout 相对布局
  • android:layout_weight="1"(权重分布),这个weight在垂直布局时,代表行距;水平的时候代表列宽;weight值越大就越大。
  • android:visibility=invisible控制布局是否显示 :1、显示 visible 2、不显示,但占空间 invisible 3、隐藏 gone

RelativeLayout(相对布局)

是一种相对布局,控件的位置是按照相对位置来计算的,后一个控件在什么位置依赖于前一个控件的基本位置,是布局最常用,也是最灵活的一种布局。

分类方式一
a)、第一类:属性值为true或false
  android:layout_centerHrizontal 水平居中
  android:layout_centerVertical 垂直居中
  android:layout_centerInparent 相对于父元素完全居中
  android:layout_alignParentBottom 贴紧父元素的下边缘
  android:layout_alignParentLeft 贴紧父元素的左边缘
  android:layout_alignParentRight 贴紧父元素的右边缘
  android:layout_alignParentTop 贴紧父元素的上边缘  
b)、第二类:属性值必须为id的引用名“@id/id-name”
  android:layout_below 在某元素的下方
  android:layout_above 在某元素的的上方
  android:layout_toLeftOf 在某元素的左边
  android:layout_toRightOf 在某元素的右边
  android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
  android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
  android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
  android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐

c)、第三类:属性值为具体的像素值,如30dip,40px
  android:layout_marginBottom 离某元素底边缘的距离
  android:layout_marginLeft 离某元素左边缘的距离
  android:layout_marginRight 离某元素右边缘的距离
  android:layout_marginTop 离某元素上边缘的距离
  
分类方式二
  android:layout_marginTop="25dip" //顶部距离
  android:gravity="left" //空间布局位置
  android:layout_marginLeft="15dip //距离左边距
相对于给定ID控件
  android:layout_above 将该控件的底部置于给定ID的控件之上;
  android:layout_below 将该控件的底部置于给定ID的控件之下;
  android:layout_toLeftOf 将该控件的右边缘与给定ID的控件左边缘对齐;
  android:layout_toRightOf 将该控件的左边缘与给定ID的控件右边缘对齐;
  android:layout_alignBaseline 将该控件的baseline与给定ID的baseline对齐;
  android:layout_alignTop 将该控件的顶部边缘与给定ID的顶部边缘对齐;
  android:layout_alignBottom 将该控件的底部边缘与给定ID的底部边缘对齐;
  android:layout_alignLeft 将该控件的左边缘与给定ID的左边缘对齐;
  android:layout_alignRight 将该控件的右边缘与给定ID的右边缘对齐;
相对于父组件
  android:layout_alignParentTop 如果为true,将该控件的顶部与其父控件的顶部对齐;
  android:layout_alignParentBottom 如果为true,将该控件的底部与其父控件的底部对齐;
  android:layout_alignParentLeft 如果为true,将该控件的左部与其父控件的左部对齐;
  android:layout_alignParentRight 如果为true,将该控件的右部与其父控件的右部对齐;
居中
  android:layout_centerHorizontal 如果为true,将该控件的置于水平居中;
  android:layout_centerVertical 如果为true,将该控件的置于垂直居中;
  android:layout_centerInParent 如果为true,将该控件的置于父控件的中央;
指定移动像素
  android:layout_marginTop 上偏移的值;
  android:layout_marginBottom 下偏移的值;
  android:layout_marginLeft   左偏移的值;
  android:layout_marginRight   右偏移的值;
  
基本属性
  android:id --- 为控件指定相应的ID
  android:text --- 指定控件当中显示的文字,需要注意的是,这里尽量使用strings.xml文件当中的字符串
  android:grivity --- 指定控件的基本位置,比如说居中,居右等位置这里指的是控件中的文本位置并不是控件本身。
  android:textSize --- 指定控件当中字体的大小
  android:background --- 指定该控件所使用的背景色,RGB命名法
  android:width --- 指定控件的宽度
  android:height --- 指定控件的高度
  android:padding* --- 指定控件的内边距,也就是说控件当中的内容
  android:sigleLine --- 如果设置为真的话,则控件的内容在同一行中进行显示

FrameLayout(帧布局)

FrameLayout对象好比一块在屏幕上提前预定好的空白区域,可以将一些元素填充在里面,如图片。所有元素都被放置在FrameLayout区域的最左上区域,而且无法为这些元素制指定一个确切的位置,若有多个元素,那么后面的元素会重叠显示在前一个元素上。

TableLayout(表格布局)

TableLayout是指将子元素的位置分配到行或列中。Android的一个TableLayout有许多TableRow组成,每一个TableRow都会定义一个Row。TableLayout容器不会显示Row,Column,及Cell的边框线,每个Row拥有0个或多个Cell,每个Cell拥有一个View对象。在使用tablelayout时,应注意每一个cell的宽度。

(1)TableLayout行列数的确定

  • TableLayout的行数由开发人员直接指定,即有多少个TableRow对象(或View控件),就有多少行
  • TableLayout的列数等于含有最多子控件的TableRow的列数。如第一TableRow含2个子控件,第二个TableRow含3个,第三个TableRow含4个,那么该TableLayout的列数为4.

(2)TableLayout可设置的属性详解

TableLayout可设置的属性包括全局属性及单元格属性。

  1. 全局属性也即列属性,有以下3个参数:
      android:stretchColumns 设置可伸展的列。该列可以向行方向伸展,最多可占据一整行。
      android:shrinkColumns 设置可收缩的列。当该列子控件的内容太多,已经挤满所在行,那么该子控件的内容将往列方向显示。
      android:collapseColumns 设置要隐藏的列。
    示例:
      android:stretchColumns="0" 第0列可伸展
      android:shrinkColumns="1,2" 第1,2列皆可收缩
      android:collapseColumns="*" 隐藏所有行

说明:列可以同时具备stretchColumns及shrinkColumns属性,若此,那么当该列的内容N多时,将“多行”显示其内容。(这里不是真正的多行,而是系统根据需要自动调节该行的layout_height)

  1. 单元格属性,有以下2个参数:
      android:layout_column 指定该单元格在第几列显示
      android:layout_span 指定该单元格占据的列数(未指定时,为1)
      示例:
      android:layout_column="1" 该控件显示在第1列
      android:layout_span="2" 该控件占据2列

说明:一个控件也可以同时具备这两个特性。

GridLayout 网格布局

GridLayout布局使用虚细线将布局划分为行、列和单元格,也支持一个控件在行、列上都有交错排列。而GridLayout使用的其实是跟LinearLayout类似的API,只不过是修改了一下相关的标签而已,所以对于开发者来说,掌握GridLayout还是很容易的事情。GridLayout的布局策略简单分为以下三个部分:

  1. 首先它与LinearLayout布局一样,也分为水平和垂直两种方式,默认是水平布局,一个控件挨着一个控件从左到右依次排列,但是通过指定Android:columnCount设置列数的属性后,控件会自动换行进行排列。另一方面,对于GridLayout布局中的子控件,默认按照wrap_content的方式设置其显示,这只需要在GridLayout布局中显式声明即可。
  2. 其次,若要指定某控件显示在固定的行或列,只需设置该子控件的android:layout_row和android:layout_column属性即可,但是需要注意:android:layout_row=”0”表示从第一行开始,android:layout_column=”0”表示从第一列开始,这与编程语言中一维数组的赋值情况类似。
  3. 最后,如果需要设置某控件跨越多行或多列,只需将该子控件的android:layout_rowSpan或者layout_columnSpan属性设置为数值,再设置其layout_gravity属性为fill即可,前一个设置表明该控件跨越的行数或列数,后一个设置表明该控件填满所跨越的整行或整列。
    AbsoluteLayout
    android:layout_x 指定控件在父布局的x轴坐标
    android:layout_y 指定控件在父布局的 y轴坐标

AbsoluteLayout(绝对布局)

绝对布局极少使用,在不是绝对要使用的情况下就绝对不要用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容