Android 布局组件
来源:互联网 发布:网络直播的受众年龄段 编辑:程序博客网 时间:2024/05/18 00:21
布局介绍
布局用于定义Activity中UI元素的排列结构,Android提供了LinearLayout线性布局、RelativeLayout相对布局 、FrameLayout帧布局 、TableLayout表格布局、AbsoluteLayout坐标布局 共五种布局,可以通过两种方式声明布局:
• 在 XML 中声明 UI 元素。Android 提供了对应于 View 类及其子类的XML 元素
• 运行时实例化布局元素。可以通过编程创建 View 对象和 ViewGroup 对象(并操纵其属性)。
在 XML 中声明 UI 的优点在于,可以更好地将应用的外观与控制应用行为的代码隔离。UI 描述位于应用代码外部,这意味着在修改或调整描述时无需修改您的源代码并重新编译。例如,可以创建适用于不同屏幕方向、不同设备屏幕尺寸和不同语言的 XML 布局。此外,在 XML 中声明布局还能更轻松地显示 UI 的结构,从而简化问题调试过程。因此,Android应用中普遍采用在XML中布局UI元素。
1.编写布局文件
布局文件都必须只包含一个根元素,并且该元素必须是视图对象或 ViewGroup 对象。定义根元素之后,即可再以子元素的形式添加其他布局对象或UI元素,从而逐步构建定义布局的视图层次结构
程序清单2.3-1布局文件的定义
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
在 XML 中声明布局后,请在您的 Android 项目 res/layout/ 目录中以 .xml 扩展名保存文件,以便其能够正确编译。
2.加载布局文件
当编译应用时,每个 XML 布局文件都会编译到一个 View 资源中。应该在 Activity.onCreate() 回调方法中使用应用代码加载布局资源。通过调用 setContentView(),以 R.layout.layout_file_name 形式向其传递对布局资源的引用来执行此操作。
程序清单2.3-2布局文件的定义
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
}
3.线性布局线性布局常用属性
XML属性
值
备注
android:orientation
horizontal
vertical
决定横向排列,还是纵向排列
android:layout_weight
int
将父布局中剩余的尺寸按各兄弟元素的weight值比例进行分配,与“wrap_content”配合使用
android:layout_margin
dp
设置对象边缘与父布局的边缘之间的空白
android:padding
dp
设置自身内部元素距离自身边缘的距离
android:background
color/drawable
设置整个布局画面的背景
android:gravity
Top,bottom,left,right,center
元素在自身所属区域内的对齐方式
android:layout_gravity
Top,bottom,left,right,center
元素在布局中的对齐方式
练习:利用线性布局实现下图所示效果。代码如下:
4.FrameLayout布局<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="10dip" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="用户名称" android:id="@+id/textView" android:textSize="18sp" android:textStyle="bold" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dip" android:id="@+id/etUserName" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="密码" android:id="@+id/textView2" android:textSize="18sp" android:layout_marginBottom="10dip" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/etPassword" /> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="登录" android:id="@+id/btLogin" android:textSize="18dp" android:layout_gravity="bottom" android:layout_weight="1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="注册" android:id="@+id/btReg" android:textSize="18dp" android:layout_gravity="bottom" android:layout_weight="1" /> </LinearLayout></LinearLayout>
XML属性
值
备注
android:layout_margin
dp
设置对象边缘与父布局的边缘之间的空白
android:padding
dp
设置自身内部元素距离自身边缘的距离
android:background
color/drawable
设置整个布局画面的背景
android:gravity
Top,bottom,left,right,center
元素在自身所属区域内的对齐方式
android:layout_gravity
Top,bottom,left,right,center
元素在布局中的对齐方式
练习:完成如下图所示效果代码:
5.相对布局RelativeLayout<?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:background="#000"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@mipmap/movie" android:scaleType="centerCrop" android:layout_gravity="center" /> <ImageView android:layout_width="48dip" android:layout_height="48dip" android:src="@mipmap/play" android:scaleType="fitCenter" android:layout_gravity="center" /></FrameLayout>
一种非常灵活的布局方式,通过指定界面元素与其他元素的相对位置关系,确定界面中所有元素的布局位置。特点:能够最大程度保证在各种屏幕类型的手机上正确显示界面布局表.
相对布局属性比较多,为了便于理解和记忆通常我们把属性分为三类:
第一类:属性值为true或false
RelativeLayout的常用属性
XML属性
备注
android:layout_centerHrizontal
水平居中
android:layout_centerVertical
垂直居中
android:layout_centerInparent
相对于父元素完全居中
android:layout_alignParentBottom
贴紧父元素的下边缘
android:layout_alignParentLeft
贴紧父元素的左边缘
android:layout_alignParentRight
贴紧父元素的右边缘
android:layout_alignParentTop
贴紧父元素的上边缘
第二类:属性值必须为id的引用名“@id/id-name”,
RelativeLayout的常用属性
XML属性
备注
android:layout_below
在某元素的下方
android:layout_above
在某元素的的上方
android:layout_toLeftOf
在某元素的左边
android:layout_toRightOf
在某元素的右边
android:layout_alignTop
本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft
本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom
本元素的下边缘和某元素的的下边缘对齐
第三类:属性值为具体的像素值,主要是调整ui元素之间的间距,如表2.3-5所示
表2.3-5RelativeLayout的常用属性
XML属性
备注
android:layout_marginBottom
离某元素底边缘的距离
android:layout_marginLeft
离某元素左边缘的距离
android:layout_marginRight
离某元素右边缘的距离
android:layout_marginTop
离某元素上边缘的距离
android:layout_marginBottom
离某元素底边缘的距离
android:layout_marginLeft
离某元素左边缘的距离
android:layout_marginRight
离某元素右边缘的距离
练习:完成如下图所示效果代码:
6.表格布局TableLayout<?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:paddingRight="10dp" android:paddingLeft="10dp" android:paddingTop="5dp" android:paddingBottom="5dp" > <ImageView android:id="@+id/ivLogin" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" android:layout_marginRight="5dp" /> <TextView android:id="@+id/tvTitle" android:layout_toRightOf="@id/ivLogin" android:layout_alignTop="@id/ivLogin" android:layout_alignBottom="@id/ivLogin" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="登录" android:textSize="18sp" android:gravity="center" /> <TextView android:id="@+id/tvSummary" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/tvTitle" android:text="欢迎加入杰瑞教育" android:layout_toRightOf="@+id/tvTitle" /> <EditText android:id="@+id/etName" android:hint="账户/邮箱/手机号码" android:layout_below="@+id/tvSummary" android:layout_width="match_parent" android:layout_height="wrap_content" /> <EditText android:id="@+id/etPwd" android:hint="密码" android:layout_below="@+id/etName" android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="登录" android:textSize="16sp" android:layout_alignParentBottom="true" /></RelativeLayout>
Tablelayout以行和列的形式对控件进行管理,每一行为一个TableRow对象,或一个View控件。当TableRow对象时,可在TableRow下添加子控件,默认情况下,每个子控件占据一列。有多少个子控件就有多少列;当为View时,该View将独占一行。
TableLayout的常用属性
XML属性
备注
android:layout_colum
指定该单元格在第几列显示
android:layout_span
指定该单元格占据的列数(未指定时,为1)
android:stretchColumns
设置可伸展的列。该列可向行方向伸展,最多可占据一整行
android:shrinkColumns
设置可收缩的列。当该列子控件的内容太多,已经挤满所在行,那么该子控件的内容将往列方向显示
android:layout_colum
指定该单元格在第几列显示
android:layout_span
指定该单元格占据的列数(未指定时,为1)
android:stretchColumns
设置可伸展的列。该列可向行方向伸展,最多可占据一整行
练习:完成今日头条界面。 需要完成效果 已完成效果
代码:
7.绝对布局AbsoluteLayout<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:stretchColumns="0,1,2,3" > <TextView android:text="今日头条" android:textColor="#ffffff" android:textSize="30sp" android:gravity="center" android:background="#ff0000" /> <TableRow> <TextView android:text="我的频道" android:textSize="20sp" android:id="@+id/pindao" /> <TextView android:text="编辑" android:textColor="#ff00" android:gravity="end" android:layout_span="2" /> <TextView android:text="^" android:layout_gravity="center" android:textSize="20sp" android:gravity="end" /> </TableRow> <TableRow> <Button android:text="健康" /> <Button android:text="正能量"/> <Button android:text="特卖"/> <Button android:text="彩票"/> </TableRow> <TableRow> <Button android:text="旅游"/> </TableRow> <TextView android:text="点击添加频道" android:textSize="20sp" /> <TableRow> <Button android:text="电影"/> <Button android:text="数码"/> <Button android:text="时尚"/> <Button android:text="辟谣"/> </TableRow> <TableRow> <Button android:text="奇葩"/> <Button android:text="游戏"/> <Button android:text="育儿"/> <Button android:text="减肥"/> </TableRow> <TableRow> <Button android:text="养生"/> <Button android:text="美食"/> <Button android:text="政务"/> <Button android:text="历史"/> </TableRow> <TableRow> <Button android:text="探索"/> <Button android:text="故事"/> <Button android:text="美文"/> <Button android:text="情感"/> </TableRow> <TableRow> <Button android:text="语录"/> <Button android:text="美团"/> <Button android:text="房产"/> <Button android:text="家居"/> </TableRow> <TableRow> <Button android:text="搞笑"/> <Button android:text="星座"/> <Button android:text="文化"/> <Button android:text="毕业生"/> </TableRow></TableLayout>
AbsoluteLayout是根据元素指定的x/y坐标值在屏幕上进行显示的布局。容器的坐标系是以左上角为(0, 0)点,当垂直向下为y轴和水平向右为x轴。AbsoluteLayout 没有页边框,允许元素之间互相重叠。
因为需要为元素固定坐标点,使界面代码太过刚性,以导致在不同的设备上兼容性差,开发中我们通常不推荐使用 AbsoluteLayout ,只需简单了解即可。
代码:7.GridLayout布局<?xml version="1.0" encoding="utf-8"?><AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_x="280px" android:layout_y="200px" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" /> </AbsoluteLayout>
GridLayout布局使用虚细线将布局划分为行、列和单元格,也支持一个控件在行、列上都有交错排列。而GridLayout使用的其实是跟LinearLayout类似的API,只不过是修改了一下相关的标签而已。GridLayout的布局策略简单分为以下三个部分:
首先它与LinearLayout布局一样,也分为水平和垂直两种方式,默认是水平布局,一个控件挨着一个控件从左到右依次排列,但是通过指定android:columnCount设置列数的属性后,控件会自动换行进行排列。另一方面,对于GridLayout布局中的子控件,默认按照wrap_content的方式设置其显示,这只需要在GridLayout布局中显式声明即可。
其次,若要指定某控件显示在固定的行或列,只需设置该子控件的android:layout_row和android:layout_column属性即可,但是需要注意:android:layout_row=”0”表示从第一行开始,android:layout_column=”0”表示从第一列开始,这与编程语言中一维数组的赋值情况类似。
最后,如果需要设置某控件跨越多行或多列,只需将该子控件的android:layout_rowSpan或者layout_columnSpan属性设置为数值,再设置其layout_gravity属性为fill即可,前一个设置表明该控件跨越的行数或列数,后一个设置表明该控件填满所跨越的整行或整列。
练习:完成如下图所示效果
需要完成效果 已完成效果
<?xml version="1.0" encoding="utf-8"?><GridLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:rowCount="5" android:columnCount="4" ><Button android:id="@+id/one" android:text="1" /> <Button android:id="@+id/two" android:text="2" /> <Button android:id="@+id/three" android:text="3" /> <Button android:id="@+id/devide" android:text="/" /> <Button android:id="@+id/four" android:text="4" /> <Button android:id="@+id/five" android:text="5" /> <Button android:id="@+id/six" android:text="6" /> <Button android:id="@+id/multiply" android:text="×" /> <Button android:id="@+id/seven" android:text="7" /> <Button android:id="@+id/eight" android:text="8" /> <Button android:id="@+id/nine" android:text="9" /> <Button android:id="@+id/minus" android:text="-" /> <Button android:id="@+id/zero" android:text="0" android:layout_columnSpan="2" android:layout_gravity="fill" /> <Button android:id="@+id/point" android:text="." /> <Button android:id="@+id/plus" android:text="+" android:layout_rowSpan="2" android:layout_gravity="fill" /> <Button android:id="@+id/erual" android:text="=" android:layout_columnSpan="3" android:layout_gravity="fill" /></GridLayout>
- android--布局组件截图
- Android布局组件
- Android 组件布局
- Android 布局组件
- android布局与组件
- Android 的布局组件学习
- Android组件的布局属性
- android 组件,xml布局中属性详解
- android的组件的作用与布局
- android中四大组件,五大布局
- Android 四大组件+五大布局
- Android 四大组件和五大布局
- Android四大组件和五大布局
- android SlidingDrawer伸缩折叠布局组件
- android-UI组件(一):布局管理器
- Android 四大组件·五大布局
- android之布局与UI组件
- Android四大组件五大布局
- CSS3伪元素选择器
- sql字符串截取
- 百练 青蛙的约会
- opencv学习(7)图像的各种滤波函数的介绍
- 参加第一场多校大一训练赛后的感想
- Android 布局组件
- eclipse创建新项目产生appcompat_v7文件原因及解决办法
- BestCoder Round #85 前三题题解
- aapt使用,<uses-permission>和<permission>的区别
- 2016-07-31
- 安装maven所见错误No plugin found for prefix 'help' in the current project and in the plugin
- HDU1796 How many integers can you find[容斥定理]
- 2016-07-31
- HDU 5777 domino 贪心