Android常用的布局有:
- 线性布局(LinearLayout):线性布局简单实用,通过Orientation属性来控制整个屏幕的布局。Orientation有水平(horizontal)和垂直(vertical)两种取值。
- 相对布局(RelativeLayout):相对布局较为复杂,通过控件(View)之间的相对位置来控制整个屏幕的布局。要充分掌握相对布局需要着重理解“相对”的概念。“相对”是个模糊的概念,属于解释性的,在使用相对布局时,我们得尽量让其“绝对”化。
- 表格布局(TableLayout):表格布局很好理解,通过行和列来控制整个屏幕的布局。TableLayout的详细描述见:Android学习-UI-TableLayout。在此感谢http://blog.csdn.net/huanmenghen的博主。
其他的还有帧布局(FrameLayout)和绝对布局(AbsoluteLayout),这个不常用。
1、线性布局(LinearLayout)
线性布局通过DroidDraw来设计非常简单,在位于屏幕中间的位置找到Root Layout复选框中选择LinearLayout,如下图:
下面就可以向里边添加我们需要的控件了。添加控件之前,我们先设置LinearLayout的Orientation属性值,以便控制控件的布局。
屏幕右侧的Tab窗口中选择Properties页可找到LinearLayout的Orientation属性设置。设置完成需提交(Apply)。下面是我设置的界面:
上图左边是DroidDraw中的界面,右边是直接拷贝代码到Eclipse中设计器生成的界面,没什么不同。下面把linear_layout.xml文件代码附上:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/widget57"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="@+id/widget63"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/widget65"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:id="@+id/widget64"
android:layout_width="171dp"
android:layout_height="wrap_content"
android:text="EditText"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/widget66"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/widget68"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:id="@+id/widget67"
android:layout_width="172dp"
android:layout_height="wrap_content"
android:text="EditText"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/widget69"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/widget70"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="Button"
android:layout_weight="1"
android:layout_gravity="center_horizontal" />
<Button
android:id="@+id/widget71"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:text="Button"
android:layout_weight="1"
android:layout_gravity="center_horizontal" />
</LinearLayout>
</LinearLayout>
2、相对布局(RelativeLayout)
不多说,请看下边两张图:
同样左边是DroidDraw的,右边是Eclipse的,看出来有明显的不同。这倒不是说DroidDraw不行,而是我们没有很好的控制控件之间的“相对”位置。下面把relative_layout.xml文件代码附上:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/widget72"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="@+id/widget81"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
<EditText
android:id="@+id/widget82"
android:layout_width="159dp"
android:layout_height="wrap_content"
android:text="EditText1"
android:textSize="18sp"
android:layout_below="@+id/widget81"
android:layout_toRightOf="@+id/widget81" />
<EditText
android:id="@+id/widget87"
android:layout_width="155dp"
android:layout_height="wrap_content"
android:text="EditText2"
android:textSize="18sp"
android:layout_below="@+id/widget82"
android:layout_alignParentLeft="true" />
<Button
android:id="@+id/widget88"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:layout_alignBaseline="@+id/widget87"
android:layout_alignParentRight="true" />
<Button
android:id="@+id/widget89"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
android:layout_below="@+id/widget88"
android:layout_toLeftOf="@+id/widget88" />
<Button
android:id="@+id/widget90"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3"
android:layout_alignTop="@+id/widget89"
android:layout_alignParentRight="true" />
</RelativeLayout>
我们分析一下上面的xml文件,android:layout_alignParentTop="true"和android:layout_alignParentLeft="true"设置使得TextView“绝对”在那里。EditText1则位于TextView的右下方,有ndroid:layout_below="@+id/widget81"和android:layout_toRightOf="@+id/widget81"限定。EditText2和Button1分别在布局的左边和右边,EditText2在EditText1的下边,而Button1与EditText2基线对齐,这两个控件位置也“绝对”了。
接下来Button2被限定在Button1的左下方,Button3这与Button2顶端对齐并与靠布局的右边。看上去一点问题都没有啊,我这样修改了一下:
第一种方法:增加对Button1的限定,添加android:layout_below="@+id/widget82",限定Button1在EditText1的下方。可以解决问题。
第二种方法:把android:layout_below="@+id/widget88"修改为android:layout_below="@+id/widget87"即把Button2限定在EditText2的下方,而不是在Button1的下方。
从上面可以得出这样的结论:android:layout_align*等等属性是不能确定控件的“绝对”位置的,在RelativeLayout布局里,要尽量使用android:layout_below,android:layout_above等属性使控件的相对位置“绝对”化。