博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【Android】Android六种布局详解
阅读量:7073 次
发布时间:2019-06-28

本文共 4504 字,大约阅读时间需要 15 分钟。

这篇就对LinearLayout、RelativeLayout、自定义ViewGroup、FrameLayout、TableLayout、AbsoluteLayout六种布局进行详细的讲解。

1.LinearLayout布局

线性布局,两种排法:

  • 从左到右
    android:orientation=”horizontal”
  • 从上到下
    android:orientation=”vertical”
    具体上图

LinearLayout

一个竖向的大LinearLayout嵌套着两个小LinearLayout,第一个小LinearLayout为横向,第二个小LinearLayout为竖向。

2.RelativeLayout布局

参考其他控件进行布局,默认为父控件。

有三种类型的属性:

  • 属性值是true或false
    • android:layout_centerHrizontal 水平居中
    • android:layout_centerVertical 垂直居中
    • android:layout_centerInparent 相对于父元素完全居中。
    • android:layout_alignParentBottom 位于父元素的下边缘
    • android:layout_alignParentTop 位于父元素的上边缘
    • android:layout_alignParentLeft 位于父元素的左边缘
    • android:layout_alignParentRight 位于父元素的右边缘
  • 属性值是”@id/*“
    • android:layout_below 在某元素的下方
    • android:layout_above 在某元素的上方
    • andorid:layout_toRightOf 在某元素的右方
    • android:layout_toLeftOf 在某元素的左方
    • android:layout_alignBottom 和某元素下方对齐
    • android:layout_alignTop 和某元素上方对齐
    • android:layout_alignRight 和某元素右方对齐
    • android:layout_alignLeft 和某元素左方对齐
  • 属性值是数值
    • android:layout_marginLeft 离某元素左边缘的距离
    • android:layout_marginRight 离某元素右边缘的距离
    • android:layout_marginTop 离某元素上边缘的距离
    • android:layout_marginBottom 离某元素下边缘的距离

各取一个来写例子,如图。

RelativeLayout

注意

  • 如果没有定义左右,那么默认在左边,如果没有定义上下,默认在上边。
  • 相同位置,新定义的元素会覆盖旧的元素。例:1被2覆盖了。
  • 4只定义了在父元素的下部,左右没有定义,于是默认就在左边了。
  • android:layout_below,在某元素的下部并不意味着就一定是紧随某元素,只是在下部的默认位置。例如:5是在3的下部,但是是在下部的默认左边。
  • 6为下边缘对齐3,7为marginLeft=150dp。
  • 8为多个属性共同定义的结果。首先是在3的右部,然后是垂直居中,然后marginLeft=100dp得到最后位置。

代码如下:

3.MyLayout布局(自定义ViewGroup)

自定义布局主要是重写两个方法:

  • onMeasure() 这个是写自定义容器的大小。
  • onLayout() 这个是写子元素的布局。
    我自己写了一个自定义布局,是顺序填充会延对角线进行排列。

3.1onMeasure()

@Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { /** * 获得此ViewGroup上级容器为其推荐的宽和高,以及计算模式 */ int widthMode = MeasureSpec.getMode(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int sizeWidth = MeasureSpec.getSize(widthMeasureSpec); int sizeHeight = MeasureSpec.getSize(heightMeasureSpec); // 计算出所有的childView的宽和高 measureChildren(widthMeasureSpec, heightMeasureSpec); /** * width和height是当wrap_content时使用的属性。 */ int width = 0; int height = 0; int cCount = getChildCount(); int cWidth = 0; int cHeight = 0; /** * 在这里计算当wrap_content时,布局的大小。 */ for (int i = 0; i < cCount; i++) { View childView = getChildAt(i); cWidth = childView.getMeasuredWidth(); cHeight = childView.getMeasuredHeight(); width += cWidth; height += cHeight; } /** * 如果是wrap_content设置为我们计算的值 * 否则:直接设置为父容器计算的值 */ setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? sizeWidth : width, (heightMode == MeasureSpec.EXACTLY) ? sizeHeight : height); }

首先要说一下布局计算模式,即最后的EXACTLY。一共有三种计算模式:

  • MeasureSpec.EXACTLY:精确尺寸,相当于具体数值和match_parent。
  • MeasureSpec.AT_MOST:最大尺寸,相当于 warp_content。
  • MeasureSpec.UNSPECIFIED:未指定尺寸,这种情况不多,一般用于AdapterView。

最后的设定大小时,如果是精确尺寸就是用sizeWidth即获取的尺寸,如果是最大尺寸就是要我们自己计算的那个尺寸了。

onMeasure()最主要的功能就是计算wrap_content的尺寸设置尺寸
我将这个方法称为“建画布”,先建了画布才能在上面绘图嘛。

3.2 onLayout()

@Override    protected void onLayout(boolean changed, int l, int t, int r, int b) { int cCount = getChildCount(); /** * 遍历所有childView根据其宽和高,以及margin进行布局 */ for (int i = 0; i < cCount; i++) { View childView = getChildAt(i); r = l + childView.getMeasuredWidth(); b = t + childView.getMeasuredHeight(); childView.layout(l, t, r, b); l += childView.getMeasuredWidth(); t += childView.getMeasuredHeight(); } }

这个方法的作用是设置摆放子元素的位置。其中onLayout()传入的l、t、r、b分别是这样

  • l,t分别对应子元素左上角的left,top坐标
  • r,b分别对应子元素右下角的right,bottom坐标

并且可以使用childview.getMeasuredWidth()和childView.getMeasureHeight()得到子元素的宽和高。

这样就可以来对每个子元素进行布局了。
我称这个方法为“定位置”。定完位置后那么子元素就被放到了我们想要的地方。
这样一个自定义ViewGroup就可以使用了。
xml文件如下:

最后效果如图:

MyLayout

4.FrameLayout布局

帧布局,这个布局的特点是从左上角开始,后面的会覆盖前面的控件。

代码如下:

实际效果如下:

FrameLayout

5.TableLayout布局

表格布局。

它遵循着以下结构:

还有几个重要属性:

  • 写在TableLayout中的属性
    • android:stretchColumns 设置第几列为伸展(0表示第一列)
    • android:shrinkColumns 设置第几列为收缩
    • android:collapseColumns 设置第几列为隐藏
  • 写在TableRow里的控件里的属性
    • android:layout_column 设置控件在第几列
    • android:layout_span 设置控件能跨多少列
    • android:gravity 设置控件的排列方式,可以水平居中,水平靠左,水平靠右,垂直居中,垂直靠右,垂直靠左

代码如下:

最后效果如下:

TableLayout

如果想要设置两个一个并排显示的,可以参考下面的代码:

效果图:

6.AbsoluteLayout布局

绝对布局,极力不推荐,官方已经舍弃。

定义两个控件左上角坐标轴
android:layout_xandroid:layout_y来控制位置。

最后效果如下:

AbsoluteLayout

 

原文连接:

转载地址:http://hkkml.baihongyu.com/

你可能感兴趣的文章
第一周学习总结
查看>>
现代软件工程—构建之法---第二章:练习与讨论
查看>>
写在前面的话
查看>>
统计图像分割训练集中的类别分布
查看>>
添不花钱学计算机及编程(预备篇)— 操作系统
查看>>
Unity3D与iOS消息交互方法(1)--iOS接收Unity3D发出的消息
查看>>
用栈实现递归算法(第一版)
查看>>
纯绿色集成环境,可切换180个Mysql、700个PHP版本
查看>>
ADO.NET之SqlConnection、sqlcommand的应用(学习笔记)
查看>>
JS替换字符串里面的双引号
查看>>
行转化为列
查看>>
java中final小结
查看>>
Nginx 配置多个站点
查看>>
Android互动设计-蓝牙遥控自走车iTank
查看>>
【307】◀▶ Python 相关功能实现
查看>>
【node.js】Buffer(缓冲区)
查看>>
yii---进行接受参数
查看>>
写在开始
查看>>
基本算法实现小结(一)—— 单链表
查看>>
String的&#39;+&#39;的性能及原理
查看>>