Android Studio 界面布局

1 相对 布局 RelativeLayout

相对布局的 XML 元素是<RelativeLayou>， 相对布局的特点是可以让控件之间互相确定
关系，这样可以保证在屏幕的局部范围内几个控件之间的关系不受外部影响。

具体实例来学习它的用法。
<? xml version= "1.0" encoding= "utf- - 8" ?>
< Rela tiveLayout xmlns: android= = "http://schemas.android.com/apk/res/android"
xmlns: tools= = "http://schemas.android.com/tools"
xmlns: app= = "http://schemas.android.com/apk/res- - auto"
android :layout_width= "match_parent"
android :layout_height= "match_parent"
an droid :paddingLeft= "@dimen/activity_horizontal_margin"
android :paddingRight= "@dimen/activity_horizontal_margin"
android :paddingTop= "@dimen/activity_vertical_margin"
android :paddingBottom= "@dimen/activity_vertical_margin"
app :layout_behavior= "@string/appbar_scrolling_view_behavior"
tools :showIn= "@layout/activity_main" tools :context= ".MainActivity"> 靠左最
顶端是一个<TextView>说明文本
< TextView android :text=" " 布局种类" "
android :id= "@+id/tvButtons"
android :layout_alignParentTop= "true" ----对齐到父 UI 的顶端
android :layout_alignParentLeft= "true" ---对齐到父 UI 的左端
android :layout_width= "wrap_content"
android :layout_height= "wrap_content" />
< Button
android :layout_width= "wrap_content"
android :layout_height= "wrap_content"
android :te xt=" " 帧" "
android :id= "@+id/btnFrame"
android :onClick= "btnFrameClick"
android :layout_below= "@+id/tvButtons"----位于文本框 tvButtons 之下
android :layout_alignLeft= "@+id/tvButtons"/>--与文本框 tvButtons 左边缘对齐
< Button
android :layout_width= "wrap _content"
android :layout_height= "wrap_content"
android :text=" " 线性" "
android :id= "@+id/btnLinear"
 android :onClick= "btnLinearClick"
android :layout_alignTop= "@+id/btnFrame"
android :layout_alignBottom= "@+id/btnFrame"
android :layout_toRightOf= "@+id/btnFrame"/>----位于【线性】按钮右侧
< Button
android :layout_width= "wrap_content"
android :layout_height= "wrap_content"
android :text=" " 表格" "
android :id= "@+id/btnTable"
android :onClick= "btn TableClick"
android :layout_alignTop= "@+id/btnFrame"
android :layout_alignBottom= "@+id/btnFrame"
android :layout_toRightOf= "@+id/btnLinear"/>
< Button
android :layout_width= "wrap_content"
android :layout_height= "wrap_c ontent"
android :text=" " 网格" "
android :id= "@+id/btnGrid"
android :onClick=" " btnGridClick" "
android :layout_alignTop= "@+id/btnFrame"
android :layout_alignBottom= "@+id/btnFrame"
android :layout_toRightOf= "@+id/btnTable"/>
</ RelativeLayout>
我们把相对位置属性总结一下：
(1)属性值为 true 或 false
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父元素完全居中
android:layout_alignParentBottom 贴紧父元素的下边缘
android:layout_alignParentLeft 贴紧父元素的左边缘
android:layout_alignParentRight 贴紧父元素的右边缘
android:layout_alignParentTop 贴紧父元素的上边缘
android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以
父元素做参照物
(2)属性值必须为 id 的引用名“@id/id-name”
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左边
android:layout_toRightOf 在某元素的右边
android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐
(3)属性值为具体的像素值，如 30dip，40px
android:layout_marginBottom 离某元素底边缘的距离
android:layout_marginLeft 离某元素左边缘的距离
android:layout_marginRight 离某元素右边缘的距离
android:layout_marginTop 离某元素上边缘的距离

2 帧 布局 FrameLayout
设计 FrameLayout 是为了显示单一项 view。通常，不建议使用 FrameLayout 显示多项
内容。因为它们的布局很难调节，不用 layout_gravity 属性的话，多项内容会重叠；使用
layout_gravity 的话，能设置不同的位置。
我们用到 FrameLayout 的场合不多，这里就用 FrameLayout 的特点演示一个动画的例
子 。 在 app\java\com.mycompany.mylayout 上 单 击 右 键 ， 在 弹 出 菜 单 上 选 择
new->Activity->Blank Activity，新建一个名为 FrameActivity。
把布局文件 content_frame.xml 的布局改为 FrameLayout，然后给它定义名
称： android :id= "@+id/myFrame"
修改后的结果：
<? xml version= "1.0" encoding= "utf- - 8" ?>
< FrameLayout xmlns: android= = "ht tp://schemas.android.com/apk/res/android"
xmlns: tools= = "http://schemas.android.com/tools"
xmlns: app= = "http://schemas.android.com/apk/res- - auto"
android :layout_width= "match_parent"
android :layout_height= "match_parent"
android :paddingLeft= "@dimen/ac tivity_horizontal_margin"
android :paddingRight= "@dimen/activity_horizontal_margin"
android :paddingTop= "@dimen/activity_vertical_margin"
android :paddingBottom= "@dimen/activity_vertical_margin"
android :id= "@+id/myFrame"
app :layout_behavio r= "@string/appbar_scrolling_view_behavior"
tools :showIn= "@layout/activity_frame"
tools :context= "com.mycompany.mylayout.FrameActivity">
</ FrameLayout>
把示例项目的 8 个图片 m1-m8 拷贝到 app\res\drawalbe 下，然后在 FrameActivty 编
写代码。
1.首先定义帧布局：FrameLayout frame = null;
然后在 FrameActivity 启动时候实例化这个 frame：
frame = (FrameLayout)findViewById(R.id. myFrame );
2.编写定时器方法 new Timer().schedule(参数 1，参数 2，参数 3)；
第一个参数是要执行的线程任务：
new TimerTask() {
@Override
public void run() {
//发送一条信息来通知系统改变前景图片
handler.sendEmptyMessage(0x123);
}
}
这个线程执行的任务很简单，就是 handler.sendEmptyMessage(0x123);稍后分析它。
第二个参数是这个线程启动后延迟多少微秒后才执行这个任务，为 0 表示立即执行；
第三个参数是间隔多少微秒执行一次，这里是 200 微秒。
完整的定时器方法如下：
new Timer().schedule( new TimerTask() {
@Override
public void run() {
//发送一条信息来通知系统改变前景图片
handler.sendEmptyMessage(0x123);
}
}, 0,200);
3.编写一个方法 ChangeImage(int i)，它根据传入的值 i 设置上文定义的 frame 的前景
图应该是哪个图片。getResources().getDrawable(R.drawable. m1 )是取到图片资源文件夹
drawable 下的 m1.png 图片，在程序里不用写图片扩展名，会自动识别图片种类。
void ChangeImage( int i)
{
Drawable a = getResources().getDrawable(R.drawable. m1 );
Drawable b = getResources().getDrawable(R.drawable. m2 );
Drawable c = getResources().getDrawable(R.drawable. m3 );
Drawable d = getResources().getDrawable(R.drawable. m4 );
Drawable e = getResources().getDrawable(R.drawable. m5 );
Drawable f = getResources().getDrawable(R.drawable. m6 );
Drawable g = getResources().getDrawable(R.drawable. m7 );
Drawable h = getResources().getDrawable(R.drawable. m8 );
switch(i)
{
case 0:
frame.setForeground(a);
 break;
case 1:
frame.setForeground(b);
break;
case 2:
frame.setForeground(c);
break;
case 3:
frame.setForeground(d);
break;
case 4:
frame.setForeground(e);
break;
case 5:
frame.setForeground(f);
break;
case 6:
frame.setForeground(g);
break;
case 7:
frame.setForeground(h);
break;
}
}
4. 因为子线程无法直接更新 UI，就用上文提到的 Handler 方法可以在子线程中直接用
来更新 UI。
所有 FrameActivity 代码如下：
public class FrameActivity extends AppCompatActivity {
FrameLayout frame = null;
//自定义一个用于定时更新 UI 界面的 handler 类对象
Handler handler = new Handler()
{
int i = 0;
@Override
public void handleMessage(Message msg) {
//判断信息是否为本应用发出的
if(msg. what == 0x123)
{
ChangeImage(i i);
i i++;
if(i i==8) i i=0;
}
super.handleMessage(msg);
}
 };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout. activity_frame );
frame = (FrameLayout)findViewById(R.id. myFrame );
//定义一个定时器对象,定时发送信息给 handler
new Timer().schedule( new TimerTask() {
@Override
public void run() {
//发送一条信息来通知系统改变前景图片
handler.sendEmptyMessage(0x123);
}
}, 0,200);
}
void ChangeImage( int i)
{
Drawable a = getResources().getDrawable(R.drawable. m1 );
Drawable b = getResources().getDrawable(R.drawable. m2 );
Drawable c = getResources().getDrawable(R.drawable. m3 );
Drawable d = getResources().getDrawable(R.drawable. m4 );
Drawable e = getResources().getDrawable(R.drawable. m5 );
Drawable f = getResources().getDrawable(R.drawable. m6 );
Drawable g = getResources().getDrawable(R.drawable. m7 );
Drawable h = getResources().getDrawable(R.drawable. m8 );
switch(i)
{
case 0:
frame.setForeground(a);
break;
case 1:
frame.setForeground(b);
break;
case 2:
frame.setForeground(c);
break;
case 3:
frame.setForeground(d);
break;
case 4:
frame.setForeground(e);
break;
case 5:
 fra me.setForeground(f);
break;
case 6:
frame.setForeground(g);
break;
case 7:
frame.setForeground(h);
break;
}
}
}

3 线性 布局 LinearLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
这是一个线性布局的例子，线性布局里的控件以在 XML 出现的顺序出现在屏幕上。线
性布局里的控件是从左到右水平排列，还是从上至下竖直排列是由<LinearLayout>属性
android:orientation 决定的，当它值为"horizontal"时控件是在水平一直排列，不会转到下一行；
当它值为"vertical"时控件至上而下排列

4 表格 布局 Table Layout
这种布局和 Office 里的制作表格类似，把布局看作一个表格，控件放置在每个单元格里。
表格行的最大行高与该行最高控件匹配；表格最宽的列与该列最宽控件匹配。如下面例子按
钮宽度和高度设为适应文本内容，每个控件在单元格里。
<? xml version= "1.0" encoding= "utf- - 8" ?>
< TableLayout
android :layout_width= "match_parent"
android :layout_height= "wrap_content"
android :layout_gravity= "center_horizontal"
xmlns: android= = "http://schemas.android.com/apk/res/android">
< TableRow>
< Button
android :layout_width= "wrap_content"
android :layout_height= "wrap_content"
android :text=" " 按钮 1"
android :id= "@+id/btn1" />
< Button
 android :layout_width= "wrap_content" "
android :layout_height= "wrap_content"
android :text=" " 按钮 2"
android :id= "@+id/btn2" />
< Button
android :layout_width= "wrap_content"
android :layout_height= "wrap_content"
android :te xt=" " 按钮 3"
android :id= "@+id/btn3" />
</ TableRow>
< TableRow>
< Button
android :layout_width= "wrap_content"
android :layout_height= "wrap_content"
android :text=" " 按钮 4"
android :id= "@+id/btn4" />
< Button
android :layout_width= "wrap_content"
android :layout_height= "wrap_content"
android :text=" " 按钮 5"
android :id= "@+id/btn5" />
< Button
android :layout_width= "wrap_content"
android :layout_height= "wrap_content"
android :text=" " 按钮 6"
android :id= "@+id/btn6" />
< Button
android :layout_width= "wrap_content"
android :layout_height= "wrap_content"
android :text=" " 按钮 7 7" "
android :id= "@+id/btn7" />
</ TableRow>
</ TableLayout>
当把按钮 5 的宽和高修改为下面值，尺寸明显大于其它按钮，则改行的高和该列的高以
按钮 5 为准。

<Button
android:layout_width="150dp"
android:layout_height="100dp"
android:text="按钮 5"
android:id="@+id/btn5" />

5 网格 布局 GridLayout
网格布局虽然和表格布局类似，但比表格更灵活。网格布局子控件放置在<GridLayout>
里，子控件坐标确定自己在网格位置，即所在的行和列，元素还可以跨行、跨列。如果控件
需要 3 行 3 列的布局，控件坐标如下表所示。
0，0 0，1 0，2
1，0 1，1 1，2
2，0 2，1 2，2
子控件的属性 android:layout_row 和 android:layout_column 分别表示行和列的坐标。跨行和
跨列分别用属性 android:layout_columnSpan 和 android:layout_rowSpan 表示。
我们看一个例子，如果按钮按如图所示排列，按钮 4 跨第 1 列的第
2、3 行，按钮 5 跨第 2 行的 2、3 列。
<? xml version= "1.0" encoding= "utf- - 8" ?>
< GridLayout
xmlns: android= = "http://schemas.android.com/apk/res/android"
android :layout_width= "match_parent" android :layout_heigh t= "match_parent">
< Button
android :layout_row= "0"
android :layout_column= "0"
android :layout_width= "wrap_content"
android :layout_height= "wrap_content"
android :text=" " 按钮 1"
android :id= "@+id/btn1" />
< Button n
android :layout_row= "0"
android :layout_column= "1"
android :layout_width= "wrap_content"
android :layout_height= "wrap_content"
android :text=" " 按钮 2"
android :id= "@+id/btn2" />
< Button
 android :layout_row= = "0"
android :layout_column= "2"
android :layout_width= "wrap_content"
android :layout_height= "wrap_content"
android :text=" " 按钮 3"
android :id= "@+id/btn3" />
< Button
android :layout_row= "1"
android :layout_c olumn= "0"
android :layout_rowSpan= "2"
android :layout_width= "wrap_content"
android :layout_height= "100dp"
android :text=" " 按钮 4"
android :id= "@+id/btn4"/>
< Button
android :layout_row= "1"
android :layout_co lumn= "1"
android :layout_columnSpan= "2"
android :layout_width= "175dp"
android :layout_height= "wrap_content"
android :text=" " 按钮 5"
android :id= "@+id/btn5" />
< Button
android :layout_row= "2"
android :layout _column= "1"
android :layout_width= "wrap_content"
android :layout_height= "wrap_content"
android :text=" " 按钮 6"
android :id= "@+id/btn6"/>
< Button
android :layout_row= "2"
android :layout_column= "2"
android :la yout_width= "wrap_content"
android :layout_height= "wrap_content"
android :text=" " 按钮 7"
android :id= "@+id/btn7" />
</ GridLayout>