[android]_[四种基本布局]

1.LinearLayout

LinearLayout 又称作线性布局,是一种非常常用的布局。正如它名字所描述的一样,这个布局会将它所包含的控件在线性方向上依次排列。相信你之前也已经注意到了,我们在上
一节中学习控件用法时,所有的控件就都是放在LinearLayout 布局里的,因此上一节中的控件也确实是在垂直方向上线性排列的。

1.1 垂直排列

设置布局的orientation="vertical"让布局内的控件垂直排列

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical" >
	<Button
		android:id="@+id/button1"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Button 1" />
	<Button
		android:id="@+id/button2"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Button 2" />
	<Button
		android:id="@+id/button3"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Button 3" />
</LinearLayout>

效果如下:



1.2 平行排列

修改刚刚的orientation="horizontal"来让其平行排列

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
……
</LinearLayout>
效果如下:


这里需要注意,如果LinearLayout 的排列方向是horizontal,内部的控件就绝对不能将宽度指定为match_parent,因为这样的话单独一个控件就会将整个水平方向占满,其他的控件就没有可放置的位置了。同样的道理,如果LinearLayout 的排列方向是vertical,内部的控件就不能将高度指定为match_parent。


1.3  对齐方式

android:layout_gravity属性用来指定控件的位置,需要注意, 当LinearLayout 的排列方向是horizontal 时,只有垂直方向上的对齐方式才会生效,因为此时水平方向上的长度是不固定的,每添加一个控件,水平方向上的长度都会改变,因而无法指定该方向上的对齐方式。同样的道理,当LinearLayout 的排列方向是vertical 时,只有水平方向上的对齐方式才会生效。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button 2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Button 3" />
</LinearLayout>

效果:



1.4 按比例适配

android:layout_weight。这个属性允许我们使用比例的方式来指定控件的大小,它在手机屏幕的适配性方面可以起到非常重要的作用。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="horizontal" >
	<EditText
		android:id="@+id/input_message"
		android:layout_width="0dp"
		android:layout_height="wrap_content"
		android:layout_weight="1"
		android:hint="Type something"
	/>
	<Button
		android:id="@+id/send"
		android:layout_width="0dp"
		android:layout_height="wrap_content"
		android:layout_weight="1"
		android:text="Send"
	/>
</LinearLayout>



2.RelativeLayout

RelativeLayout 又称作相对布局,也是一种非常常用的布局。和LinearLayout 的排列规则不同,RelativeLayout 显得更加随意一些,它可以通过相对定位的方式让控件出现在布局的任何位置。也正因为如此,RelativeLayout 中的属性非常多,不过这些属性都是有规律可循的,其实并不难理解和记忆,看下面例子说明。

2.1 相对位置

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent" >
	<Button
		android:id="@+id/button1"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_alignParentLeft="true"
		android:layout_alignParentTop="true"
		android:text="Button 1" />
	<Button
		android:id="@+id/button2"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_alignParentRight="true"
		android:layout_alignParentTop="true"
		android:text="Button 2" />
	<Button
		android:id="@+id/button3"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_centerInParent="true"
		android:text="Button 3" />
	<Button
		android:id="@+id/button4"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_alignParentBottom="true"
		android:layout_alignParentLeft="true"
		android:text="Button 4" />
	<Button
		android:id="@+id/button5"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_alignParentBottom="true"
		android:layout_alignParentRight="true"
		android:text="Button 5" />
</RelativeLayout>


android:layout_alignParentLeft、android:layout_alignParentRight、android:layout_centerInParentandroid:layout_alignParentBottom、android:layout_alignParentBottom

等属性顾名思义就是相对窗口的位置。


同样我们可以设置相对某个控件的位置,如下例子:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent" >
	<Button
		android:id="@+id/button3"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_centerInParent="true"
		android:text="Button 3" />
	<Button
		android:id="@+id/button1"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_above="@id/button3"
		android:layout_toLeftOf="@id/button3"
		android:text="Button 1" />
	<Button
		android:id="@+id/button2"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_above="@id/button3"
		android:layout_toRightOf="@id/button3"
		android:text="Button 2" />
	<Button
		android:id="@+id/button4"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_below="@id/button3"
		android:layout_toLeftOf="@id/button3"
		android:text="Button 4" />
	<Button
		android:id="@+id/button5"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_below="@id/button3"
		android:layout_toRightOf="@id/button3"
		android:text="Button 5" />
</RelativeLayout>


RelativeLayout还有很多属性,这里不一一举例说明了。


3. FrameLayout

FrameLayout 相比于前面两种布局就简单太多了,因此它的应用场景也少了很多。这种布局没有任何的定位方式,所有的控件都会摆放在布局的左上角。让我们通过例子来看一看吧。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	>
	<Button
		android:id="@+id/button"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Button"
	/>
	<ImageView
		android:id="@+id/image_view"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:src="@drawable/ic_launcher"
	/>
</FrameLayout>



4.TableLayout

TableLayout 允许我们使用表格的方式来排列控件,这种布局也不是很常用,你只需要了解一下它的基本用法就可以了。既然是表格,那就一定会有行和列,在设计表格时我们尽量应该让每一行都拥有相同的列数,这样的表格也是最简单的。不过有时候事情并非总会顺从我们的心意,当表格的某行一定要有不相等的列数时,就需要通过合并单元格的方式来应对,下面举两个例子。

4.1 登录界面

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent" >
	<TableRow>
		<TextView
			android:layout_height="wrap_content"
			android:text="Account:" />
		<EditText
			android:id="@+id/account"
			android:layout_height="wrap_content"
			android:hint="Input your account" />
	</TableRow>
	<TableRow>
		<TextView
			android:layout_height="wrap_content"
			android:text="Password:" />
		<EditText
			android:id="@+id/password"
			android:layout_height="wrap_content"
			android:inputType="textPassword" />
	</TableRow>
	<TableRow>
		<Button
			android:id="@+id/login"
			android:layout_height="wrap_content"
			android:layout_span="2"
			android:text="Login" />
	</TableRow>
</TableLayout>



4.2 修改上面代码让控件自动填满屏幕

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1"
>
……
</TableLayout>


种布局可以混用,就像线性布局里面可以有相对布局,根据自己的需要使用,一般情况下都是使用线性布局和相对布局。


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值