【Android】入门——六大布局详解
目录
一.LinearLayout布局
二.RelativeLayout布局
三.MyLayout布局(自定义ViewGroup)
四.FrameLayout布局
五.TableLayout布局
六.AbsoluteLayout布局
本博文对LinearLayout、RelativeLayout、自定义ViewGroup、FrameLayout、TableLayout、AbsoluteLayout六种布局进行详细的讲解。
一.LinearLayout布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="250dp"android:orientation="horizontal"><TextViewandroid:layout_width="96dp"android:layout_height="match_parent"android:background="#b2dfdb" /><TextViewandroid:layout_width="96dp"android:layout_height="match_parent"android:background="#80cbc4" /><TextViewandroid:layout_width="96dp"android:layout_height="match_parent"android:background="#4db6ac" /><TextViewandroid:layout_width="96dp"android:layout_height="match_parent"android:background="#26a69a"android:id="@+id/textView" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="68dp"android:background="#b2dfdb" /><TextViewandroid:layout_width="match_parent"android:layout_height="68dp"android:background="#80cbc4" /><TextViewandroid:layout_width="match_parent"android:layout_height="68dp"android:background="#4db6ac" /><TextViewandroid:layout_width="match_parent"android:layout_height="68dp"android:background="#26a69a" /></LinearLayout>
</LinearLayout>
二.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 离某元素下边缘的距离
下面为举例:
注意:
如果没有定义左右,那么默认在左边,如果没有定义上下,默认在上边。
相同位置,新定义的元素会覆盖旧的元素。例:2下面其实还有1,但是1被2覆盖了。
4只定义了在父元素的下部,左右没有定义,于是默认就在左边了。
android:layout_below,在某元素的下部并不意味着就一定是紧随某元素,只是在下部的默认位置。例如:5是在3的下部,但是是在下部的默认左边。
6为下边缘对齐3,7为marginLeft=150dp。
8为多个属性共同定义的结果。首先是在3的右部,然后是垂直居中,然后marginLeft=100dp得到最后位置。<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:id="@+id/button1"android:layout_width="50dp"android:layout_height="50dp"android:textSize="50sp"android:text="1"android:background="#26a69a"/><TextViewandroid:id="@+id/button2"android:layout_width="50dp"android:layout_height="50dp"android:textSize="50sp"android:text="2"android:background="#26a69a"/><TextViewandroid:id="@+id/button3"android:layout_width="50dp"android:layout_height="50dp"android:textSize="50sp"android:background="#26a69a"android:text="3"android:layout_centerInParent="true"/><TextViewandroid:id="@+id/button4"android:layout_width="50dp"android:layout_height="50dp"android:textSize="50sp"android:background="#26a69a"android:text="4"android:layout_alignParentBottom="true"/><TextViewandroid:id="@+id/button5"android:layout_width="50dp"android:layout_height="50dp"android:textSize="50sp"android:background="#26a69a"android:text="5"android:layout_below="@id/button3"/><TextViewandroid:id="@+id/button6"android:layout_width="50dp"android:layout_height="50dp"android:textSize="50sp"android:background="#26a69a"android:text="6"android:layout_alignBottom="@+id/button3"/><TextViewandroid:id="@+id/button7"android:layout_width="50dp"android:layout_height="50dp"android:textSize="50sp"android:background="#26a69a"android:text="7"android:layout_marginLeft="150dp"/><TextViewandroid:id="@+id/button8"android:layout_width="50dp"android:layout_height="50dp"android:textSize="50sp"android:background="#26a69a"android:text="8"android:layout_centerVertical="true"android:layout_marginLeft="100dp"android:layout_toRightOf="@id/button3"/> </RelativeLayout>
三.MyLayout布局(自定义ViewGroup)
自定义布局主要是重写两个方法:
- onMeasure() 这个是写自定义容器的大小。
- onLayout() 这个是写子元素的布局。
我自己写了一个自定义布局,是顺序填充会延对角线进行排列。
onLayout()方法的作用是设置摆放子元素的位置。其中onLayout()传入的l、t、r、b分别是这样
l,t分别对应子元素左上角的left,top坐标
r,b分别对应子元素右下角的right,bottom坐标
并且可以使用childview.getMeasuredWidth()和childView.getMeasureHeight()得到子元素的宽和高。
这样就可以来对每个子元素进行布局了。
我称这个方法为“定位置”。定完位置后那么子元素就被放到了我们想要的地方。
这样一个自定义ViewGroup就可以使用了。
public class MyLayout extends ViewGroup {public MyLayout(Context context) {super(context);}public MyLayout(Context context, AttributeSet attrs) {super(context, attrs);}public MyLayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}@Overrideprotected 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);/*** 记录如果是wrap_content是设置的宽和高*/int width = 0;int height = 0;int cCount = getChildCount();int cWidth = 0;int cHeight = 0;//根据childView计算的出的宽和高,以及设置的margin计算容器的宽和高,主要用于容器是warp_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);}@Overrideprotected 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();}}
}
首先要说一下布局计算模式,即最后的EXACTLY。一共有三种计算模式:
MeasureSpec.EXACTLY:精确尺寸,相当于具体数值和match_parent。
MeasureSpec.AT_MOST:最大尺寸,相当于 warp_content。
MeasureSpec.UNSPECIFIED:未指定尺寸,这种情况不多,一般用于AdapterView。
最后的设定大小时,如果是精确尺寸就是用sizeWidth即获取的尺寸,如果是最大尺寸就是要我们自己计算的那个尺寸了。
onMeasure()最主要的功能就是计算wrap_content的尺寸和设置尺寸。
这个方法称为“建画布”,先建了画布才能在上面绘图,XML文件如下:<?xml version="1.0" encoding="utf-8"?> <com.example.layout.MyLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"><TextViewandroid:layout_width="50dp"android:layout_height="50dp"android:background="#b2dfdb" /><TextViewandroid:layout_width="50dp"android:layout_height="50dp"android:background="#80cbc4" /><TextViewandroid:layout_width="50dp"android:layout_height="50dp"android:background="#4db6ac" /><TextViewandroid:layout_width="50dp"android:layout_height="50dp"android:background="#26a69a" /> </com.example.layout.MyLayout>
四.FrameLayout布局
帧布局,这个布局的特点是从左上角开始,后面的会覆盖前面的控件。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="120dp"android:textColor="#9c27b0"android:text="第一层"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="95dp"android:textColor="#e91e63"android:text="第二层"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="60dp"android:textColor="#e51c23"android:text="第三层"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="40dp"android:textColor="#5677fc"android:text="第四层"/>
</FrameLayout>
五.TableLayout布局
表格布局。
它遵循着以下结构:<TableLayout><TableRow><!-在这里填充第一行的元素-></TableRow><TableRow><!-在这里填充第二行的元素-></TableRow> </TableLayout>
还有几个重要属性:
写在TableLayout中的属性
android:stretchColumns 设置第几列为伸展(0表示第一列)
android:shrinkColumns 设置第几列为收缩
android:collapseColumns 设置第几列为隐藏
写在TableRow里的控件里的属性
android:layout_column 设置控件在第几列
android:layout_span 设置控件能跨多少列<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:collapseColumns="2"android:shrinkColumns="1"android:stretchColumns="0"><TableRow><TextView android:text="我是伸展的第一列" /><TextView android:text="我是收缩的第二列" /><TextView android:text="我被隐藏了" /></TableRow><TableRow><TextView android:text="我可以伸展的很长很长很长长" /><TextView android:text="我可以收缩,我可以变的很深很深很深" /><TextView android:text="我被隐藏了T_T" /></TableRow><TableRow><TextViewandroid:layout_column="1"android:text="我要在第2列" /></TableRow><TableRow><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_column="0"android:layout_span="2"android:text="我要 跨 两 列" /></TableRow> </TableLayout>
六.AbsoluteLayout布局
绝对布局,极力不推荐,官方已经舍弃。在此不做深究。
【Android】入门——六大布局详解相关推荐
- android沉浸式布局详解
原文:https://blog.csdn.net/qq_21806653/article/details/51802 1. 沉浸式布局简介 沉浸,何为沉浸?我所理解的就是让用户身临其境,尽量不被其他环 ...
- android布局置顶_[置顶] Android系统五大布局详解Layout
我们知道Android系统应用程序一般是由多个Activity组成,而这些Activity以视图的形式展现在我们面前,视图都是由一个一个的组件构成的.组件就是我们常见的Button.TextEdit等 ...
- Android CardView卡片布局详解(八)
一.CardView简介 CardView卡片布局是Android 5.0之后推出的布局效果,一般用于显示阴影和圆角效果的UI.CardView继承自FrameLayout帧布局,所以它其实还是一个布 ...
- android.graphics.bitmap jar,Android入门之画图详解
前文常用的控件介绍了不少,现在就来讨论一下手机开发中常用到的画图.要掌握Android的画图,首先就要了解一下,基本用到的如下一些图形接口: 1.Bitmap,可以来自资源/文件,也可以在程序中创建, ...
- android 详解画图,Android入门之画图详解
前文常用的控件介绍了不少,现在就来讨论一下手机开发中常用到的画图.要掌握Android的画图,首先就要了解一下,基本用到的如下一些图形接口: 1.Bitmap,可以来自资源/文件,也可以在程序中创建, ...
- Android入门到精通详解 电子书下载
学习Android手机系统编程的朋友必看的教程,Android系统现在已惭成主流,对于这门技术的掌握,作为前瞻程序员 下载地址: http://www.ce91.com/thread-87796-1- ...
- android中帧布局效果,布局之FrameLayout(帧布局)详解
New UI-布局之FrameLayout(帧布局)详解 --转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途!本节引言:FrameLayout(帧布局)可以说是六大布局中最为简单的一 ...
- ANDROID L——Material Design详解(主题和布局)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...
- Android开发重点难点1:RelativeLayout(相对布局)详解
前言 啦啦啦~博主又推出了一个新的系列啦~ 之前的Android开发系列主要以完成实验的过程为主,经常会综合许多知识来写,所以难免会有知识点的交杂,给人一种混乱的感觉. 所以博主推出"重点难 ...
最新文章
- 如何为嵌入式应用选择适当的SSD
- 计算机组成原理时序,计算机组成原理 中央处理器(CPU) 多级时序系统
- 【PMCAFF大咖分享会】揭秘大数据驱动下的京东供应链体系
- [蓝桥杯][基础练习VIP]分解质因数
- boost中bind的使用
- 微信小程序 official-account组件 关注公众号
- PPP协议体系的实现
- w10自动删除文件怎么关了_清理win10系统垃圾方法,自动更新文件删除介绍
- python向下_如何在python中向下转换
- vs2015安装qt5教程
- gc cr block lost
- SAP HR 导出PA0185 身份证件信息
- valgrind:内存泄漏 memory leak 调试教程
- c# 实现语音播报功能 转发
- Python OpenCV 读取USB摄像头报错问题解决
- Voxelization——体素化模型
- 什么是Web1.0、2.0、3.0?
- R语言ggplot2可视化:使用patchwork包将两个ggplot2可视化结果组合起来、使用labs函数为第二个子图添加标题信息
- 产品从无到有的完整工作流程
- MySQL数据库忘记密码后,如何修改密码
热门文章
- excel自定义排序出错_使用Excel自定义列表按您的方式进行排序
- 金融理论、投资组合与量化选股_18资产收益率和风险
- CAD对齐的两种方式、AUTOCAD——修改坐标轴方向
- js判断数组中某个元素的个数
- 计算机网络分层结构—OSI参考模型、TCPI参考模型、五层体系结构
- JNI:Java调用C接口的方法(1)
- java计算机毕业设计在线商城系统源码+mysql数据库+系统+lw文档+部署
- java异地登录 怎么解决_同一帐号异地登录
- 【Redis】锁机制
- 贪吃蛇项目面试C语言,【游戏数组面试题】面试问题:C语言贪吃蛇(… - 看准网...