关于安卓界面编程布局剖析.docx
《关于安卓界面编程布局剖析.docx》由会员分享，可在线阅读，更多相关《关于安卓界面编程布局剖析.docx（21页珍藏版）》请在冰点文库上搜索。
关于安卓界面编程布局剖析
关于安卓界面编程
（布局部分）
实现效果：
两种实现方法的比较：
通过java代码：
通过XML：
Android系统中，组成界面的元素主要有：
Views：
所有用户界面展示信息的基类，包括通用控件，自定义控件。
ViewGroups：
是Views的继承类，支持多个控件进行组合。
Activities：
是窗体的基类。
在安卓中常用的几种布局：
FrameLayout：
层叠，新加的控件会叠加到原控件上面，遮挡。
LinearLayout：
直线添加控件，可垂直，可水平，依次排开部署控件，通过android:
orientation属性来改变方向。
RelativeLayout：
相对布局，相对一个控件的ID，如例如toLeft:
”okbutton”,below:
”text”。
TableLayout：
表格布局，用table的行列来定位控件。
AbsoluteLayout：
绝对位置，用x,y来定位。
GirdLayout：
通过一个随意选择的网格来放置视图，对于需要从两个方向进行对齐的界面非常有用。
控件的三个基本属性：
三个基本属性：
id（控件的编号）,layout_width（控件的宽度）,layout_height（控件的高度）
有三个既定值：
fill_parent,match_parent,wrap_content，前两个的意思是一样的，如果你的程序需要兼容到低版本Android系统，那就使用fill_parent，意思就是与装载自己的容器相同，最大的parent就是手机的屏幕，最后一个wrap_content就是控件的内容有多大，控件就有多大。
当然，除了这些既定值之外，我们还可以用数值任意指定控件大小，但必须有单位。
单位符号
单位名称
备注
mm
毫米
与日常生活中我们说的毫米一样，物理意义
in
英寸
与日常生活中我们说的英寸一样，物理意义
pt
点
1pt=1/72英寸，物理意义
px
像素
即屏幕的实际像素
dp
设备独立像素
使显示的大小与屏幕密度无关，推荐使用
sp
放大像素
与dp类似，主要用于文字的显示
实例：
关于Button的wrap_content\200dp\wrap_parent三种不同的情况。
演示代码：
xmlversion="1.0"encoding="utf-8"?
>
xmlns:
android="
android:
layout_width="match_parent"
android:
layout_height="wrap_content"
android:
orientation="vertical">
android:
id="@+id/button1"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="wrap_content"/>
android:
id="@+id/button2"
android:
layout_width="200dp"
android:
layout_height="wrap_content"
android:
text="200dp"/>
android:
id="@+id/button3"
android:
layout_width="match_parent"
android:
layout_height="wrap_content"
android:
text="wrap_parent"/>
演示效果：
LinearLayout线性布局
1.属性orientation：
LinearLayout是布局中最基本的控件，也是最常用的布局控件。
它有两种，一种是水平布置（horizontal）；另一种是垂直布置（vertical）,通过属性orientation来设置，水平布局时只有一行可以有若干列；垂直布局时只有一列，可以有若干行。
2.属性gravity
android:
gravity属性用来控制放置在本LinearLayout内的控件的对齐方式
android:
layout_gravity属性是本LinearLayout控件相对于父容器的对齐方式
3.属性layout_weight
android:
layout_weight是一个重要的属性，也是一个麻烦的属性，用的好可以让布局更加合理、紧凑。
用的不好会使布局显得十分别扭。
这个属性的字面意思是“权重”，就是一个比例系数，即表示控件在父容器中所占的空间比例。
系数越大，占的比例越大，默认值为0；如果父容器中的各个子控件的android:
layout_weight值相等，那么他们将均分父容器空间。
LinearLayout可以嵌套，也可以放置其他布局控件。
下面我们在一个垂直的LinearLayout嵌套入两个水平的LinearLayout、若干Button和TextView。
实例：
两种布局方式的使用和权重的设置
演示代码：
xmlversion="1.0"encoding="utf-8"?
>
xmlns:
android="
android:
layout_width="match_parent"
android:
layout_height="wrap_content"
android:
orientation="vertical">
android:
id="@+id/button1"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="水平布局1"/>
android:
layout_width="match_parent"
android:
layout_height="wrap_content">
android:
layout_weight="3"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="3"/>
android:
layout_weight="2"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="2"/>
android:
layout_weight="1"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="1"/>
android:
id="@+id/button2"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="水平布局2"/>
android:
layout_width="match_parent"
android:
layout_height="wrap_content">
android:
layout_weight="1"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="1"/>
android:
layout_weight="2"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="2"/>
android:
layout_weight="3"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="3"/>
android:
id="@+id/button3"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="垂直布局"/>
android:
id="@+id/button4"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="垂直布局"/>
android:
id="@+id/button5"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="垂直布局"/>
演示效果：
RelativeLayout相对布局
在RelativeLayout中的控件会多出几个属性，主要用于处理控件的相对位置——相对于父容器、相对于一个控件元素。
常用的属性如下：
属性名称
值
备注
相对于父窗口
layout_alignParentBottom
布尔值
值为true则表示与父窗口底部对齐
layout_alignParentTop
布尔值
值为true则表示与父窗口顶部对齐
layout_alignParentRight
布尔值
值为true则表示与父窗口右侧对齐
layout_alignParentLeft
布尔值
值为true则表示与父窗口左侧对齐
layout_centerInParent
布尔值
值为true则表示在父窗口中居中
layout_centerHorizontal
布尔值
值为true则表示与父窗口中水平居中
layout_centerVertical
布尔值
值为true则表示与父窗口中垂直居中
相对于控件元素
layout_above
参照控件id
该控件的底部对齐参照控件的上方
layout_below
参照控件id
该控件的顶部对齐参照控件的底部
layout_toLeftOf
参照控件id
该控件的右侧对齐参照控件的左侧
layout_toRightOf
参照控件id
该控件的左侧对齐参照控件的右侧
实例：
演示相对布局
演示代码：
xmlversion="1.0"encoding="utf-8"?
>
xmlns:
android="
android:
layout_width="match_parent"
android:
layout_height="wrap_content">
android:
id="@+id/progressBar1"
style="?
android:
attr/progressBarStyleLarge"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_alignParentTop="true"
android:
layout_centerHorizontal="true"/>
android:
id="@+id/progressBar2"
style="?
android:
attr/progressBarStyleLarge"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_alignParentBottom="true"
android:
layout_centerHorizontal="true"/>
android:
id="@+id/progressBar3"
style="?
android:
attr/progressBarStyleLarge"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_below="@+id/progressBar1"
android:
layout_marginTop="102dp"
android:
layout_centerInParent="true"/>
android:
id="@+id/progressBar4"
style="?
android:
attr/progressBarStyleLarge"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_alignParentStart="true"
android:
layout_centerVertical="true"/>
android:
id="@+id/progressBar5"
style="?
android:
attr/progressBarStyleLarge"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_alignParentEnd="true"
android:
layout_centerVertical="true"/>
演示效果：
FrameLayout框架（帧）布局
框架布局是最简单的布局形式。
所有添加到这个布局中的视图都以层叠的方式显示。
第一个添加的控件被放在最底层，最后一个添加到框架布局中的视图显示在最顶层，上一层的控件会覆盖下一层的控件。
这种显示方式有些类似于堆栈。
实例：
演示帧布局
实例代码：
xmlversion="1.0"encoding="utf-8"?
>
android="
android:
layout_width="fill_parent"
android:
layout_height="fill_parent">
android:
layout_width="300dp"
android:
layout_height="300dp"
android:
layout_gravity="center"
android:
background="#FF33ffff"/>
android:
layout_width="240dp"
android:
layout_height="240dp"
android:
layout_gravity="center"
android:
background="#FF33ccff"/>
android:
layout_width="200dp"
android:
layout_height="200dp"
android:
layout_gravity="center"
android:
background="#FF33ffff"/>
android:
layout_width="150dp"
android:
layout_height="150dp"
android:
layout_gravity="center"
android:
background="#FF3399ff"/>
android:
layout_width="100dp"
android:
layout_height="100dp"
android:
layout_gravity="center"
android:
background="#FF3366ff"/>
演示效果：
TableLayout表格布局
有多少个TableRow对象就有多少行，
列数等于最多子控件的TableRow的列数
直接在TableLayout加控件，控件会占据一行
TableLayout属性（也叫全局属性）：
*代表所有列
android:
shrinkColumns设置可收缩的列（内容过多，则收缩，扩展到第二行，控件没布满TableLayout时不起作用）
android:
stretchColumns设置可伸展的列（有空白则填充）
列可以同时具备stretchColumns及shrinkColumns属性
android:
collapseColumns设置要隐藏的列（索引列从0开始）
内部控件属性：
android:
layout_column该单元格在第几列显示
android:
layout_span该单元格占据列数，默认为1
实例：
TableLayout演示
演示代码：
xmlversion="1.0"encoding="utf-8"?
>
android="
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"
android:
orientation="vertical">
--演示表格扩展-->
android:
layout_width="match_parent"
android:
layout_height="wrap_content"
android:
background="#ff0000"
android:
shrinkColumns="0,1,2">
android:
layout_width="match_parent"
android:
layout_height="wrap_content"
android:
text="独占一行">
android:
layout_width="wrap_content"
android:
layout_height="wrap_content">
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="000000000000000000000000">
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="111111111111111111111111">
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="222222222222222222222222">
android:
layout_width="wrap_content"
android:
layout_height="wrap_content">
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="000000000000000000000000">
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_span="2"
android:
text="我占据2列">
--演示表格收缩-->
android:
layout_width="match_parent"
android:
layout_height="wrap_content"
android:
background="#FFCD6B"
android:
stretchColumns="0,1">
android:
id="@+id/tableRow5"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content">
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
text="填充一">
android:
layout_width="wrap_content"
android:
layo
升级会员 