Android开发:界面布局的基本使用

问题提出

android开发中,一个好的程序,除了强大的功能以外,还要有一个能吸引别人眼球的界面。纵观当下流行的诸多Android软件,那些绚丽多彩,美轮美奂的程序界面与手触屏完美结合,给我们带来了不一般的用户体验,也把我们带进了梦幻般的Android世界。那么,如何开发出这些界面,让我们的Android软件在众多同类软件中脱颖而出呢?

问题分析

android开发中,用于界面布局的控件主要在Layouts分类中,常用的有线性布局控件LinearLayout、相对布局控件RelativeLayout、框架布局控件FrameLayout、表格布局控件TableLayout等。本文将简要介绍下这几个布局控件,并通过一个实例演示这些控件的使用。

问题解决

     在Eclipse中,界面布局有两种方式,我们可以在Graphical Layout中直接将控件拖入可视化界面,并在Property中对各种属性进行设置。也可以直接编辑我们的xml文件,用代码进行布局。如图:

android布局

     简单地说,界面布局主要就是做两件事情,一个是安排控件顺序,另一个就是设置控件属性。控件的属性有很多,且不同控件的属性既有共性也有个性,当然常用的并不多。

  1. 三个基本属性

这三个基本属性分别是id、layout_width、layout_height

id不多说,就是控件的编号,最好是一个控件一个编号以免引用时出现二义性;layout_ width: 控件的宽度;layout_ height: 控件的高度。

layout_width和layout_height,都有三个既定值,即”fill_parent”、”match_parent”、” wrap_content”。前两者含义相同,只是说法不同,如果你的程序需要兼容低版本(2.1以下)Android系统,那就使用”fill_parent”,其含义就是与装载自己的容器相同,即容器有多大空间,控件就占据多大的空间,最大的parent就是手机屏幕。而最后一个” wrap_content”,就是控件内容有多大,控件就有多大。

除了这三个既定值外,我们还可以用数值任意指定控件大小,但必须有单位。

单位符号 

单位名称 

备注 

mm

毫米

与日常生活中我们说的毫米一样,物理意义

in

英寸

与日常生活中我们说的英寸一样,物理意义

pt

1pt=1/72英寸,物理意义

px

像素

即屏幕的实际像素

dp

设备独立像素

使显示的大小与屏幕密度无关,推荐使用

sp

放大像素

与dp类似,主要用于文字的显示

以一个Button的layout_ width属性为例,xml代码如下:

 

01 <?xml version="1.0" encoding="utf-8"?>
02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03     android:layout_width="fill_parent"
04     android:layout_height="fill_parent"
05     android:orientation="vertical" >
06 <Button
07 android:id="@+id/button1"
08 android:layout_width="wrap_content"
09 android:layout_height="wrap_content"
10 android:text="宽度:wrap_content" />
11 <Button
12 android:id="@+id/button3"
13 android:layout_width="200dp"
14 android:layout_height="wrap_content"
15 android:text="宽度:200dp" />
16 <Button
17 android:id="@+id/button2"
18 android:layout_width="match_parent"
19 android:layout_height="wrap_content"
20 android:text="宽度:match_parent" />
21 </LinearLayout>

 

效果如图:

android布局效果

 

2.线性布局控件LinearLayout

2.1 属性orientation 

LinearLayout是布局中最基本的控件,也是最常用的布局控件。它有两种,一种是水平布置(horizontal);另一种是垂直布置(vertical),通过属性orientation来设置,水平布局时只有一行可以有若干列;垂直布局时只有一列,可以有若干行。

2.2属性gravity

android:gravity属性用来控制放置在本LinearLayout内的控件的对齐方式

android:layout_gravity属性是本LinearLayout控件相对于父容器的对齐方式

1.3 属性layout_weight

android:layout_weight是一个重要的属性,也是一个麻烦的属性,用的好可以让布局更加合理、紧凑。用的不好会使布局显得十分别扭。这个属性的字面意思是“权重”,就是一个比例系数,即表示控件在父容器中所占的空间比例。系数越大,占的比例越大,默认值为0;如果父容器中的各个子控件的android:layout_weight值相等,那么他们将均分父容器空间。

LinearLayout可以嵌套,也可以放置其他布局控件。下面我们在一个垂直的LinearLayout嵌套入两个水平的LinearLayout、若干Button和TextView。

Xml代码如下:

 

01 <?xml version="1.0" encoding="utf-8"?>
02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03     android:layout_width="fill_parent"
04     android:layout_height="fill_parent"
05     android:orientation="vertical" >
06 <TextView
07     android:id="@+id/textView1"
08     android:layout_width="wrap_content"
09     android:layout_height="wrap_content"
10     android:text="水平布置-layout_weight不相等"
11     android:textAppearance="?android:attr/textAppearanceLarge" />
12     <LinearLayout
13         android:id="@+id/linearLayout1"
14         android:layout_width="match_parent"
15         android:layout_height="wrap_content"
16         android:orientation="horizontal">
17 <Button
18         android:id="@+id/button1"
19         android:layout_width="wrap_content"
20         android:layout_height="wrap_content"
21         android:text="btn1"
22         android:layout_weight="1" />
23         <Button
24         android:id="@+id/button2"
25         android:layout_width="wrap_content"
26         android:layout_height="wrap_content"
27         android:text="btn2"
28         android:layout_weight="4" />
29         <Button
30         android:id="@+id/button3"
31         android:layout_width="wrap_content"
32         android:layout_height="wrap_content"
33         android:text=" btn3"
34         android:layout_weight="15"/>
35    </LinearLayout>
36     
37     <TextView
38     android:id="@+id/textView2"
39     android:layout_width="wrap_content"
40     android:layout_height="wrap_content"
41     android:text="水平布置-gravity居中"
42     android:layout_gravity="center"
43     android:textAppearance="?android:attr/textAppearanceLarge" />
44          
45    <LinearLayout
46         android:id="@+id/linearLayout1"
47         android:layout_width="match_parent"
48         android:layout_height="wrap_content"
49         android:orientation="horizontal"
50         android:gravity="center"
51         >
52         <Button
53         android:id="@+id/button1"
54         android:layout_width="wrap_content"
55         android:layout_height="wrap_content"
56         android:text="btn1" />
57         <Button
58         android:id="@+id/button2"
59         android:layout_width="wrap_content"
60         android:layout_height="wrap_content"
61         android:text=" btn2"  />
62         <Button
63         android:id="@+id/button3"
64         android:layout_width="wrap_content"
65         android:layout_height="wrap_content"
66         android:text="btn3" />
67    </LinearLayout>
68    <Button
69         android:id="@+id/button4"
70         android:layout_width="match_parent"
71         android:layout_height="wrap_content"
72         android:text="垂直布置 btn4" />
73    <Button
74         android:id="@+id/button5"
75         android:layout_width="match_parent"
76         android:layout_height="wrap_content"
77         android:text="垂直布置 btn5" />
78    <TextView
79     android:id="@+id/textView1"
80     android:layout_width="wrap_content"
81     android:layout_height="wrap_content"
82     android:text="以上均为垂直布置"
83     android:textAppearance="?android:attr/textAppearanceLarge" />
84 </LinearLayout>

 

效果如图:

 

3.相对布局控件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

该控件的左侧对齐参照控件的右侧

效果如图:

 

4.框架布局控件FrameLayout

这是一个简单的布局,放入里面的控件依次层叠,后方的控件就会盖住先放的控件。

 

5.表格控件TableLayout

一个TableLayout里面有表格行控件TableRow,每个TableRow里布置各自的控件,好比是一个大架子里面放了很多个抽屉,各个抽屉里放着各自的东西,类型可以不同,大小可以不同。如图:

问题总结

         Android开发中页面布局的重要性是不言而喻的。在Android软件开发中常用到的整体布局控件有:线性布局控件LinearLayout、相对布局控件RelativeLayout、框架布局控件FrameLayout、表格布局控件TableLayout等。他们各有各的适用情况。而且这些控件的属性含义是互通的。只要你有创意、一定的美工基础和耐心,你就能开发出美观的界面来。谢谢支持www.androidwhy.com的发展!本文代码在下方附件位置提供下载,有需要请直接下载。

推荐阅读:

Android开发:EditText,TextView以及Button的使用

Android开发:为什么学习Android开发?如何学好Android开发?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值