Android 基本布局以及应用
来源:互联网 发布:人工智能 下半场 编辑:程序博客网 时间:2024/05/16 05:49
一、布局
1.LinearLayout 线性布局
2.FrameLayout 单帧布局,也有中文翻译为帧布局、框架布局
3.GridLayout网格布局
4.TableLayout 表格布局
常用的属性有
1.android:orientation:可以设置布局的方向 2.android:id - 为控件指定相应的ID 3.android:text - 指定控件当中显示的文字,需要注意的是,这里尽量使用string.xml 4.android:gravity - 指定控件的基本位置,比如说居中,居右等位置 5.android:textSize - 指定控件当中字体的大小 6.android:background - 指定控件所用的背景色,RGB命名法 7.android:layout_width - 指定控件的宽度 8.android:layout_height - 指定控件的高度 9.android:layout_weight - 指定控件的占用比例 10.android:padding - 指定控件的内边距,也就是说控件当中的内容 11.android:sigleLine - 如果设置为真的话,则将控件的内容显示在一行当中
图解
1、 LinearLayout 线性布局
线性布局是Android开发中最常见的一种布局方式,它是按照垂直或者水平方向来布局,通过“android:orientation”属性可以设置线性布局的方向。属性值有垂直(vertical)和水平(horizontal)两种。线性布局的排列在某行或者某列并不会自动换行或换列,就是说如果采用水平布局,控件宽度超过屏幕显示的话,后面的控件都将被隐藏,不会自动换行。
layout_weight属性以控制各个控件在布局中的相对大小。layout_weight属性是一个非负整数值;线性布局会根据该控件layout_weight值与其所处布局中所有控件layout_weight值之和的比值为该控件分配占用的区域。例如,在水平布局的LinearLayout中有两个Button,这两个Button的layout_weight属性值都为1,那么这两个按钮都会被拉伸到整个屏幕宽度的一半。如果layout_weight指为0,控件会按原大小显示,不会被拉伸;对于其余layout_weight属性值大于0的控件,系统将会减去layout_weight属性值为0的控件的宽度或者高度,再用剩余的宽度或高度按相应的比例来分配每一个控件显示的宽度或高度。
看看代码的运行效果
<?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" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1"/> <Button android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="2" android:text="2"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="2"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="8" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:orientation="vertical"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="3" /> </LinearLayout> > </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="4"/> <Button android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="2" android:text="4"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="5"/> </LinearLayout></LinearLayout>
上面代码运行效果如下
先用布局把屏幕分成上中下三层,再用android:layout_weight(权重)按比例0:8:0的比例指定比例的占用。
再用android:layout_weight把上面3个按钮(Button)中间的按钮设置为2,
因为中间Button的 高为0所以就没有显示在布局中,这样就会使第一个Button和第三个Button分别显示在左上和又上。
中间的先用 android:layout_gravity=”center”属性将布局剧中,然后再用android:orientation=”vertical”改变布局的方向,再把中间布局的Button剧中,左下和右下一样的操做。
2.FrameLayout 单帧布局
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"> <ImageButton android:layout_width="300dp" android:layout_height="300dp" android:background="#ff0000" android:layout_gravity="center" /> <ImageButton android:layout_width="280dp" android:layout_height="280dp" android:background="#27ff18" android:layout_gravity="center" /> <ImageButton android:layout_width="260dp" android:layout_height="260dp" android:background="#fb0ff7" android:layout_gravity="center" /> <ImageButton android:layout_width="240dp" android:layout_height="240dp" android:background="#fcd705" android:layout_gravity="center" /> <ImageButton android:layout_width="220dp" android:layout_height="220dp" android:background="#3c5ceb" android:layout_gravity="center" /></FrameLayout>
效果图:
上面每一种颜色都是一个按钮,单帧布局不会像线性布局那样每个组件之间自动对齐,而是一个一个覆盖
3.GridLayout网格布局
GridLayout网格布局是Android4.0之后新加入的布局方式与表格布局相似。
看看代码吧,这里就简单的做了一个计算机的排版
<?xml version="1.0" encoding="utf-8"?><GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:rowCount="6" android:columnCount="4"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" /><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="2" /><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="3" /><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="/" /><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="4" /><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="5" /><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="6" /><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="x" /><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="7" /><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="8" /><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="9" /><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="-" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_columnSpan="2" android:layout_gravity="fill_horizontal" android:text="0" /><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="." /><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="+" android:layout_rowSpan="2" android:layout_gravity="fill_vertical" /><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_columnSpan="3" android:layout_gravity="fill_horizontal" android:text="=" /></GridLayout>
效果图
4.TableLayout 表格布局
TableLayout顾名思义,此布局为表格布局,适用于N行N列的布局格式。一个TableLayout由许多TableRow组成,一个TableRow就代表TableLayout中的一行。
<?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"> <TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <TableRow> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="1111" android:background="#ff0000" android:layout_weight="1" /> </TableRow> <TableRow> <TextView android:text="2行1列" android:background="#FF00FF88" /> <TextView android:text="222" android:background="#FF88" android:layout_weight="2" /> <TextView android:text="222" android:background="#FF00FF" android:layout_weight="2" /> </TableRow> </TableLayout> <TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:collapseColumns="1"> <TableRow> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="表2ddddddddddddddd" android:background="#b9f506" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="表" android:background="#0b5ce8" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="表2ddddddddddddddddddd" android:background="#f9e211" /> </TableRow> <TableRow> <TextView android:text="表2" android:background="#b9f506" /> <TextView android:text="表2" android:background="#0b5ce8" /> <TextView android:text="表2" android:background="#f9e211" /> </TableRow> </TableLayout></LinearLayout>
效果图如下:
这里说一下
圈中的代码是控制箭头处蓝色区的显示和隐藏
其它扩展的内容各位可以查找对应的API说明文档进行学习。
- Android 基本布局以及应用
- 关与Android studio安装以及Android的基本布局
- Android文件目录,线性布局以及基本控件
- Androi布局以及基本button
- RelativeLayout 布局居中以及一些基本布局
- android 基本布局
- android基本布局
- Android基本布局学习
- Android-基本布局
- Android 基本布局
- Android基本布局
- Android基本布局解析
- Android 基本布局
- Android基本布局总结
- Android 基本布局
- Android基本布局案例
- Android基本布局-RelativeLayout
- Android基本布局-FrameLayout
- RabbitMQ基础
- Android常用控件二
- 2017苹果全球开发者大会直播地址
- 栈 模板
- LeetCode 9.Palindrome Number
- Android 基本布局以及应用
- POJ2533Longest Ordered Subsequence(LIS)
- 从今天执笔
- twemproxy集群生产总结
- 优雅的克隆——原型模式
- Java基础应用之基本语法(自动类型转换与强制类型转换)
- 线段树入门
- Lua 变参处理之select函数
- HDU5066-Harry And Physical Teacher