3.3详解四种基本布局

来源：互联网发布：传奇盛世宝石升级数据编辑：程序博客网时间：2024/06/08 17:19

布局的背部除了放置控件外，也可以放置布局，通过多层布局的嵌套，可实现比较复杂的界面实现。

3.3.1 LinearLayout

线性布局：线性方向上依次布局

通过

android:orientation="vertical"
android:orientation="horizontal"

调整是垂直或水平依次布局

android:orientation="vertical"

android:orientation="horizontal"

关键用法：

android:layout_gravity

button 1 :top button 2: center_vertical button 3:bottom

(2)android:layout_weight

允许使用比例的方式来指定控件的大小方便根据设备进行适配

 <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:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Send"
        android:layout_weight="1"
        android:id="@+id/button1"
        />

此时EditText和Button的宽度都是0dp，但是仍然显示出来，这是由于android:layout_weight语句的作用，他们的值都是1，这意味着他们在水平方向上平分宽度。

同理如果想改成3:2，代码改为

  <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:hint="Type something"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Send"
        android:layout_weight="2"
        android:id="@+id/button1"
        />

显示效果为下图

为了更好的显示效果，可分别调整各个控件的宽度

 <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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Send"
        android:id="@+id/button1"
        />

Button的宽度按实际内容来定，剩下的所有空间都属于EditText

3.3.2 RelativeLayout

RealtiveLayout又称为相对布局，更加随意，可通过相对定位的方式任意摆放位置

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:id="@+id/button1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"/>
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:id="@+id/button2"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"/>
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:id="@+id/button3"
        android:layout_centerInParent="true"/>
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 4"
        android:id="@+id/button4"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"/>
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 5"
        android:id="@+id/button5"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"/>

以上定位都是相对于父布局进行定位，当然也可以相对于控件进行定位

例如

android:layout_above="@id/button3"
android:layout_toRightOf="@id/button3"

表示在Button3的上方和靠近右边

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:id="@+id/button3"
        android:layout_centerInParent="true"/>
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:id="@+id/button1"
        android:layout_above="@id/button3"
        android:layout_toLeftOf="@id/button3"/>
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:id="@+id/button2"
        android:layout_above="@id/button3"
        android:layout_toRightOf="@id/button3"/>
 
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 4"
        android:id="@+id/button4"
        android:layout_below="@id/button3"
        android:layout_toLeftOf="@id/button3"/>
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 5"
        android:id="@+id/button5"
        android:layout_below="@id/button3"
        android:layout_toRightOf="@id/button3"/>

同时，还有另外一组相对控件进行定位的属性

android:layout_alignRight 
//一个控件的右边缘和另一个的右边缘对其

//同理还有
android:layout_alignLeft 
android:layout_alignButtom 
android:layout_alignTop

3.3.3 FrameLayout

应用场景比较少，且所有控件都会防止在布局的左上角

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

它的应用场合将在介绍碎片时用到。

3.3.4 TableLayout

允许我们使用表格的形式来排列控件，不是很常用。

当行等于列时，比较简单

当行不等于列时，需要通过合并单元格的形式来应对

比如设计一个登陆界面，允许用户输入账号密码后登陆，可以如下代码

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
<TableRow>
//每一个TableRow代表一行，在每一行加入一个控件相当于加入了一列，因此其中的控件是不能指定宽度的
    <TextView
        android:layout_height="wrap_content"
        android:text="Accout:" />
 
    <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"/>
//textPassword使得EditText变为密码输入框
</TableRow>
 
<TableRow>
 
    <Button
        android:id="@+id/login"
        android:layout_height="wrap_content"
        android:layout_span="2"
//为了使表格变得好看，设置登陆按钮占据两列
        android:text="Login"/>
</TableRow>
    
</TableLayout>

android:stretchColumns="1"
//表示如果表格不能完全占满屏幕宽度，就将第二列进行拉伸 0是拉伸第一列 以此类推

0 0