Android app——详解四种基本布局

最新推荐文章于 2022-11-12 20:21:59 发布

Marry_Snow

最新推荐文章于 2022-11-12 20:21:59 发布

阅读量1.7k

点赞数 1

分类专栏： Android App

Android App 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

详解四种基本布局

一个丰富的界面总是要由很多个控件组成的，那我们如何才能让各个控件都有条不紊地摆放在界面上，而不是乱糟糟的呢？这就需要借助布局来实现了。布局是一种可用于放置很多控件的容器，它可以按照一定的规律调整内部控件的位置，从而编写出精美的界面。当然，布局的内部除了放置控件外，也可以放置布局，通过多层布局的嵌套，我们就能够完成一些比较复杂的界面实现，下面示意图很好地展示了它们之间的关系。
在这里插入图片描述

1.LinearLayout

LinearLayout 又称作线性布局，是一种非常常用的布局。正如它名字所描述的一样，这个布局会将它所包含的控件在线性方向上次排列。既然是线性排列，肯定就不仅只有一个方向，这是由于我们通过android:orientation属性指定了排列方向是vertical，如果指定的是 horizontal，控件就会在水平方向上排列了。
（1）垂直方向上：

<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>

在这里插入图片描述
（2）水平方向上：

<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: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>

在这里插入图片描述
（3）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
	android:layout_width="match_parent"    
	android:layout_height="match_parent"    a
	ndroid: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>

在这里插入图片描述
（4）

 <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>

在这里插入图片描述
（5）

<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="wrap_content"        
		android:layout_height="wrap_content"        
		android:text="Send"        
		/>
</LinearLayout>

在这里插入图片描述

2.RelativeLayout（相对布局）

RelativeLayout 又称作相对布局，也是一种非常常用的布局。和 LinearLayout 的排列规则不同，RelativeLayout 显得更加随意一些，它可以通过相对定位的方式让控件出现在布局的任何位置。
（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>

在这里插入图片描述
（2）

<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>

在这里插入图片描述

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

<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_width="wrap_content"        
			android:layout_span="2"        
			android:text="Login"        
			/>    
	</TableRow>
</TableLayout>

在这里插入图片描述
在 TableLayout 中每加入一个 TableRow就表示在表格中添加了一行，然后在TableRow中每加入一个控件，就表示在该行中加入了一列，TableRow中的控件是不能指定宽度的。使android:layout_span="2"占据两列的空间，就可以保证表格结构的合理性了。因为在TableRow中我们无法指定控件的宽度。这时使用android:stretchColumns属性就可以很好地解决这个问题，它允许将TableLayout中的某一列进行拉伸，以达到自动适应屏幕宽度的作用。

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"    
	android:layout_width="match_parent"    
	android:layout_height="match_parent"     
	android:stretchColumns="1">    
	<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_width="wrap_content"        
			android:layout_span="2"        
			android:text="Login"        
			/>    
	</TableRow>
</TableLayout>

在这里插入图片描述

Marry_Snow

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Android app——详解四种基本布局

详解四种基本布局一个丰富的界面总是要由很多个控件组成的，那我们如何才能让各个控件都有条不紊地摆放在界面上，而不是乱糟糟的呢？这就需要借助布局来实现了。布局是一种可用于放置很多控件的容器，它可以按照一定的规律调整内部控件的位置，从而编写出精美的界面。当然，布局的内部除了放置控件外，也可以放置布局，通过多层布局的嵌套，我们就能够完成一些比较复杂的界面实现，下面示意图很好地展示了它们之间的关系。1...
复制链接

扫一扫